Write a rookie wrap small program

The new handwriting applet is not simple, this is my first attempt to learn a lot. Double tenth after a recently, every day is not take the express way is to take delivery, turn over the novice wrapped up in the mobile application to check the delivery is very convenient, when I search on the WeChat end rookie wrapped up small programs, but have not found, so he wanted to write a do-it-yourself imitation app version rookie wrapped up small procedures, very interested in the express query logistics tracking.

Project Preview

Project effect preview

Project directory structure

The development tools used are VScode and wechat developer tools
Platform provides: WeChat public product | small programs, AppId gained in the goods units registered account, use the AppId detail letter developer tools, open project
API documents used: wechat appellate development document, wechat appellate development tutorial manual document _W3C introduces in detail the use of various wechat tools, and provides a lot of practical components. The search box in my project uses the basic style library of weUI wechat team, which is the search component of this component library.
Interface used: The express bird interface provides the tracking number and company code to query the logistics information of the express. Tencent Map platform provides the realization of these functions of using maps, map display, annotation/polygon drawing, route display.

Page deconstruction

As shown below, there are four pagesCopy the code

The first main page

<view class="container">

  <van-search class="van-search" value="{{ value }}" placeholder="Please enter pinyin abbreviation or Chinese" background="#ffffff" bindtap="searchAnother" />
   
  <image class="message" src="https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/5.jpg?sign=62596b8fb882fafa4735a7bb02ec48cf&t=1542775874"></image>
  <view class="weui-tabbar">
    <icon href="#" class="weui-tabbar__item weui-tabbar__item_on">
      <icon>
        <image mode="aspectFit" src="https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/saoma.jpg?sign=22ecf7d2269084181e8ace24c1319b06&t=1542775996 " alt="" class="weui-tabbar__icon"></image>
      </icon>
      <icon class="weui-tabbar__label" bindtap='scanCode'</icon> </icon> <icon href="#" class="weui-tabbar__item weui-tabbar__item_on" >
      <icon>
        <image mode="aspectFit" src="https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/2.jpg?sign=2c956d50da50cdf22b74812d1cc51b12&t=1542776039" alt="" class="weui-tabbar__icon"></image>
      </icon>
      <icon class="weui-tabbar__label"</icon> </icon> <icon href="#" class="weui-tabbar__item weui-tabbar__item_on" >
      <icon>
        <image mode="aspectFit" src="https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/3.jpg?sign=a9cbe061ac103a8e380f73f8c56cec2c&t=1542776057" alt="" class="weui-tabbar__icon"></image>
      </icon>
      <icon class="weui-tabbar__label"</icon> </icon> <icon href="#" class="weui-tabbar__item weui-tabbar__item_on" >
      <icon>
        <image mode="aspectFit" src="https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/4.jpg?sign=da2382ecf07e72710947db853406d600&t=1542776076" alt="" class="weui-tabbar__icon"></image>
      </icon>
      <icon class="weui-tabbar__label"</icon> </icon> </view> <swiper class="ad" indicator-dots='true' indicator-active-color='blue' autoplay='true'>
    <swiper-item wx:for="{{imageList}}" wx:key="index" wx:for-item="item">
      <image src="{{item.pic}}" mode="widthFix" bind:tap="tapImage" class='ad-img'></image>
    </swiper-item>
  </swiper>
  <view class='action'>
    <text class='action-text'> on </text> <image class='action-img' mode='aspectFill' src='https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/ad2.jpg?sign=ae6b53f73ba106c5be937df83b016e07&t=1542776132'></image>
  </view>
  <loading hidden="{{isLoading}}"></loading>
<scroll-view class='scroll-view' scroll-y="true">
<view class='package-item'  wx:for="{{expressLists}}" wx:key="{{item.contentId}}"
 wx:for-item="item" data-contentId='{{item.text3}}' bindtap='toDetail'>
    
     <view class='item-wrapper'> 

      <text class='item-title'>{{item.text1}}</text>
      <image class='item-img' mode='aspectFill' src='{{item.image}}'></image>
      <view class="item-block">
        <text class='item-text1'>{{item.text2}}</text>
        <text class='item-text2'>{{item.text3}}</text>
        <text class='item-text3'>{{item.text4}}</text>
      </view>
      </view>
    </view>
