一.微信开发工具简介.

1. 创建新的项目.

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

3. 调试期支持http.

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

4.添加编译模式。

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

二.小程序的目录结构.

1. pages: 页面文件.包含一个页面所需的所有文件.

1. js文件为逻辑控制层.
2. wxml文件为页面展示层(类似于xml).
3. wxss文件为样式层(类似于css).

2. app.js文件为程序初始化话文件(相当于Android中的application).

App({//如下为小程序的生命周期
  onLaunch: function() { },//生命周期回调——监听小程序初始化。
  onShow: function() {  },//生命周期回调——监听小程序启动或切前台。
  onHide: function() {  },//生命周期回调——监听小程序切后台。
  onError: function(msg) {  },//错误监听函数。
  onPageNotFound:function() {  }//页面不存在监听函数。
})

3. app.json 小程序配置.

image.png

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