mpvue實(shí)現(xiàn)微信小程序快遞單號(hào)查詢代碼
mpvue是什么?
mpvue 是一套定位于開(kāi)發(fā)小程序的前端開(kāi)發(fā)框架,其核心目標(biāo)是提高開(kāi)發(fā)效率,增強(qiáng)開(kāi)發(fā)體驗(yàn)。使用該框架,開(kāi)發(fā)者只需初步了解小程序開(kāi)發(fā)規(guī)范、熟悉 Vue.js 基本語(yǔ)法即可上手??蚣芴峁┝送暾?Vue.js 開(kāi)發(fā)體驗(yàn),開(kāi)發(fā)者編寫(xiě) Vue.js 代碼,mpvue 將其解析轉(zhuǎn)換為小程序并確保其正確運(yùn)行。此外,框架還通過(guò) vue-cli 工具向開(kāi)發(fā)者提供 quick start 示例代碼,開(kāi)發(fā)者只需執(zhí)行一條簡(jiǎn)單命令,即可獲得可運(yùn)行的項(xiàng)目。
mpvue簡(jiǎn)介點(diǎn)擊查看:http://mpvue.com/
mpvue剛出來(lái)的時(shí)候確實(shí)很火,但目前好像沒(méi)有維護(hù),不是很好找官方的文檔,只能通過(guò)各大論壇的大佬們總結(jié)的文章去研究和論證
使用快遞100的接口 https://m.kuaidi100.com ,mpvue也是完全遵循原生微信小程序的語(yǔ)法,所以接口只允許https.~~~~
**在app.vue主文件里面定義一個(gè) globalData
并初始化一個(gè)訂單集合
globalData: {~~~~ orderInfo: [] }
**
mine頁(yè)面
在此過(guò)程中我踩了一個(gè)大坑
引入主文件的全局?jǐn)?shù)據(jù)需要和vue項(xiàng)目一樣
import {app,globalData} from "../../app.vue"; ~~~~
兩個(gè)簡(jiǎn)單輸入框~~以及綁定了輸入事件~~ mpvue也是完全支持v-model的~~~~
<view class="section"> <input class="order-input" placeholder="請(qǐng)輸入訂單號(hào)" @change="bindChange" v-model="value" id="orderId" /> <input class="order-input" placeholder="請(qǐng)輸入快遞公司拼音如shunfeng" @change="bindChange" v-model="value" id="company" /> </view>
查詢按鈕~~~~
<button class="query-btn" size="default" type="primary" loading="" @click="search"> 查詢 </button>
在methods里面寫(xiě)入相應(yīng)的方法
methods:{ //上面的方法~~~~ 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 }); } }) } }
點(diǎn)擊查詢按鈕后跳訂單詳情頁(yè)面~~~~
order頁(yè)面內(nèi)容
~~
<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) { 拿訂購(gòu)信息并渲染 console.log(options); console.log(this.globalData.orderInfo) var orderInfo = this.globalData.orderInfo; this.orders=orderInfo } }; </script> <style> </style>
就這樣ok了,當(dāng)然功能還不是很人性化,因?yàn)檩斎肟爝f名稱需要使用拼音,完全依賴于原接口,后面想著如何優(yōu)化一下
總結(jié)
到此這篇關(guān)于mpvue實(shí)現(xiàn)微信小程序快遞單號(hào)查詢的文章就介紹到這了,更多相關(guān)mpvue微信小程序單號(hào)查詢內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript精煉之構(gòu)造函數(shù) Constructor及Constructor屬性詳解
對(duì)象的constructor屬性用于返回創(chuàng)建該對(duì)象的函數(shù),也就是我們常說(shuō)的構(gòu)造函數(shù),除了創(chuàng)建對(duì)象,構(gòu)造函數(shù)(constructor) 還做了另一件有用的事情—自動(dòng)為創(chuàng)建的新對(duì)象設(shè)置了原型對(duì)象(prototype object)2015-11-11js中promise如何取到[[PromiseResult]]問(wèn)題
這篇文章主要介紹了js中promise如何取到[[PromiseResult]]問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-05-05

javascript獲取文檔坐標(biāo)和視口坐標(biāo)

js 字?jǐn)?shù)統(tǒng)計(jì),區(qū)分英漢

JS定時(shí)器使用,定時(shí)定點(diǎn),固定時(shí)刻,循環(huán)執(zhí)行詳解

javascript html實(shí)現(xiàn)網(wǎng)頁(yè)版日歷代碼