<view class='package-item'< span style = "max-width: 100%; clear: both; min-height: 1em'item-wrapper'>

     <text class='item-title'</text> <image class= "" style =" box-sizing: border-box! Important'item-img' mode='aspectFill' src='https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/6.jpg?sign=e713b1367255f2bd83f8098aaac630d4&t=1542776179'></image>
      <view class="item-block">
        <text class='item-text1'</text> <text class='item-text2'< span style = "max-width: 100%; clear: both; min-height: 1em'item-text3'</text> </view> </view> </view> </view> <text class='{{bottomshow== true? "bottomshow":"hide"}}' bindtap='watchMore'</text> </scroll-view> </view>Copy the code

The second page is easy to write

<view class='largecontainer'>
  <view class='container'>
    <van-search class="search-top" value="{{value}}" placeholder="Please enter the waybill number" use-action-slot bind:change="onChange" bind:search="onSearch">
      <view slot="action" bindtap="cancel"> Cancel </view> </van-search> <view class='search-middle' bindtap='selectCompany'>
      <image class='car' src='{{src}}' mode='aspectfit'></image>
      <text class='middle-text'>{{company}}</text>
    </view>
    <view class="dr">
      <image class='dr-img' src='https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/dr.jpg?sign=8fa530125c0e20b0a6f9b0a39a5afae6&t=1542885013' mode='aspectfit'></image>
    </view>
    <view class='save-list'>
      <text class='save-text'> Save to package list </text> <van-switch class='save-switch' bind:tap="onChangeswitch" checked="{{checked}}" size="110%" active-color="#4b0" inactive-color="#f44"></van-switch>
    </view>
    <view class='search-bottom' bindtap="getExpressInfo" data-number='{{no}}' data-name='{{no}}'</view> </view> <scroll-view scroll-y class='scroll-view'>
    <view class='history'>
      <view class='history-text'> {{historyOrder}}</view>
      <view class='history-item' wx:for="{{historyList}}" wx:key="{{index}}">
        <view class='item-num'>{{item.code}}</view>
        <view class='item-text'>{{item.company}}</view>
        <image class='item-image' mode='aspectFit' src='.. /.. /images/x.jpg' data-code='{{item.code}}' bindtap='delectoneHistory'></image>
      </view>
      <view class='clear-history' bindtap='onSHowdialog'>{{delectHistory}}</view>
      <wxc-dialog class="wxc-dialog" title="Confirm full clearance." bindcancel="onCancel" bindconfirm="delectHistory"></wxc-dialog>
    </view>
  </scroll-view>
</view>
Copy the code

Third main page

<view class="container flex_vert ">
  <view class="search">
    <view class='search-text'></view>
    <van-search class="van-search" value="{{ value }}" placeholder="Please enter pinyin abbreviation or Chinese" background="#ffffff" />
  </view>
  <scroll-view class='company' scroll-y bindscrolltoupper="upper" bindscrolltolower="lower" scroll-into-view="{{toView}}">
    <view class='select-list'>
      <view class='select-word' wx:for="{{scrollList}}" wx:key="{{index}}" data-index='{{index}}' data-id="{{item}}" bindtap='switchTab'>
        {{item}}
      </view>
    </view>
    <view class='item-A' id='{{item.number}}' hover-stay-time='3000' wx:for="{{comList}}" wx:key="{{index}}" wx:for-item="item" scroll-with-animation="true" scroll-animation-duration="3000">
      <text>{{item.number}}</text>
      <view class='company-item' wx:for="{{item.list}}" wx:key="{{index}}" bindtap='backwithData' data-text='{{item.text}}' data-src="{{item.pic}}">
        <image src='{{item.pic}}' class='item-image' mode='acpectFill'></image>
        <text class='item-text'>{{item.text}}</text>
        <icon>
          <image src='{{item.likepic}}' class='icon'></image>
        </icon>
      </view>
    </view>
  </scroll-view>
</view>
Copy the code

Fourth main page

