前言
根据微信公众平台提供的官方文档小程序注册和开发者工具的使用，可以注册微信公众平台，快速创建项目。文档很详细，在此就略过项目创建部分啦~
刚入门小程序，本项目是学习阶段写的小demo。GitHub项目地址
小程序的功能是：输入快递公司和单号，查询物流信息。涉及到一些小程序提供的表单组件，主要是为了学习网络请求接口的使用。
最终效果如下：查询主页面和查询结果详情页
主页面
详情页
目录结构
采用开发者工具提供的“建立普通快速启动模板”新建项目。
- index为输入查询信息的主页面
- detail为显示查询结果详情页
目录结构
一、 查询主页面
包括快递公司选择、快递单号和查询三部分
主页面未输入信息时
主页面输入信息时
1.快递公司选择
快递公司选择框
快递公司完成
使用微信小程序-表单组件-picker，实现从底部弹起的滚动选择器，选择不同快递公司。
参考资料：微信小程序官方文档picker介绍
结构(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;">
当前选择：{{array[index]['name']}}
</view>
</picker>
</view>
- picker的range属性指定数组array（该数组为快递公司信息，在index.js中定义）
- 当 range 是一个 Object Array 时，通过picker的range-key属性，指定 Object 中 key 的值作为选择器显示内容（在本例中name用于存储快递公司名字，在index.js中定义）
- value属性中index无需在index.js中定义，表示选择了range对应项的第几个，也就是range指定数组的下标（从0开始）
- bindchange用于绑定事件，bindPickerChange为事件处理函数，在index.js中定义
js(index.js)
//index.js
data: {
array: [
{
'id':'yunda',
'name':'韵达'
},
{
'id':'shentong',
'name':'申通'
},
{
'id':'ems',
'name':'EMS'
},
{
'id':'shunfeng',
'name':'顺丰'
},
{
'id':'zhongtong',
'name':'中通'
}
],
compangy_id:''
},
// 事件处理函数：公司选择
bindPickerChange: function(e) {
//获取当前用户选择项，对应数组下标
const val = e.detail.value;
this.setData({
index: val,
compangy_id:this.data.array[val]['id']
});
},
- 在data中注册结构中用到的数据，快递公司信息数组array，定义compangy_id
- bindPickerChange事件处理函数通过setData更新数据，包括当前用户选择项的对应数组下标index，compangy_id存储该项对应array中的id字段。（这个信息用于查询接口使用，在查询部分再详细说明）
2.快递单号
单号输入数字键盘
使用微信小程序-表单组件-input,用于输入快递单号。
参考资料：微信小程序官方文档input介绍
结构(index.wxml)
<!--index.wxml-->
<view class="caseid">
<view class="title">快递单号：</view>
<input type="number" placeholder="请输入快递单号" bindinput="bindKeyInput" style="line-height: 50px;height: 50px;background: #fff;padding-left: 20px;font-size:18px;"/>
</view>
- type属性定义为number，可以空时显示数字输入键盘
- bindKeyInput事件处理函数用于获取用户输入的单号，在index.js中定义
js(index.js)
// 输入单号
bindKeyInput: function (e) {
this.setData({
inputValue: e.detail.value
})
},
inputVaue同样需要在data中注册（与存储快递公司用到变量compangy_id类似），用该变量存储用户输入的表单信息
3.查询按钮
使用微信小程序-表单组件-button。
参考资料：微信小程序官方文档button介绍
结构(index.wxml)
<button type="primary" size="{{primarySize}}"
bindtap="bindquery" style="margin-top:20px;"> 查询 </button>
- type="primary"用于定义按钮样式类型，组件提供几种样式可供选择
- size用于定义按钮大小，有效值为default和mini,默认为default
- bindquery绑定查询事件
js(index.js)
// 点击查询
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
})
}
这里用到了一个公开的物流接口：
http://www.kuaidi100.com/query?type=快递公司代号&postid=快递单号
ps 快递公司代号:
申通=”shentong” EMS=”ems” 顺丰=”shunfeng” 圆通=”yuantong” 中通=”zhongtong” 韵达=”yunda” 天天=”tiantian” 汇通=”huitongkuaidi” 全峰=”quanfengkuaidi” 德邦=”debangwuliu” 宅急送=”zhaijisong”
参考资料： 各种JSON API免费接口
- 通过上述快递公司和快递单号部分，可以获取接口需要的type和postid
- wx.navigateTo是官方提供的API，保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面。这里用于跳转到快递信息展示详情页detail,并将查询快递信息所需的参数传递到详情页。
参考资料： 微信小程序wx.navigateTo的API文档
二、 快递信息详情页
查询成功和失败时效果如下：
查询成功详情页
查询失败详情页
结构(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-->
<!--查询成功时 begin-->
<view wx:if="{{haslist}}">
<!--循环输出列表 begin-->
<view class="mainline"></view>
<block wx:for="{{list}}" wx:key="*this" class="scroll-view-item bc_green">
<template is="items" data="{{...item}}" />
</block>
<!--循环输出列表 end-->
</view>
<!--查询成功时 end-->
<!--查询失败时-->
<view wx:else style="padding: 20px;">{{errmsg}}</view>
</view>
- 快递信息模板，为一条快递信息的模板，包括时间和快递详情
- wx:if和wx:for控制循环输出信息
- 其中在列表循环是，如不提供 wx:key，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。详细使用见如下参考资料的wx:for
参考资料：
js(detail.js)
data: {
list:[],
haslist:false,
errmsg:''
},
//事件处理函数
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:'请正确输入快递公司和单号'
});
}
}
})
}
- data中list用于存储快递信息数据，haslist用于结构用中wx:if的控制，errmsg为查询失败时显示的信息。
- 在主页面查询按钮的点击事件中采用了wx.navigateTo传递快递查询的参数。（物流接口：http://www.kuaidi100.com/query?type=快递公司代号&postid=快递单号）。 在详情页面中，只需在onLoad(生命周期函数--监听页面加载)中用options接受参数即可。
- 用wx.request发起网络请求。
参考资料：微信小程序官方文档wx.request发起网络请求
- 注意： 在创建项目时，填写了AppID,发起网络请求需要在开发设置中配置服务器域名，如下图所示。
-
开发者工具-创建小程序
i微信公众平台-设置
网友评论