微信小程序开发-从基础到实战（四）

LZ很沮丧，因为发现这个项目可能无法实现大部分预期的功能并且不会有太多人看这些文章，已经不太想写编码过程，但本着写文章不仅是经验分享还是对自己编程的记录及自身知识的验证，因此咬牙继续写完这个项目的相关文章。如果有看到文章的并有跟着学习的朋友要注意目前小程序仅支持https协议的API，当然也可以不采用API方式利用网页解析获得数据，但是这只是个学习项目的过程，本着快速学习开发小程序的精神暂时不做深入探讨。

1、页面生命周期函数的利用

在学习过程中会碰到生命周期函数，这是框架自身封装的一些特有的功能，可以联想到Struct、Spring里的拦截器或servlet当中的过滤器监听器等，都是采用类似的原理在增强功能。页面生命周期函数可以更好的帮助我们实现页面逻辑与数据之间的交互。

最常用到的是onLoad,onPullDownRefresh,onReachBottom等主要是设计页面数据初始化及上拉、下拉刷新。另外想要操作小程序前后台切换时的行为可以使用onShow,onHide函数。在本次项目中主要运用到了以下的函数：

onLoad、以文章列表页为例

/**
 * 获取博客文章列表
 * 
 * @obj 传入的事件本身
 */
function getArticleList(obj){
  var page = obj.data.page
  wx.request({
    url: API_URL+"getarticlelist",
    data: {
      access_token: ACCESS_TOKEN,
      page: page
    },
    header: {
      'content-type': "application/json"
    },
    success: function (res) {
      console.log(res.data)
      if (res.data.page + 1 > res.data.count / res.data.size) {//判断是否超过页数
        obj.setData({
          noMore: true,
          loadHidden: true,
          list: obj.data.lists
        })
        return;
      }
      var dataList = []
      obj.setData({
        lists: dataList.concat(obj.data.lists, res.data.list),
        page: ++obj.data.page
      })
    }
  })
}

module.exports={
  getArticleList: getArticleList
}

module.exports是对自定义声明方法的一种导出，使得其他JS文件可以调用该js中的方法

页面生命周期函数详见：https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/page.html

wx.request是小程序调用的微信的API功能，该方法是发起请求

（API的使用基本都与上述例子类似，都编写的逻辑层代码中，以wx.xxx方式调用）

OBJECT参数说明：

参数名	类型	必填	默认值	说明	最低版本
url	String	是		开发者服务器接口地址
data	Object/String/ArrayBuffer	否		请求的参数
header	Object	否		设置请求的 header，header 中不能设置 Referer。
method	String	否	GET	（需大写）有效值：OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
dataType	String	否	json	如果设为json，会尝试对返回的数据做一次 JSON.parse
responseType	String	否	text	设置响应的数据类型。合法值：text、arraybuffer	1.7.0
success	Function	否		收到开发者服务成功返回的回调函数
fail	Function	否		接口调用失败的回调函数
complete	Function	否		接口调用结束的回调函数（调用成功、失败都会执行）

success返回参数说明：

参数	类型	说明	最低版本
data	Object/String/ArrayBuffer	开发者服务器返回的数据
statusCode	Number	开发者服务器返回的 HTTP 状态码
header	Object	开发者服务器返回的 HTTP Response Header	1.2.0

我们主要会用到request的url,data,success属性

url中因为默认数据地址相同将其定义为常量API_URL并拼接字符串组成完整的路径（有兴趣了解REST路径的可以去看看我转载的一些有关于REST API的文章，开发当中会常常涉及到的）

data主要传递一些参数或者页面数据，ACCESS_TOKEN是前面文章提到的临时令牌token，用来访问数据API用的

success 为成功后的回调函数，主要利用setData方法对数据进行刷新。这儿要注意不要使用类似

this.data.xxx=xxx

的方法去刷新数据了，LZ在ionic的开发中吃透了这种苦，幸好小程序开发中，明确的说出了，采用上述方法会使得页面数据无法刷新，因此坚决使用this.setData方法刷新页面数据。

另外method方法在我们上传文件，测试不同类型的接口时也会常常用到。

2.template模板的样式最好在app.wxss全局样式中定义

上篇文章有用到template模板的知识，后面认真运用发现实际上像page页面那样新建文件夹，并创建wxss样式文件并不能实现对template模板样式的操控。经过实践，最终发现，template模板样式应在app.wxss全局样式中实现才会产生效果，以下是采用模板界面后的效果图：

3.上拉至底的刷新

当页面到达底端时会出现加载更多选项，由loadHidden属性控制其显示，并且到达页面底端会自动调用onReachBottom生命周期函数

onReachBottom: function () {
    if(!this.data.noMore){
      this.setData({ loadHidden: false })
      console.log("xxxxx" + this.data.noMore)
    }else{
      wx.showToast({
        title: '我是有底线的',
        icon: 'none',
        duration: 2000
      })
    }

对应wxml结构

以上noMore是控制是否还有更多数据，当没有更多数据时会设置loadHidden属性隐藏加载更多的选项，并且调用小程序自身的提示框进行提示wx.showToast

主要用到了title显示标题提示内容，duration设置提示框停留在页面的时间

以下是效果：

以下是小程序文档的具体参数介绍：

OBJECT参数说明：

参数	类型	必填	说明	最低版本
title	String	是	提示的内容
icon	String	否	图标，有效值 "success", "loading", "none"
image	String	否	自定义图标的本地路径，image 的优先级高于 icon	1.1.0
duration	Number	否	提示的延迟时间，单位毫秒，默认：1500
mask	Boolean	否	是否显示透明蒙层，防止触摸穿透，默认：false
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

icon有效值

有效值	说明	最低版本
success	显示成功图标，此时 title 文本最多显示 7 个汉字长度。默认值
loading	显示加载图标，此时 title 文本最多显示 7 个汉字长度。
none	不显示图标，此时 title 文本最多可显示两行	1.9.0

有关于弹出框的API可在小程序文档API的界面栏找到