当前位置: 首页 > Web前端 > vue.js

mpvue实现微信小程序快递单号查询

时间:2023-03-31 19:21:37 vue.js

mpvue刚出来的时候确实很火,但是目前好像没人维护,官方文档也不好找。只能通过各个论坛大佬总结的文章来学习演示express100的接口使用https://m.kuaidi100.com而mpvue也完全遵循原生微信小程序的语法,所以接口只允许https.~~~~**在app.vue主文件中定义一个globalData,并初始化一个订单集合globalData:{~~~~orderInfo:[]}我的页面过程中踩了一个大坑导入主文件的全局数据需要和vue项目一样import{app,globalData}from"../../app.vue";两个简单的输入框~~和绑定的输入事件~~mpvue也完全支持v-model~~~~查询按钮~~~~`查询`在methodsmethods里写对应的方法:{//上面的方法~~~~bindChange:function(e){console.log(e);变量标识;变量值;编号=e。当前目标.id;value=e.mp.detail.value+'';this.inputCon[id]=值;},搜索:function(){varthat=this;vartype=that.inputCon.company;varpostid=that.inputCon.orderId;vardata={'type':type,'postid':postid}console.log(this.globalData.queryInfo);控制台日志(数据);this.globalData.queryInfo=数据;控制台日志(应用程序);wx.request({url:'https://m.kuaidi100.com/query',data:data,header:{'content-type':'application/json'},success:(res)=>{varerrTip=res.data.message;varorderInfo=res.data.data;console.log(orderInfo);if(orderInfo.length==0){console.log(errTip)//that.setData({//errTip:errTip//})this.errTip=errTipreturn}//that.setData({//errTip:''//})this.errTip=""this.globalData.orderInfo=orderInfo;console.log(this.globalData.orderInfo)wx.navigateTo({url:'../order/main'});wx.setNavigationBarTitle({title:data.postid});}})}}点击查询按钮跳转到订单详情页面订单页面内容这样就可以了,当然功能不是很人性化,因为要用拼音输入快递名称,就是完全依赖原有接口。以后会考虑怎么优化