Mini-program development-"express query"

Recently, small programs are in full swing and various hot spots are catching up with this craze. I read the small program technical documents several days ago and wrote a case by hand using the tutorials. Today, I wrote a small demo of express delivery query, which is roughly divided into three steps: product requirements, api preparation, and code writing.

Recently, small programs are in full swing and various hot spots are catching up with this craze. I read the small program technical documents several days ago and wrote a case by hand using the tutorials. Today I wrote a small demo of express delivery query, which is roughly divided into three steps. Product requirements, prepare APIs, and write code.

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 ......