前言
根據(jù)微信公眾平臺(tái)提供的官方文檔小程序注冊(cè)和開發(fā)者工具的使用仇箱，可以注冊(cè)微信公眾平臺(tái)，快速創(chuàng)建項(xiàng)目东羹。文檔很詳細(xì)剂桥，在此就略過項(xiàng)目創(chuàng)建部分啦~
剛?cè)腴T小程序，本項(xiàng)目是學(xué)習(xí)階段寫的小demo属提。GitHub項(xiàng)目地址
小程序的功能是：輸入快遞公司和單號(hào)权逗，查詢物流信息。涉及到一些小程序提供的表單組件冤议，主要是為了學(xué)習(xí)網(wǎng)絡(luò)請(qǐng)求接口的使用斟薇。
最終效果如下：查詢主頁面和查詢結(jié)果詳情頁
主頁面
詳情頁
目錄結(jié)構(gòu)
采用開發(fā)者工具提供的“建立普通快速啟動(dòng)模板”新建項(xiàng)目。
- index為輸入查詢信息的主頁面
- detail為顯示查詢結(jié)果詳情頁
目錄結(jié)構(gòu)
一恕酸、 查詢主頁面
包括快遞公司選擇奔垦、快遞單號(hào)和查詢?nèi)糠?/p>
主頁面未輸入信息時(shí)
主頁面輸入信息時(shí)
1.快遞公司選擇
快遞公司選擇框
快遞公司完成
使用微信小程序-表單組件-picker，實(shí)現(xiàn)從底部彈起的滾動(dòng)選擇器尸疆，選擇不同快遞公司椿猎。
參考資料：微信小程序官方文檔picker介紹
結(jié)構(gòu)(index.wxml)
<!--index.wxml-->
<view class="company">
<view class="title">快遞公司：</view>
<picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}" range-key="name">
<view class="picker" style="line-height: 50px;height: 50px;background: #fff;padding-left: 20px;font-size:18px;">
當(dāng)前選擇：{{array[index]['name']}}
</view>
</picker>
</view>
- picker的range屬性指定數(shù)組array（該數(shù)組為快遞公司信息，在index.js中定義）
- 當(dāng) range 是一個(gè) Object Array 時(shí)寿弱，通過picker的range-key屬性犯眠，指定 Object 中 key 的值作為選擇器顯示內(nèi)容（在本例中name用于存儲(chǔ)快遞公司名字，在index.js中定義）
- value屬性中index無需在index.js中定義症革，表示選擇了range對(duì)應(yīng)項(xiàng)的第幾個(gè)筐咧，也就是range指定數(shù)組的下標(biāo)（從0開始）
- bindchange用于綁定事件，bindPickerChange為事件處理函數(shù)噪矛，在index.js中定義
js(index.js)
//index.js
data: {
array: [
{
'id':'yunda',
'name':'韻達(dá)'
},
{
'id':'shentong',
'name':'申通'
},
{
'id':'ems',
'name':'EMS'
},
{
'id':'shunfeng',
'name':'順豐'
},
{
'id':'zhongtong',
'name':'中通'
}
],
compangy_id:''
},
// 事件處理函數(shù)：公司選擇
bindPickerChange: function(e) {
//獲取當(dāng)前用戶選擇項(xiàng)量蕊，對(duì)應(yīng)數(shù)組下標(biāo)
const val = e.detail.value;
this.setData({
index: val,
compangy_id:this.data.array[val]['id']
});
},
- 在data中注冊(cè)結(jié)構(gòu)中用到的數(shù)據(jù)，快遞公司信息數(shù)組array艇挨，定義compangy_id
- bindPickerChange事件處理函數(shù)通過setData更新數(shù)據(jù)残炮，包括當(dāng)前用戶選擇項(xiàng)的對(duì)應(yīng)數(shù)組下標(biāo)index，compangy_id存儲(chǔ)該項(xiàng)對(duì)應(yīng)array中的id字段缩滨。（這個(gè)信息用于查詢接口使用势就，在查詢部分再詳細(xì)說明）
2.快遞單號(hào)
單號(hào)輸入數(shù)字鍵盤
使用微信小程序-表單組件-input,用于輸入快遞單號(hào)泉瞻。
參考資料：微信小程序官方文檔input介紹
結(jié)構(gòu)(index.wxml)
<!--index.wxml-->
<view class="caseid">
<view class="title">快遞單號(hào)：</view>
<input type="number" placeholder="請(qǐng)輸入快遞單號(hào)" bindinput="bindKeyInput" style="line-height: 50px;height: 50px;background: #fff;padding-left: 20px;font-size:18px;"/>
</view>
- type屬性定義為number，可以空時(shí)顯示數(shù)字輸入鍵盤
- bindKeyInput事件處理函數(shù)用于獲取用戶輸入的單號(hào)苞冯，在index.js中定義
js(index.js)
// 輸入單號(hào)
bindKeyInput: function (e) {
this.setData({
inputValue: e.detail.value
})
},
inputVaue同樣需要在data中注冊(cè)（與存儲(chǔ)快遞公司用到變量compangy_id類似）袖牙，用該變量存儲(chǔ)用戶輸入的表單信息
3.查詢按鈕
使用微信小程序-表單組件-button。
參考資料：微信小程序官方文檔button介紹
結(jié)構(gòu)(index.wxml)
<button type="primary" size="{{primarySize}}"
bindtap="bindquery" style="margin-top:20px;"> 查詢 </button>
- type="primary"用于定義按鈕樣式類型舅锄，組件提供幾種樣式可供選擇
- size用于定義按鈕大小鞭达，有效值為default和mini,默認(rèn)為default
- bindquery綁定查詢事件
js(index.js)
// 點(diǎn)擊查詢
bindquery:function (e) {
var data={
'type':this.data.compangy_id,
'postid':this.data.inputValue
};
wx.navigateTo({
url: '../../pages/detail/detail?type='+data.type+'&postid='+data.postid
})
}
這里用到了一個(gè)公開的物流接口：
http://www.kuaidi100.com/query?type=快遞公司代號(hào)&postid=快遞單號(hào)
ps 快遞公司代號(hào):
申通=”shentong” EMS=”ems” 順豐=”shunfeng” 圓通=”yuantong” 中通=”zhongtong” 韻達(dá)=”yunda” 天天=”tiantian” 匯通=”huitongkuaidi” 全峰=”quanfengkuaidi” 德邦=”debangwuliu” 宅急送=”zhaijisong”
參考資料： 各種JSON API免費(fèi)接口
- 通過上述快遞公司和快遞單號(hào)部分，可以獲取接口需要的type和postid
- wx.navigateTo是官方提供的API皇忿，保留當(dāng)前頁面碉怔，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁面，使用wx.navigateBack可以返回到原頁面禁添。這里用于跳轉(zhuǎn)到快遞信息展示詳情頁detail,并將查詢快遞信息所需的參數(shù)傳遞到詳情頁撮胧。
參考資料： 微信小程序wx.navigateTo的API文檔
二、 快遞信息詳情頁
查詢成功和失敗時(shí)效果如下：
查詢成功詳情頁
查詢失敗詳情頁
結(jié)構(gòu)(detail.wxml)
<!--detail.wxml-->
<view class="container">
<!--快遞信息模板 begin-->
<template name="items">
<view class="row">
<view class="time">
{{time}}
</view>
<view class="icon"></view>
<view class="infos">
{{context}}
</view>
</view>
</template>
<!--快遞信息模板 end-->
<!--查詢成功時(shí) begin-->
<view wx:if="{{haslist}}">
<!--循環(huán)輸出列表 begin-->
<view class="mainline"></view>
<block wx:for="{{list}}" wx:key="*this" class="scroll-view-item bc_green">
<template is="items" data="{{...item}}" />
</block>
<!--循環(huán)輸出列表 end-->
</view>
<!--查詢成功時(shí) end-->
<!--查詢失敗時(shí)-->
<view wx:else style="padding: 20px;">{{errmsg}}</view>
</view>
- 快遞信息模板老翘，為一條快遞信息的模板芹啥，包括時(shí)間和快遞詳情
- wx:if和wx:for控制循環(huán)輸出信息
- 其中在列表循環(huán)是，如不提供 wx:key铺峭，會(huì)報(bào)一個(gè) warning墓怀， 如果明確知道該列表是靜態(tài)，或者不必關(guān)注其順序卫键，可以選擇忽略傀履。詳細(xì)使用見如下參考資料的wx:for
參考資料：
js(detail.js)
data: {
list:[],
haslist:false,
errmsg:''
},
//事件處理函數(shù)
onLoad:function (options) {
var that = this;
wx.request( {
url: 'https://www.kuaidi100.com/query',
data: options,
header: {
'Content-Type': 'application/json'
},
success: function( res ) {
// console.log( res.data );
var msg=res.data.message;
var data=res.data.data;
if(msg==="ok"){
that.setData({
list: data,
haslist:true
});
// console.log(that.data.list);
}else{
that.setData({
errmsg:'請(qǐng)正確輸入快遞公司和單號(hào)'
});
}
}
})
}
- data中l(wèi)ist用于存儲(chǔ)快遞信息數(shù)據(jù)，haslist用于結(jié)構(gòu)用中wx:if的控制莉炉，errmsg為查詢失敗時(shí)顯示的信息钓账。
- 在主頁面查詢按鈕的點(diǎn)擊事件中采用了wx.navigateTo傳遞快遞查詢的參數(shù)。（物流接口：http://www.kuaidi100.com/query?type=快遞公司代號(hào)&postid=快遞單號(hào)）絮宁。 在詳情頁面中梆暮，只需在onLoad(生命周期函數(shù)--監(jiān)聽頁面加載)中用options接受參數(shù)即可。
- 用wx.request發(fā)起網(wǎng)絡(luò)請(qǐng)求绍昂。
參考資料：微信小程序官方文檔wx.request發(fā)起網(wǎng)絡(luò)請(qǐng)求
- 注意： 在創(chuàng)建項(xiàng)目時(shí)啦粹，填寫了AppID,發(fā)起網(wǎng)絡(luò)請(qǐng)求需要在開發(fā)設(shè)置中配置服務(wù)器域名，如下圖所示窘游。
-
開發(fā)者工具-創(chuàng)建小程序
i微信公眾平臺(tái)-設(shè)置
