微信小程序开发(第一篇)--初体验之快递查询

设立微信小程序开发的flag已经好久了，期间基本上都是碎片化时间学习。一方面回顾之前自学的javascript细节，一方面动手按照教程进行摸索。这不，最近这两两天试了试，跟着教程做了第一个有功能小程序，真的是“纸上得来终觉浅，绝知此事要躬行”。探索实践中学到的知识点最生动有趣，而且容易记忆。下面记录一下这个过程，梳理一下中间的key point。

---

微信小程序的基本框架如下图所示：

小程序的代码结构图

按照代码后缀，小程序主要分为四类文件：

1 js 该文件主要是描述页面的交互逻辑，里面包含的主要是一些函数，如监听处理页面的函数等，还有负责和其他页面进行交互。
2 wxml 这个文件主要是描述页面的构成。基本上就是xml的语法。
3 json 这个文件主要定义一些经常修改的文本或者选项配置等
4 wxss 类似于css文件，定义了页面的颜色大小格式等内容

总体上，微信小程序相当于简单的网页开发，非常适合我们这种入门者接触和体验前端开发的魅力。快递查询是一个非常简单的功能，一个单页面就能搞定，接下来我细细的总结一下快递查询开发的关键要点。

1. 第一步，定义主页面标题。整体效果图如下。

为此我们需要修改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中添加这样一句

然后在index.wxss中加入：

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

这样就可以在页面中加入一条这样的条形框：

加入条形框

（2）添加查询按钮
查询按钮的组件如下所示，也加入到index.wxml中

   查询 

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内部定义的匿名函数。

3. 到这里之前，主题的结构已经搭建差不多了，接下来主要是数据的输入和结果的展示。
   (1) 从输入框输入物流编号。之前定义了page.data中的expressNo 我们需要设置从输入框获取这个变量的值。
   在刚才的输入框组件中加入bindinput字段

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视图组件，用于展示物流信息。代码如下:

    
        {{item.time}}:{{item.status}} 
      
  

scroll-view后面的一大堆配置是引用微信的官方文档。里面的view视图使用了独有的for循环功能。将保存物流信息的array逐个展示出来。
最后的效果如下所示，大功告成。

查询效果

后记：通过这次学习，对微信小程序开发的框架和流程有了清晰的认识，尝试了一些简单的组件，大大提升了兴趣。下次更新，希望能做出一个更加复杂的东西出来。