微信小程序如何用mpvue实现快递单号查询功能？

本文共计583个文字，预计阅读时间需要3分钟。

mpvue 是什么？

mpvue 是一套定位在开发微信小程序的前端框架，其核心目标是提高开发效率，增强开发体验。使用 mpvue，开发者只需掌握 Vue.js 的基本语法和规范，就能快速上手小程序开发。

mpvue是什么？

mpvue 是一套定位于开发小程序的前端开发框架，其核心目标是提高开发效率，增强开发体验。使用该框架，开发者只需初步了解小程序开发规范、熟悉 Vue.js 基本语法即可上手。框架提供了完整的 Vue.js 开发体验，开发者编写 Vue.js 代码，mpvue 将其解析转换为小程序并确保其正确运行。此外，框架还通过 vue-cli 工具向开发者提供 quick start 示例代码，开发者只需执行一条简单命令，即可获得可运行的项目。

mpvue简介点击查看：mpvue.com/

mpvue刚出来的时候确实很火,但目前好像没有维护,不是很好找官方的文档,只能通过各大论坛的大佬们总结的文章去研究和论证

使用快递100的接口 m.kuaidi100.com ,mpvue也是完全遵循原生微信小程序的语法,所以接口只允许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 }); } }) } }

点击查询按钮后跳订单详情页面~~~~
order页面内容
~~

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

就这样ok了,当然功能还不是很人性化,因为输入快递名称需要使用拼音,完全依赖于原接口,后面想着如何优化一下

总结

到此这篇关于mpvue实现微信小程序快递单号查询的文章就介绍到这了,更多相关mpvue微信小程序单号查询内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！