MPVUE was very popular when it first came out, but it seems that there is no maintenance at present. It is not very easy to find official documents. It can only be studied and demonstrated through the articles summarized by the big bosses in various forums Interface using the express 100 https://m.kuaidi100.com, mpvue is completely follow native WeChat small the grammar of the program, so the interface allows only HTTPS. ~ ~ ~ ~ * * in the app. The vue master file defined inside a globalData and initialize a set order

 globalData: {~~~~
    orderInfo: []
  }

Mime page

Import {app,globalData} from “.. “import {app,globalData} from “..” /.. /app.vue”;

~~~~ <view class="section"> <input class="order-input" placeholder=" Please input the order number" @change="bindChange" v-model="value" id="orderId" /> <input class="order-input" placeholder=" shunfeng" @change="bindChange" v-model="value" id="company" /> </view> query button ~~~~ '<button class="query-btn" size="default" Type ="primary" loading=" @click="search"> </button> '

Write the corresponding method inside methods

Methods :{// above ~~~~ bindChange: function (e) {console.log(e); var id; var value; id = e.currentTarget.id; value = e.mp.detail.value + ''; this.inputCon[id] = value; }, search: function () { var that = this; var type = that.inputCon.company; var postid = that.inputCon.orderId; var data = { 'type':type, 'postid':postid } console.log(this.globalData.queryInfo); console.log(data); this.globalData.queryInfo=data; console.log(app); wx.request({ url: 'https://m.kuaidi100.com/query', data: data, header: { 'content-type': 'application/json' }, success: (res)=> { var errTip = res.data.message; var orderInfo = res.data.data; console.log(orderInfo); if(orderInfo.length == 0) { console.log(errTip) // that.setData({ // errTip:errTip // }) this.errTip=errTip return } // that.setData({ // errTip:'' // }) this.errTip="" this.globalData.orderInfo = orderInfo; console.log( this.globalData.orderInfo) wx.navigateTo({ url: '.. /order/main' }); wx.setNavigationBarTitle({ title: data.postid }); }}}})

Click the query button to jump to the order details page

Order page content

<template> <view class="order-list"> <block v-for="(item,index) in orders" :key="index"> <view class="order-time">{{item.ftime}}:</view> <view class="order-txt">{{item.context}}</view> </block> </view> </template> <script> export default {data(){return{orders:[]}}, onLoad: function(options) {Console.log (options); console.log(this.globalData.orderInfo) var orderInfo = this.globalData.orderInfo; this.orders=orderInfo } }; </script> <style> </style>

So OK, of course, the function is not very human, because the express name needs to use Pinyin input, completely dependent on the original interface, thinking about how to optimize the back