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)
}