微信小程序初级——快递查询
前言：
老王之前看的一些快递查询小程序的制作教程基本都是利用百度API Store的接口进行开发的。然而，百度API Store已经停止服务了，所以这些教程中的部分内容就不适用了。新手看起来会有些困惑（比如本菜鸟一样）。因此，这里提供一个新的快递查询小程序制作教程，利用聚合数据接口进行开发。
准备工作
1. 微信小程序开发工具:首先需要安装微信小程序开发工具。可以从官方网站下载。
2. 微信小程序账号:需要注册一个微信小程序账号，用于创建和管理小程序。
3. 聚合数据接口:需要申请一个聚合数据接口的API_KEY和SECRET_KEY。
步骤一：创建小程序
1. 打开微信小程序开发工具，新建一个项目。
2. 填写基本信息，如小程序名称、描述等。
3.选择一个模板（这里使用的是空白模板）。
步骤二：设计界面
1. 在`pages/index/index.wxml`文件中编写界面的结构代码。
```html
```
2. 在`pages/index/index.wxss`文件中编写界面的样式代码。
```csspage {
background-color: f7f7f7;
}
input {
width:100%;
height:40px;
padding:10px;
border-radius:5px;
box-sizing: border-box;
}
button {
width:100%;
height:40px;
background-color: 4cd964;
color: fff;
border-radius:5px;
margin-top:20px;
}
```
步骤三：编写逻辑
1. 在`pages/index/index.js`文件中编写逻辑代码。
```javascriptPage({
data: {
expressInfo: ''
},
bindInput(e) {
this.setData({
expressNo: e.detail.value });
},
getExpressInfo() {
const expressNo = this.data.expressNo;
if (!expressNo) return;
wx.showLoading({
title: '正在查询...',
mask: true,
success: () => {
// 发送请求到聚合数据接口 wx.request({
url: ` method: 'GET',
header: {
'Content-Type': 'application/json'
},
success: (res) => {
const expressInfo = res.data;
this.setData({
expressInfo });
wx.hideLoading();
},
fail: () => {
wx.hideLoading();
}
});
}
});
}
});
```
2. 在`pages/index/index.js`文件中添加一个事件监听器，用于更新界面的快递信息。
```javascriptPage({
// ...
bindInput(e) {
this.setData({
expressNo: e.detail.value });
},
getExpressInfo() {
const expressNo = this.data.expressNo;
if (!expressNo) return;
wx.showLoading({
title: '正在查询...',
mask: true,
success: () => {
// 发送请求到聚合数据接口 wx.request({
url: ` method: 'GET',
header: {
'Content-Type': 'application/json'
},
success: (res) => {
const expressInfo = res.data;
this.setData({
expressInfo });
wx.hideLoading();
},
fail: () => {
wx.hideLoading();
}
});
}
});
},
// ...
bindExpressInfoTap() {
const expressInfo = this.data.expressInfo;
if (!expressInfo) return;
wx.navigateTo({
url: `pages/express-info/index?expressNo=${expressNo}`
});
}
});
```
步骤四：测试
1. 在微信小程序开发工具中，点击"预览"按钮。
2. 在微信小程序中，输入快递单号并点击"查询"按钮。
3. 等待请求完成后，界面会显示快递信息。
注意事项
* 需要在`pages/index/index.js`文件中填写聚合数据接口的API_KEY和SECRET_KEY。
* 需要在`pages/express-info/index.wxml`文件中编写界面的结构代码。
* 需要在`pages/express-info/index.wxss`文件中编写界面的样式代码。
以上就是使用聚合数据接口开发微信小程序的快递查询功能的教程。希望通过这个教程，你可以轻松地创建一个功能完善的小程序。
