快递查询小程序

        作为学习前端的童鞋来说，想学习小程序开发，查询类的***无疑是很好的入手练习。下面的快递物流信息查询小***，希望对你能有启发。

        首先，查询类的小程序是通过调用API来实时获取信息，所以如果对于API不熟悉的童鞋可以移步API Store或聚合数据自行了解，这里不做详细解释。

        该小程序的具体代码：

        app.json：       

        {

          "pages":[

            "pages/index/index",

            "pages/logs/logs"

          ],

          "window":{

            "backgroundTextStyle":"light",

            "navigationBarBackgroundColor": "#000",

            "navigationBarTitleText": "快递查询",

            "navigationBarTextStyle":"#fff"

          }

        }

        app.wxss：        

        .container {

          height: 100%;

          display: flex;

          flex-direction: column;

          align-items: center;

          justify-content: space-between;

          padding: 200rpx 0;

          box-sizing: border-box;

        } 

        app.js：   

        App({

          onLaunch: function() {

            //调用API从本地缓存中获取数据

            var logs = wx.getStorageSync('logs') || []

            logs.unshift(Date.now())

            wx.setStorageSync('logs', logs)

          },

        

          getUserInfo: function(cb) {

            var that = this

            if (this.globalData.userInfo) {

              typeof cb == "function" && cb(this.globalData.userInfo)

            } else {

              //调用登录接口

              wx.getUserInfo({

                withCredentials: false,

                success: function(res) {

                  that.globalData.userInfo = res.userInfo

                  typeof cb == "function" && cb(that.globalData.userInfo)

                }

              })

            }

          },

        //发起请求

                getExpressInfo:function(nu,cb){

                  wx.request({

                    url: 'https://apis.baidu.com/kuaidicom/express_api/express_api?muti=0&order=desc&nu='+nu, //快递查询的接口地址

            data: {

              x: '',

              y: ''

            },

            header: {

              'apikey': '你申请的apijey'

            },

            success: function (res) {

              cb(res.data);

            }

          })

        },

        globalData:{

          userInfo:null

        }

        })

        index.wxml：      

        <view class="container">

        请输入运单号：

        <input bindinput="bindKeyInput" bindinput="input" auto-focus/>

        <button type="primary" size="{{defaultSize}}" bindtap="btnClick">查询</button>

        <scroll-view scroll-y style="height: 330px;">

        <view wx:for="{{expressInfo.data}}" class="showInfo">{{item.context}}{{item.time}}</view>

        </scroll-view>

        </view>

        index.wxss：       

        input{

          border:1px solid #ddd;

          border-left:1px solid transparent;

          border-right:1px solid transparent;

          width:100%;

          height:10%;

          margin:5px;

          padding: 5px;

        }

        button{

          width:90%;

          margin:10px;

        }

        .showInfo{

          margin:5px;

          font-size: 18px;

        }

        index.js：

        //获取应用实例

        var app = getApp()

        Page({

          data: {

            motto: 'Hello World',

            userInfo: {},

            expressNu:null,

            expressInfo:null

          },

          //***处理函数

          bindViewTap: function() {

            wx.navigateTo({

              url: '../logs/logs'

            })

          },

        

          btnClick:function(){

            //console.log(this.data.expressNu);

            var thispage = this;

            app.getExpressInfo(this.data.expressNu,function(data){

             thispage.setData({expressInfo:data});

            });

          },

        

          input:function(e){

            this.setData({expressNu:e.detail.value});

          },

          onLoad: function () {

            console.log('onLoad')

            var that = this

            //调用应用实例的方法获取全局数据

            app.getUserInfo(function(userInfo){

              //更新数据

              that.setData({

                userInfo:userInfo

              })

            })

          }

        })