<view class='container'>
  <view class='header'>
    <view class="container-header">
      <view class='left'>
        <image class='left-img1' mode='aspectFit' src='https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/d1.jpg?sign=418294a51084375aa75faf9c934a232a&t=1542776464'></image>
        <image class='left-img2' mode='aspectFit' src='https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/d2.jpg?sign=860b4b91983b5882361fd8518d4f5052&t=1542776482'></image>
        <text class='left-text'</text> </view> <view class='right'>
        <view class='right-box' bindtap='service'>
          <image src='https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/d3.jpg?sign=e0896127eca1f639dc3f987713007073&t=1542776506'></image>
          <text class='right-box_text'> </text> </view> <view class='right-box' bindtap=' complaint'>
          <image src='https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/d4.jpg?sign=88eea48517eae4dd43e484a4011db0b3&t=1542776526'></image>
          <text class='right-box_text'> </text> </view> <view class='right-box'>
          <image src='https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/d5.jpg?sign=cd8068ae4d4079e834c6cf1be6a63017&t=1542776546' class='right-box_img3'></image>
        </view>
      </view>
    </view>
  </view>
  <scroll-view scroll-y="{{true}}" class='scroll'>
    <view class="detail-container">
      <image class='errormessage' src='https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/error.jpg?sign=5e662ac9d3f2137611fbc78ed57f7d91&t=1542776565 '></image>
      <view class='talkinn'>
        <text class='inn-text'< span style = "max-width: 100%; clear: both'innbar'>
          <image src='https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/ink.jpg?sign=dcf1be9f08dc50684d63fb521fc3573a&t=1542776591' class='inn'></image>
          <view class='stars'>
            <image src='https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/star.jpg?sign=be15af8bc087f1bc75ab4e7b2eec88b3&t=1542811791' class='star'></image>
            <image src='https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/star.jpg?sign=be15af8bc087f1bc75ab4e7b2eec88b3&t=1542811791' class='star'></image>
            <image src='https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/star.jpg?sign=be15af8bc087f1bc75ab4e7b2eec88b3&t=1542811791' class='star'></image>
            <image src='https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/star.jpg?sign=be15af8bc087f1bc75ab4e7b2eec88b3&t=1542811791' class='star'></image>
            <image src='https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/star.jpg?sign=be15af8bc087f1bc75ab4e7b2eec88b3&t=1542811791' class='star'></image>
          </view>
        </view>
        <view class='inn-bottom'>
          <text class='inn-bottom_text'>{{company}}  {{code}}</text>
          <image src='https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/error.jpg?sign=ae3162eb21f9eb321f3cf443751cd5ef&t=1542776616 ' class='errormessage2'></image>
        </view>
      </view>
      <view class='detail'>
        <view class='detail-data1'>
          <view class='time'></view>
          <view class='shouicon'>
            <image class='icon' src='https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/shou.jpg?sign=2b723580f5bcd7a63fadcafca12f7fac&t=1542776646' class='icon1'></image>
          </view>
          <view class='data-msg'>
            <view class='data-msg_title'></view>
            <view class='data-msg_article'</view> </view> </view> </view> <view class='detail-data'>
          <view class='time'>{{time1}}</view>
          <view class='shouicon'>
            <image class='icon2' src='https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/shou2.jpg?sign=ab586f9e02814f37c32b3673be252728&t=1542776674 '></image>
          </view>
          <view class='data-msg'>
            <view class='data-msg_title'</view> <view class='data-msg_article'> You have finished your pickup at Cainiao Station, Building 7, South District, East China Institute of Technology. Thank you for using cainiao Station. We look forward to serving you again. </view> <text class='data-select'Word-wrap: break-word! Important; "> </text> <text class='data-select'</text> <text class='data-select'</text> </view> </view> <view class='detail-data'>
          <view class='time'>{{time2}}</view>
          <view class='shouicon'>
            <image class='icon2' src='https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/shou3.jpg?sign=0df85fc9d103f7717e2b963f2f5f7746&t=1542776695 '></image>
          </view>
          <view class='data-msg'>
            <view class='data-msg_title'</view> <view class='data-msg_article'> You have finished your pickup at Cainiao Station, Building 7, South District, East China Institute of Technology. Thank you for using cainiao Station. We look forward to serving you again. </view> </view> </view> <view class='detail-data1'>
          <view class='time'>{{time3}}</view>
          <view class='shouicon'>
            <image class='icon2' src='https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/shou4.jpg?sign=949a5b5f8436e0933e279c7dab7d99f0&t=1542776714 '></image>
          </view>
          <view class='data-msg'>
            <view class='data-msg_title'</view> <view class='data-msg_article'>{{text3}}</view>
          </view>
        </view>
        <view class='detail-data1'>
          <view class='time'>{{time3}}</view>
          <view class='shouicon'>
            <image class='icon2' src='https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/shou5.jpg?sign=bdab3c461441de6b8cea13589bb4dfc2&t=1542776737 '></image>
          </view>
          <view class='data-msg'>
            <view class='data-msg_title'</view> <view class='data-msg_article'>{{text3}}</view>
          </view>
        </view>
        <view class='detail-data2' wx:for="{{Traces2}}" wx:key="index">
          <view class='time'>{{item.AcceptTime}}</view>
          <view class='shouicon2'>
            <image class='icon2' src='https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/shou6.jpg?sign=2c10e0b37d9ac31b88a1c5d836ef7ffb&t=1542776755 '></image>
          </view>
          <view class='data-msg'>
            <view class='data-msg_title'></view>
            <view class='data-msg_article'>{{item.AcceptStation}}</view>
          </view>
        </view>
        <view class='detail-data'>
          <view class='time'>{{time3}}</view>
          <view class='shouicon3'>
            <image class='icon3' src='https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/shou7.jpg?sign=f7309cadf586fa539d3a04b77488dd97&t=1542776785 '></image>
          </view>
          <view class='data-msg'>
            <view class='data-msg_title'</view> <view class='data-msg_article'></view> </view> </view> </view> </view> </scroll-view> </view> <! -- <view id='map'> -- > <! -- <map id="myMap" markers="{{markers}}" longitude="{{lon}}" latitude="{{lat}}" scale='16'> </map> --> <! -- </view> -->Copy the code

