微信小程序入门--快递查询小程序的制作

最近在自学微信小程序开发，做了一个很垃圾的快递查询小demo，记录一下(=^ ^=)

开发前准备:微信开发者工具、快递查询的接口

我用的快递查询接口是聚合数据的，地址如下https://www.juhe.cn/

注册之后再申请接口，在个人中心找到key（后面会用到），如下图：

点击接口进去会有接口地址和请求参数，如下图：

接下来就准备开发，要将项目设置中的不合法域名勾选，不然运行会报错

接下来上代码：

简单的页面由picker选择器、文本框和按钮组成

wxml文件：

<!--index.wxml-->
<view class="container"><picker mode="selector" range='{{express}}' value='{{index}}' bindchange='choose' ><text>请选择快递公司：          {{express[index]}}</text></picker><input placeholder="请输入运单号" bindinput='input'/><button type="primary" bindtap="btnClick" size='mini'>查询</button><view wx:for="{{expressInfo.result.list}}">{{item.remark}} - 【{{item.datetime}}】<view class="divLine"></view></view>
</view>

wxss文件：

input{border: 1px rgba(0, 0, 0, 0.404) solid;width: 80%;margin-top: 20px;padding:5px;
}
button{width: 40%;margin-top:20px;
}
.divLine{background: rgb(112, 112, 111);width: 100%;height: 5rpx;
}

页面js文件：

//index.js
//获取应用实例
const app = getApp()Page({data: {inputdata:null,    //快递单号express_type:null,  //快递种类expressInfo:null,   //物流信息index: 0, //默认下标express: ['顺丰快递', '申通快递', '圆通快递', '韵达快递', '天天快递', '邮政快递', '中通快递'], //选择器中的选项 com_array: ['sf', 'sto', 'yt', 'yd', 'tt', 'ems', 'zto'],  com:'sf' //默认为顺丰},input:function(e){this.setData({inputdata:e.detail.value})//获取输入框内容//console.log(this.data.inputdata)},choose:function(e){this.setData({index:e.detail.value}) //展示快递公司this.setData({com:this.data.com_array[this.data.index]})// console.log(this.data.com)},btnClick: function () {var thispage=this;app.getExpressInfo(this.data.com,this.data.inputdata,function(data){//console.log(data)thispage.setData({expressInfo:data})})//app.getcom()}
})

appp.js文件:

//app.js
App({//com为快递公司种类，no为快递编号,cb为一个函数方法getExpressInfo: function (com, no, cb) {wx.request({url: 'http://v.juhe.cn/exp/index?key=&com=XXXXX这里填申请到的key' + com + '&no=' + no, // 接口地址data: {x: '',y: ''},header: {'key': 'XXXXX这里填申请到的key'},success(res) {//console.log(res.data)cb(res.data)}})}//这个函数用来返回这个接口支持查询的快递，我就选了几个常用的快递公司// getcom:function(){//   wx.request({//     url: 'http://v.juhe.cn/exp/com?key=XXXXX这里填申请到的key',//     data: {//       x: '',//       y: ''//     },//     header: {//       'key': 'XXXXX这里填申请到的key'//     },//     success(res) {//       console.log(res.data)//     }//   })// }
})

最后是结果展示（没错就是这么丑(o~.~o)）：

微信小程序入门--快递查询小程序的制作相关推荐

微信小程序之快递查询（完整版）
一.简介: 点击按钮查看快递信息.我也在网上找了很多快递查询的例子,但是它们都不是很详细.在代码上他们都没错,但是在配置上却缺少了一些东西,导致我们这些白嫖党并没有什么用,对于程序中出现的一些错误无法 ...
微信小程序实战—快递查询
微信小程序实战-快递查询案例需求:输入快递单号,点击查询按钮即可查看快递信息 api:阿里云全国快递物流查询关键代码: 数据定义(index.js) data: {motto: 'Hello Wo ...
python制作快递查询小软件
用python制作快递查询小软件,使用Pycharm+Python+PyQt5 快递查询实现思路通过对网址http://www.kuaidi100.com/ 抓包,发现通过self.url1 = r ...
快递查询小程序源码可运营+微信物流快递查询小程序
介绍: 去微信公众平台注册小程序https://mp.weixin.qq.com/ 下载微信开发者工具 https://dldir1.qq.com/WechatWebDev/release/p-ae4 ...
微信小程序实现快递查询功能(附源码)
目录效果图项目结构快递查询API获取微信小程序后台配置页面代码 express页面代码 logistics页面代码注意问题(使用必看) 留言效果图项目结构快递查询API获取这里我使 ...
微信小程序（快递查询）
阅读本博客需要对微信小程序有一个初步的理解可参照点我进行初步的了解效果图下面我们正式开始第一步查看目录结构并初步建立各个文件夹及在app.json中注册页面不注册无法显示我们这里只使用im ...
钉钉小程序入门2—区分小程序和H5微应用
一.简介在钉钉小程序入门1-区分企业内部应用.第三方企业应用.第三方个人应用一文中我解释了钉钉的三种应用以及它们的区别,以企业内部应用为例,点击创建应用按钮后会弹出了如下的弹窗: 这里有一个应用类型 ...
过期域名查询php程序,一个域名查询的程序
一个域名查询的程序更新时间:2006年10月09日 00:00:00 作者: (主要用了两个字符串函数implode()和explode) 我制作的域名查询的源代码,主要用了两个字符串函数imp ...
微信公众平台开发--快递查询
1)API申请 2)手机查询API 3)服务器要求 4)智能查询 5)效果展示 ------------------------------------------------------------ ...

微信小程序入门--快递查询小程序的制作

微信小程序入门--快递查询小程序的制作相关推荐

最新文章

热门文章