初试小程序

1、环境搭建

直接进入微信平台下载即可

2、基本开发思路

小程序每个界面一般来说对应有三个文件

xxx.js 用于逻辑控制，相当于ViewController，包含界面的数据源，生命周期和操作函数

所有的数据源和函数操作都被声明在

Page({

}）

需要注意的是，所有的成员函数调用时必须加上this,否则无法识别。

xxx.wxml 用于界面展示，相当于View,用于界面展示

xxx.wxss 用于界面显示的样式，相当于css

几个使用到生命周期函数

onLoad--界面第一次加载时

onReachBottom--用于加载更多，表示界面到底

3、网络请求

wx.request({

      method: 'POST',

      header:{

        //模拟器默认是content-type

        //真机默认是Content-Type

        'content-type': 'application/x-www-form-urlencoded'

      },

      url: 'https:xxxx

      data: {

        'action': 'get_list',

        'pages': this.currentIndex,

        'pagesize':10,

      },

      success:function(res) {

      },

      fail: function (res) {

      }

    })

  }

Post请求必须设置content-type，否则服务器无法正常的获取到参数。获取到数据后，

需要调用this.setData更改数据源，这样小程序就会自动刷新当前页面

4、TableView的实现

通过scroll-view包裹view 模拟实现IOS中的UITableView，scroll-view中的view对应每一行的cell。

指定wx:for会自动遍历数据源中的数组，在view中的item就是数组中的元素，这些都是系统提供的命名，直接写即可。

5、跳转逻辑

用于使用到了打开外部链接功能，小程序貌似目前暂时不提供打开浏览器功能，因此需要自定义一个page用于展示外部链接

首先，定义一个新的page，我在这里是直接手动新建所需的那三个文件，然后在view中只放入web-view标签。

注意：新定义的page必须在app.json的pages声明，否则无法正常调用

跳转代码

wx.navigateTo({

      url: '../outHtml/outHtml?outUrl=' + event.target.dataset.img,

    })

获取页面参数的代码

onLoad: function (options) {

console.log(options.outUrl)

}