The function of this page is to query the logistics status of the signed express, and the signed place is fixed, as well as other states such as in transit, not shipped, the tracking number expired. In order to show this effect. There are no other pages written here. The first data detail-data needs to obtain the receiving address of the user. The second data detail-data has been signed and can be used in the data sent to the request

The data source

Easy-to-mock + applets for cloud development database use

Easy-mock Enables efficient data forgery easy-mock

After registering in the above can create an interface, edit interface can add data, can get the URL of the interface, and then through the appletwx.request(url)Get the data in easy-mock, which this example uses to build the home pageexpressListsThe data of

{
"data": {
 expressList: [{
     image: "https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/yy.jpg?sign=b28732bd498113a8c88cfa634121a363&t=1542776282",
     text1: "[send years of real questions], Zhu Wei teacher recommended! New Oriental 201...",
     text2: "Signing time: 10-29 21:01",
     text3: "Best Express: 71220099817129",
     text4: "Beijing, Beijing -- Nanchang, Jiangxi",
     contentId: "001",
   },
   {
     image: "https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/lq.jpg?sign=82cc4a8eca681accf06dd4737f2422cc&t=1542776323",
     text1: "Taobao | sports basketball fingerstall iverson library...",
     text2: "Signing time: 11-10 12:20",
     text3: "Yto Express: 802511355217367857",
     text4: "Guangzhou, Guangzhou -- Nanchang, Jiangxi",
     contentId: "002",
   },
   {
     image: "https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/css.jpg?sign=324ebd7e4e3203b2071cb7e0f24a0d2e&t=1542776355",
     text1: "Tmall | CSS 3 + CSS web front-end world development...",
     text2: "Signing time: 10-17 17:11",
     text3: "Yto Express: 802022497906214489",
     text4: "Xinxiang City, Henan Province -- Nanchang, Jiangxi Province",
     contentId: "003",
   },
   {
     image: "https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/js.jpg?sign=d07ef9708724b5d20595923a16964fa8&t=1542776376",
     text1: "Taobao | second-hand package mail You don't know javaScri...",
     text2: "Signing time: 09-21 17:13",
     text3: "Yunda Express: 3956570250807",
     text4: "Luoyang, Henan -- Nanchang, Jiangxi",
     contentId: "004",}]}}Copy the code

Small program cloud development database use

Companyes: select the picture logo of the Courier company, the name of the Courier company, and the icon pictures you like to collect

Discover the information corresponding to each bill number through the interface and add it to the database. Discover the bill number as a field in each record. You can query the bill number directly.
Getdiscover: This is the collection of data in the find.

Cloud database storage Here, the project’s image resources are stored in the cloud database of the applet. Create a new file named “Images” and click upload to upload local images to the storage

