Implementation of the express delivery query function in WeChat applet development

This article mainly introduces how to implement the instance code of the express delivery query function of mini-program development. here we implement the express delivery query function of mini-programs, if you need it, refer to the next article, which mainly describes how to implement the instance code of the express delivery query function of mini-program development. here, the mini-program query and express delivery function is implemented, for more information, see

Mini-program Express query function:

Product requirements,

Prepare api,

Code writing.

Step 1: for product requirements, we need to implement a function such as: enter the express delivery ticket number in the text box and click query. the following shows the required express delivery information.

In index. wxml, delete the default code and put it in a text input box and a query button.

 
   
    
  Query 
 

Next we need to add a style to the text box and button: set it in index. wxss

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

So far, our layout has been completed.

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

The wx. request initiates a network request url: Address path, which contains several parameters muti = 0 to return complete data from multiple rows. order = desc is sorted by time from new to old, com Express delivery name (courier company name), nu express waybill number, header: the value of the request parameter apikey is the apikey of our own Baidu account (you can log on to your Baidu account, view In Personal Center)

// Set a method for initiating a network request 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 this request method, you need to add a click event to our query button: bindtap = "btnClick", in index. add a query event in js and call the completed request method getExpressInfo through the app. Before that, we need to obtain the express order number entered in the text box,

Bindinput events are bound to the text box,

Obtain the entered express waybill number. In the data: Object, define the values of two variables, one input box, and the other express information to be displayed.

// Index. js // Obtain the application instance var app = getApp () Page ({data: {motto: 'Hello World', userInfo: {}, einputinfo: null, // input box value: expressInfo: null // courier information}, // Event Processing function bindViewTap: function () {wx. navigateTo ({url :'.. /todos '})}, onLoad: function () {console. log ('onload') var that = this // call the method of the application instance to obtain the global data app. getUserInfo (function (userInfo) {// update the data that. setData ({userInfo: userInfo})}, // input: function (e) {this. setData ({einputinfo: e. detail. value}) ;}, // query event 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 through the array.

 
   
    
  Query 
 
   
  
 
   
   
  
{Item. context }}
   
   
  
{Item. time }}
   
  
 
 
 

In the last step, set the style of the express 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}

Here, our entire query is complete ......

The above is the detailed content of the instance code implementation of the express delivery query function developed by applet. For more information, see other related articles in the first PHP community!