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