The use of small program cloud development products in the database, storage management, both do not occupy local resources, but also convenient request and modification.
Cloud development for developers to provide complete cloud support, do not need to worry about back-end management, at the same time, do not need to be very busy to build the server, directly use small programs to provide cloud function API documents and small program database operation related API can achieve data add, delete, change operations, more simple than mysql database operation, This allows for rapid roll-out and iteration, and this capability is compatible, not exclusive, with the cloud services developers already use.

Interface to use

The whole query express process preview

Express bird interface first register a express bird account, choose to order logistics query free version of the application, during the need to upload ID card, but also need to fill in the technical personnel information, all write their own good, successful application, you can get their API key and user ID

sarch

After selection, save the selected express company code in the JS code of the selectCompany page. Companyname Fill the search box with the tracking number and save it with exp to obtain the two parameters of using the interface. This gives you two parameters to use the interface. For details, see the use of the express bird instant query API

You need to do the following with the Datasign portion of the requested data

Use the MD5 function in toolkit Util for encryption

(util.md5(RequestData + 'eb016c6c-ab32-47b2-be8c-8fddf3f59c1e'))

The requested data needs to be encoded with encodeURI(), which encodes a string as a URl.

Use the Base64 encoding algorithm in the Util toolkit to encode the request data into Base64 format. Base64 is a popular encoding method today because it is fast and simple to encode. Advantages: Base64 is especially suitable for fast data transmission over HTTP.

Finally, the data content signature is encodeURI encoded, and the request data is ready

The address of the request, the data, and the format of the request header are all given in the following code

var util = require('.. /.. /utils/util.js')
const db = wx.cloud.database()
const expresses = db.collection('expresses')
const app = getApp()
getExpressInfo:function(nu,cb){// Check logistics // express company and express tracking numberlet companyname=wx.getStorageSync("codename") | |"YTO";
    let company = wx.getStorageSync("company") | |Yto Express;
   console.log(companyname);
     letexp=nu.currentTarget.dataset.name var logistics = [companyname,exp]; This.setdata ({ShipperCode: Logistics [0], LogisticCode: Logistics [1]}) var RequestData ="{'OrderCode':'','ShipperCode':'" + logistics[0] + "','LogisticCode':'" + logistics[1] + "'}"// UTF-8 data content // OrderCode String Order number O // ShipperCode String Express company number R // LogisticCode String Logistics order number console.log(RequestData) var RequestDatautf = encodeURI(RequestData) console.log("RequestDatautf:"+ RequestDatautf) // Sign console.log(RequestData +'eb016c6c-ab32-47b2-be8c-8fddf3f59c1e')
    var DataSign = encodeURI(util.Base64((util.md5(RequestData + 'eb016c6c-ab32-47b2-be8c-8fddf3f59c1e'))))
    console.log("DataSign:" + DataSign)
    if(logistics ! = null&&exp>999) { wx.request({ url:'https://api.kdniao.com/Ebusiness/EbusinessOrderHandle.aspx', data: {// Data content (urL-encoded)'RequestData': RequestDatautf, // e-commerce ID'EBusinessID': '1399017'// Request instruction type: 1002'RequestType': '1002'// Data content signature MD5 encryption (request content (unencoded) +ApiKey), then Base64 encoding, and finally URL (UTF-8) encoding'DataSign': DataSign, // request, return data type: 2-json;'DataType': '2',
        },
        header: {
          'content-type': 'application/json'
        },
        success:(res)=> {
          console.log(res)
          let list = wx.getStorageSync("historys") | | []; var item = { company: company, code: logistics[1] }if (list==null||list.length=== 0||list.every(res => {  returnres.code! ==logistics[1] })) { list.push(item); } wx.setStorage({ key:'historys',
            data: list,
          })
          this.setData({
            historyList: list
          })
          this.setData({
            delectHistory: "Clear historical record.".historyOrder: "Historical record"
          })
          // this.setData({ mydata: res.data})
          expresses.where({
            code:exp
          }).count().then(res3=>{
            if (res3.total == 0){
              expresses.add({
                data: {
                  message: res.data,
                  code: exp
                }
              })
            } else {
              // wx.showToast({
              //   // title: 'Cannot be added twice'
              // })
            }
          })
         .then(res2 => {
           if(res.data.State>1) {
             wx.navigateTo({
               url: '.. /Todetail/index',
             })
           }
           wx.setStorage({
             key: 'code',
             data: exp,
           }),
             wx.setStorage({
               key: 'nowcompany',
               data: logistics[0],
             })
            
          })
        }
      })
    }
  },
