微信小程序开发案例《 1. 快递查询 》

Step1：
准备快递查询的API ：推荐百度APIStore



Step2 ：
准备一个快递运单号：
Step3 ：

新建项目：快递查询（略...）
注意：修改 "navigationBarTitleText": "快递查询",
Step4 ：
需求分析：

一个输入搜索框，默认提示为灰色字体“请输入运单号”,大小固定；
一个查询按钮 ：查询
查询显示页面，需要可以滑动显示
Step5：
参照官方小程序开发文档，按需求编程:
(1) . 一个输入搜索框，默认提示为灰色字体“请输入运单号”,大小固定；
绑定输入

<!--index.wxml-->

<view class="container">
<input placeholder-style="color:gray" placeholder="请输入运单号" bindinput='input'/>
</view>

/**index.wxss**/

input{
border: 1px solid gray;
width: 90%;
margin: 5%;
padding: 5px;
}

(2) 一个查询按钮 ：查询
定义按钮，绑定事件<!--index.wxml-->

<button type="primary" bindtap="btnClick">查询</button>

发起请求：<!--app.js-->

getExpressInfo:function(nu,cb){
wx.request({
url: 'http://apis.baidu.com/kuaidicom/express_api/express_api?multi=0&order=desc&nu='+nu, //仅为示例，并非真实的接口地址
data: {
x: '',
y: ''
},
header: {
'apikey': '92d3295fd4ced25733e836cb3086fd34'
},
success: function (res) {
console.log(res.data)
}
})
},

事件处理：
<!--index.js-->

//获取应用实例
const app = getApp()

Page({
data: {
motto: 'Hello World',
userInfo: {},
hasUserInfo: false,
expressNu:null,
expressInfo:null,
canIUse: wx.canIUse('button.open-type.getUserInfo')
},
//事件处理函数
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
},
btnClick : function(){
//console.log(this.data.expressNu)
var thispage = this;
app.getExpressInfo('this.data.expressNu',function(data){

f423
thispage.setData({expressInfo:data})
})
},
input :function(e){   #绑定输入
console.log(e)
this.setData({expressNu:e.detail.value})
},
onLoad: function () {
if (app.globalData.userInfo) {
this.setData({
userInfo: app.globalData.userInfo,
hasUserInfo: true
})
} else if (this.data.canIUse){
// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
app.userInfoReadyCallback = res => {
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
} else {
// 在没有 open-type=getUserInfo 版本的兼容处理
wx.getUserInfo({
success: res => {
app.globalData.userInfo = res.userInfo
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
})
}
},
getUserInfo: function(e) {
console.log(e)
app.globalData.userInfo = e.detail.userInfo
this.setData({
userInfo: e.detail.userInfo,
hasUserInfo: true
})
}
})

滚动显示：<!--index.wxml-->

<scroll-view scroll-y style="height: 200px;" >
<view wx:for="{{expressInfo.data}}">
{{item.context}}【 {{item.time}}】
</view>
</scroll-view>

练习代码：