设立微信小程序开发的flag已经好久了，期间基本上都是碎片化时间学习。一方面回顾之前自学的javascript细节，一方面动手按照教程进行摸索。这不，最近这两两天试了试，跟着教程做了第一个有功能小程序，真的是“纸上得来终觉浅，绝知此事要躬行”。探索实践中学到的知识点最生动有趣，而且容易记忆。下面记录一下这个过程，梳理一下中间的key point。
微信小程序的基本框架如下图所示：
小程序的代码结构图
按照代码后缀，小程序主要分为四类文件：
1 js 该文件主要是描述页面的交互逻辑，里面包含的主要是一些函数，如监听处理页面的函数等，还有负责和其他页面进行交互。
2 wxml 这个文件主要是描述页面的构成。基本上就是xml的语法。
3 json 这个文件主要定义一些经常修改的文本或者选项配置等
4 wxss 类似于css文件，定义了页面的颜色大小格式等内容
总体上，微信小程序相当于简单的网页开发，非常适合我们这种入门者接触和体验前端开发的魅力。快递查询是一个非常简单的功能，一个单页面就能搞定，接下来我细细的总结一下快递查询开发的关键要点。
- 第一步，定义主页面标题。整体效果图如下。
为此我们需要修改app.json文件。
{
"pages":[
"pages/index/index"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "快递查询",
"navigationBarTextStyle":"black"
}
}
图中pages 属性设置了该小程序所包含的页面的路径，用一个array保存，第一个默认是首页。连续两个index 第一个index表示index文件夹，第二个index表示index作为文件名的各种文件(前面所说的四种文件) 一般文件名和文件夹名保持一致。
window属性设置当前页面的相关属性。主要包含了背景的文字样式，导航条(顶部的一条）的背景颜色，导航条文本设置，导航条文字颜色。我们只需要在这里把导航条文本设置为"快递查询"即可。
2 第二步，添加输入框和查询按钮。
既然要做一个查询的小程序，那必须包含条形的查询框和确认按钮。这两个组件都可以在微信小程序开发的组件页面查找
（1）添加输入框
在index.wxml中添加这样一句
<input placeholder="请输入快递号"/>
然后在index.wxss中加入：
input{
border: 1px solid red;
width: 90%;
margin: 10%;
padding: 5px;
}
这样就可以在页面中加入一条这样的条形框：
加入条形框
（2）添加查询按钮
查询按钮的组件如下所示，也加入到index.wxml中
<button type="primary" bindtap="btnClick" > 查询 </button>
bindtap表示绑定按钮对应的处理函数。因此我们自然需要在index.js中加入btnClick函数
btnClick: function(){
var thispage = this;
app.getExpressInfo(this.data.expressNo,function(data){
console.log(data)
thispage.setData({expressionInfo:data})
})
}
其中 expressNo是定义在page.data对象中,表示查询的编号，expressionInfo是表示查询之后的物流信息，也是定义在page.data中。这里有一个点需要注意
Q:为什么需要把this赋给thispage,不直接在下面用this.setData?
A:这是因为上面的this指代的是page对象，而在函数getExpressInfo中如果使用this,this就表示app对象，因为这个函数的调用者是app对象,所以此处不能直接用this,需要在函数外部把this保存在thispage中
getExpressInfo是保存在app.js中的一个函数,如下所示
getExpressInfo:function(num,cb){
wx.request({
url: 'http://kdwlcxf.market.alicloudapi.com/kdwlcx?no='+num, //仅为示例，并非真实的接口地址
header: {
"Authorization": "APPCODE 4cf870fa5534492dbf3623efbf57adba"
},
success: function (res) {
// console.log(res.data)
cb(res.data)
}
})
a. 微信的网络请求。wx.request() 这个api见官网指南。
b. api接口的使用，该api是我从阿里云的api Market上找的,主要配置项包括url header success回调函数等。这里回调函数就是btnClick内部定义的匿名函数。
- 到这里之前，主题的结构已经搭建差不多了，接下来主要是数据的输入和结果的展示。
(1) 从输入框输入物流编号。之前定义了page.data中的expressNo 我们需要设置从输入框获取这个变量的值。
在刚才的输入框组件中加入bindinput字段
<input placeholder="请输入快递号" bindinput="bindKeyInput"/>
bindinput绑定了一个输入的函数bindKeyInput，因此我们需要在index.js中定义这个函数。
bindKeyInput:function(e){
this.setData({expressNo:e.detail.value})
},
这个detail.value是通过打log试出来的，e表示输出框传入的内容。
（2）接下来设置打印物流信息。
物流信息在点击查询按钮时，会在回调函数中保存至expressionInfo变量中，我们即把该变量展示到index页面中即可。同时，由于物流信息一般比较长，需要加入滚动条，方便查阅。
在index.wxml中,先插入scroll-view组件，在组件内插入view视图组件，用于展示物流信息。代码如下:
<scroll-view scroll-y style="height: 200px;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
<view wx:for="{{expressionInfo.result.list}}">
{{item.time}}:{{item.status}}
</view>
</scroll-view>
scroll-view后面的一大堆配置是引用微信的官方文档。里面的view视图使用了独有的for循环功能。将保存物流信息的array逐个展示出来。
最后的效果如下所示，大功告成。
查询效果
后记：通过这次学习，对微信小程序开发的框架和流程有了清晰的认识，尝试了一些简单的组件，大大提升了兴趣。下次更新，希望能做出一个更加复杂的东西出来。
网友评论