Copy the code

Res.data is printed after the data request is successful

It’s all about the idea of small program MVVM

Vm-viewmodel data binding to the interface view Model layer -> template {{}}

It is displayed in history. In case the first time you can’t get the historys record from storage, it is better to write this waylet list = wx.getStorageSync("historys")||[];, if the arraylistIf it is empty or the tracking number that is being queried does not exist, add it. Otherwise, do not add it and store itthis.setData({historyList: list})The page is re-rendered and displayed
Store the express information corresponding to the current express tracking number in the cloud database
The logistics details page is displayed.
The final effect of using the Tencent map interface is shown below

Tencent map open product platform

The logic of this page is for Courier number and company code, there are four types of two kinds of interface effect, not a query to display an interface effect, this very simple effect is the same, from the query to the home page, a search query to historical record, click on the query to display another interface state, this belongs to all roads lead to Rome, are obtained in the onLoad function.

 onLoad(options) {
    let company = wx.getStorageSync("company");
    this.setData({
      company
    })
    let codeExpress=options.contentId
    // console.log(codeExpress);
    this.getLocation()
    if(! codeExpress){let code = wx.getStorageSync("code")
      console.log(code);
      this.setData({
        code,
      })
    }else{
      var  Navcode = codeExpress.substr(5);
      letCompany = codeExpress. Substr (0, 4); console.log(company); this.setData({ code:Navcode, company:company }) console.log(Navcode); }let code=this.data.code;
   
    expresses.where({
      code:code
    }).get().then(res=>{
      this.setData({
      tracesList:res.data,
      Traces:res.data[0].message.Traces
      })
      console.log(res.data);
      letTraces=this.data.Traces; this.showdetail(); this.packageData(Traces); })},Copy the code

Components use

Use the dialog box component here. Click clear History to trigger the dialog box.

Click the dialog box ok, all clear history
Click the dialog box to cancel, hide the dialog box, not clear history

The component Components use was first introduced in index.json

{
     "wxc-dialog": "/components/dialog/dialog"
}
Copy the code

Corresponds to the code used in search.wxml
WXML introduces the Dialog component from Components, dialog

<view class='clear-history' bindtap='onSHowdialog'>{{delectHistory}}</view>
     <wxc-dialog class="wxc-dialog" title="Confirm full clearance."bindcancel="onCancel" bindconfirm="delectHistory"></wxc-dialog>
</view> 
Copy the code

The js component is written like this

onGotUserInfo(e) {
      this.triggerEvent('confirm', e) // pass out}Copy the code

The ok button in the component calls the component’s ownonGotUserInfomethods

<button class="getUserInfo_btn" open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="onGotUserInfo"> confirm < / button >Copy the code

Click OK to trigger the bindConfirm =”delectHistory” event on the search.js page, clear the history and display the page. The page can pass props data to the component, so that the component can communicate with the calling part of the page.

Optimization of request encapsulation

Encapsulated in the util package, using promise to return a promise object, which can then be used to generalize wx.request encapsulation

const $get= (url, data = {}) => {// Send requestreturn new Promise((resolve, reject) => {
    wx.request({
      url: url,
      data: data,
      method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT // header: {},function (res) {
        resolve(res)
      },
      fail: function () {
        reject()
      },
      complete: function () {
      }
    })
  })
}
module.exports = {
  $get,}Copy the code

The data in the request easy-mock in the home page uses the encapsulation of request in the util class, which can be called multiple times and repeatedly, realizing the reuse of the code. The getList() function is used to get data

