一.微信开发工具简介.
1. 创建新的项目.

2. 微信小程序开发工具功能分类.

3. 调试期支持http.
微信小程序需要https请求,(没有https证书的可以再调试时设置支持http)

4.添加编译模式。
微信小程序开发工具可以针对于某一个特定的页面进行编译。


二.小程序的目录结构.

1. pages: 页面文件.包含一个页面所需的所有文件.
- js文件为逻辑控制层.
- wxml文件为页面展示层(类似于xml).
- wxss文件为样式层(类似于css).
2. app.js文件为程序初始化话文件(相当于Android中的application).
App({//如下为小程序的生命周期
onLaunch: function() { },//生命周期回调——监听小程序初始化。
onShow: function() { },//生命周期回调——监听小程序启动或切前台。
onHide: function() { },//生命周期回调——监听小程序切后台。
onError: function(msg) { },//错误监听函数。
onPageNotFound:function() { }//页面不存在监听函数。
})
3. app.json 小程序配置.

4. app.wxss 为全局样式设置.
三.微信小程序内测人员添加.

四.page.js回调函数.
Page({
data: {text: "This is page data."},//页面的初始数据
onLoad: function(options) { },//生命周期回调—监听页面加载
onReady: function() { },//生命周期回调—监听页面初次渲染完成
onShow: function() { },//生命周期回调—监听页面显示
onHide: function() { },//生命周期回调—监听页面隐藏
onUnload: function() { },//生命周期回调—监听页面卸载
onPullDownRefresh: function() { },//监听用户下拉动作
onReachBottom: function() { },//页面上拉触底事件的处理函数
onShareAppMessage: function () { },//监用户点击右上角转发
//如下为自定义的事件处理函数(视图中绑定的)
viewTap: function() {
//setData设置数据绑定data值,同时将更新视图
this.setData({text: 'Set some data for updating view.'})
}
})
data
是页面第一次渲染使用的初始数据。
页面加载时,data
将会以JSON
字符串的形式由逻辑层传至渲染层,因此data
中的数据必须是可以转成JSON
的类型:字符串,数字,布尔值,对象,数组。
渲染层可以通过 [WXML]对数据进行绑定。
示例代码:
<view>{{text}}</view>
<view>{{array[0].msg}}</view>
Page({
data: {
text: 'init data',
array: [{msg: '1'}, {msg: '2'}]
}
})
网友评论