Mini Program Development 'Express Query'

WeChat mini programs have been in full swing recently, with all kinds of hot topics, just in time for this In the past few days, I have read through the technical documentation of the mini program and handwritten a case based on the tutorial. Today I wrote a small demo for express query, which is roughly divided into three steps

product requirements, preparing api, and writing code.

Step 1: Product requirements, we need to implement a function as shown below, enter the express delivery number in the text box, click Query, and the express delivery information we need will appear below

Step 2: Prepare

us First find an express API interface. We can see many APIs through apistore.baidu.com/. Let’s find an express query

We can see the interface address and some parameters. Once you are ready, start the coding work...

Step 3: Coding work

We create a new Express file, and then the default file is ready

We now change our header Navigation to a green color in app.js The background color

##Set the name of the navigation in index.json: "Express Query"

In index.wxml, delete the default code and put one of our text input boxes and a query

button

<!--index.wxml--><view class="container">
   <input placeholder="请输入快递单号" bindinput="input" />
   <button type="primary" bindtap="btnClick"> 查询 </button> </view>

Next we need to give the text box and button Add a style: Set

/**index.wxss**/
 input{border:1px solid #1AAD19; width:90%; height:20px; font-size:12px; padding:5px 10px;}
 button{margin-top:20px;}

in index.wxss. So far our layout is ready as shown:

Next we need to call the api express query interface we prepared in advance. We first need to set up a network request method getExpressInfo in app.js and set two parameters, one express parameter and one return method.

Use the wx.request provided by the document to initiate a network request url: address path, which contains several parameters muti=0 to return multiple rows of complete data, order=desc arranged by time from new to old, com The name of the courier (name of the courier company), nu courier order number, header: the value of the requested parameter apikey is the apikey of our own Baidu account (you can log in to your own Baidu account and view it in the personal center)

//设置一个发起网络请求的方法
  getExpressInfo:function(nu,cb){
    wx.request({
      url: 'http://apis.baidu.com/kuaidicom/express_api/express_api?muti=0&order=desc&com=zhongtong&nu='+nu,  
      data: {
        x: '' ,
        y: ''
      },
      header: {          'apikey': '247d486b40d7c8da473a9a794f900508'
      },
      success: function(res) {        //console.log(res.data)        cb(res.data);
      }
    })
  },
  globalData:{
    userInfo:null
  }

With such a

request method, we need to add a click event to our query button: bindtap="btnClick", add the query event in index.js, Use the app to call the written request method getExpressInfo. Before that, we need to get the express order number entered in the text box.

Bind a bindinput event to the text box,

Get the entered courier number. Define two

variables in the data:object, one is the value of the input box and the other is the courier information to be displayed.

//index.js//获取应用实例var app = getApp()
Page({
  data: {
    motto: 'Hello World',
    userInfo: {}, 
    einputinfo:null,//输入框值
    expressInfo:null //快递信息  },  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: '../todos/todos'
    })
  },
  onLoad: function () {
    console.log('onLoad')    var that = this
    //调用应用实例的方法获取全局数据
    app.getUserInfo(function(userInfo){      //更新数据      that.setData({
        userInfo:userInfo
      })
    })
  },  //快递输入框事件
  input:function(e){     this.setData({einputinfo:e.detail.value});
  },  //查询事件
  btnClick:function(){ 
    var thisexpress=this;  
    app.getExpressInfo(this.data.einputinfo,function(data){
        console.log(data);
        thisexpress.setData({expressInfo:data})
    })
  }
})

Finally, we need to display the queried express information in index.wxml, and use vx:for to loop the array.

<!--index.wxml--><view class="container">
   <input placeholder="请输入快递单号" bindinput="input" />
   <button type="primary" bindtap="btnClick"> 查询 </button> </view>
    

      
{{item.context}}
      
{{item.time}}
 
    
 

The last step is to set the style of the express delivery information displayed:

/**index.wxss**/
 input{border:1px solid #1AAD19; width:90%; height:20px; font-size:12px; padding:5px 10px;}
 button{margin-top:20px;}
 .expressinfo{font-size:12px; line-height: 18px;padding:10px; text-align:left;}  
 .expressinfo li{display:block}

At this point our entire query is completed...

[Related recommendations]

1.

WeChat Mini Program source code download

2.

WeChat Mini Program demo: Yangtao

The above is the detailed content of Mini Program Development 'Express Query'. For more information, please follow other related articles on the PHP Chinese website!