getList(type) {
    this.setData({
    isLoading: true,
      hasMore: true
    })
    type= = ='down' ? this.setData({ page: 0 }) : null;
    util.$get('https://www.easy-mock.com/mock/5bca919de6742c1bf8220b50/example/express#! method=get', ).then(res => {
      if (res.statusCode == 200) {
        this.processData(type, res.data.data.expressList)
      }
    }).catch(e => {
      this.setData({
        isLoading: true,
        hasMore: false}) wx.stopPullDownRefresh() wx.showtoast ({title: 'Network error! `, duration: 1000, icon:"none"})})},Copy the code

When the page request data to two pages, appear to view all click to jump to another page

Look at all

bottomshow
true

<text class='{{bottomshow== true? "bottomshow":"hide"}}' bindtap='watchMore'</text>Copy the code

onReachBottom() {
    if(! This.data.isloading) {// Prevent loading before data is returnedreturn;
    }
    if(this.data.page<=3){
      this.getList('up')}else{
      wx.stopPullDownRefresh()
      this.setData({
        bottomshow:true})}Copy the code

Style hide pairs the codeCopy the code

    .hide{
    display: none;
   }
Copy the code

Clever use of toView

Results the preview
Selectcompany.wxml, which loops the companyList, prints the list items in uppercase letters A,B,C… , and the inner loop of the item, which loops through the list of companies starting with that capital letter for each capital letter,scroll-viewEvery dynamic settingid='{{item.number}}'Set up thescroll-into-view="{{toView}}"When clicking on the sidebar of A, B, C, D… Z when triggeredbindtap='switchTab'Set the correspondingtoView.
There is A strange point here, that is, the letter I does not appear in the list of companies with that letter, the original rookie wrapped click back to A, I think the user will either not click, or click on A nearby accidentally wrong. When I hit I,scroll-into-viewGo to the nearby switchTab and add a judgment condition.

switchTab(e){
 if (e.currentTarget.dataset.id=="I"){
      this.setData({
        curIndex: e.currentTarget.dataset.index,
        toView: "F",
      })

    }
    console.log(e);
    this.setData({
      curIndex:e.currentTarget.dataset.index,
      toView: e.currentTarget.dataset.id,
    })
  },
Copy the code

The whole scroll view code

 <scroll-view class='company' scroll-y bindscrolltoupper="upper" bindscrolltolower="lower" scroll-into-view="{{toView}}">
    <view class='select-list'>
      <view class='select-word' wx:for="{{scrollList}}" wx:key="{{index}}" data-index='{{index}}' data-id="{{item}}" bindtap='switchTab'>
        {{item}}
      </view>
    </view>
    <view class='item-A' id='{{item.number}}' hover-stay-time='3000' wx:for="{{comList}}" wx:key="{{index}}" wx:for-item="item" scroll-with-animation="true" scroll-animation-duration="3000">
      <text>{{item.number}}</text>
      <view class='company-item' wx:for="{{item.list}}" wx:key="{{index}}" bindtap='backwithData' data-text='{{item.text}}' data-src="{{item.pic}}">
        <image src='{{item.pic}}' class='item-image' mode='acpectFill'></image>
        <text class='item-text'>{{item.text}}</text>
        <icon>
          <image src='{{item.likepic}}' class='icon'></image>
        </icon>
      </view>
    </view>
  </scroll-view>
Copy the code

Click trigger when a line is selected on the previous pagebindtap='backwithData'Wx. navigatBack() change the data in the last page, store the company logo, company text, company code Storage, the last page to get data display. The following code

var pages = getCurrentPages(); var Page = pages[pages.length - 1]; Var prevPage = pages[page.length-2]; Wx. NavigateBack ({}) {prevPage.setData({SRC,company})}Copy the code

Function USES the clouds here USES a function, query the database collection of eligible list item and delete, cloud function is higher authority, directly modify database of cloud and cloud console with permissions management side, have all permissions, but the number of cloud function a bit is not very good every change will upload the deployment. Future project updates will continue to use cloud functions to solve the problem.

Only the main commonly used express logistics queries are written here, as shown in the figure below. For the processing of the data acquired later, I first use packageData() to process the single data or list required by the page and store and display it.

conclusion

Summarize is by Courier company name to find the corresponding coding, Courier number from user input or home page click event, and then request the query, the last page is displayed as a result, there is no complete path tagging task, due to large projects, just do the main part of the right, about components encapsulation, method calls and, The effect display should have more exciting effects, the project to play here, then slowly learn, slowly supplement. Thank you for reading this article. Please feel free to comment on any mistakes or inaccuracies. Your praise and affirmation will become a ray of sunshine on my code road, making me more brave and firm to go forward.

The project address is attached

Project Preview

Page deconstruction

The data source

Interface to use

You need to do the following with the Datasign portion of the requested data

Components use

Optimization of request encapsulation

Clever use of toView

conclusion

Related Posts

Fastmock supports data return in different formats

How to build code global retrieval system from 0 to 1

Based on vuE-CLI3 SSR program to achieve hot update function