（1）

小程序没有DOM对象，一切基于组件化

小程序的四个重要的文件

a.     *.js

b.     *.wxml ---> view结构 ----> html

c.      *.wxss ---> view样式 -----> css

d.     *. json ----> view 数据 -----> json文件

（2）储备知识

a. 理解事件机制

b. 理解组件化

c. 理解数据绑定

d. Flex布局

e.     移动端适配方案

Iphon6： 1rpx = 1物理像素 = 0.5px

微信官方提供的换算方式：

1. 以iPhone6的物理像素个数为标准: 750;

2. 1rpx = 目标设备宽度 / 750 * px;

3. 注意此时底层已经做了viewport适配的处理，即实现了理想视口。

（3）数据绑定 & 事件

//数据绑定

（1）

Page({

  /**

   * 页面的初始数据

   */

  data: {

    msg: '开启小程序之旅'

  },

})

this.setData({

      msg: '我是修改之后的数据'

})

//生命周期

Page({

  /**

   * 页面的初始数据

   */

  data: {

    msg: '开启小程序之旅'

  },

  /**

   * 生命周期函数--监听页面加载

   */

  onLoad: function (options) {

  },

  /**

   * 生命周期函数--监听页面初次渲染完成

   */

  onReady: function () {

  },

  /**

   * 生命周期函数--监听页面显示

   */

  onShow: function () {

  },

  /**

   * 生命周期函数--监听页面隐藏

   */

  onHide: function () {

  },

  /**

   * 生命周期函数--监听页面卸载

   */

  onUnload: function () {

  },

  /**

   * 页面相关事件处理函数--监听用户下拉动作

   */

  onPullDownRefresh: function () {

  },

  /**

   * 页面上拉触底事件的处理函数

   */

  onReachBottom: function () {

  },

  /**

   * 用户点击右上角分享

   */

  onShareAppMessage: function () {

  }

})

（2）事件

(1) 冒泡事件

(a) 定义：冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。

(b) 冒泡事件列表：

https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html

(2) 非冒泡事件

(a) 定义：当一个组件上的事件被触发后，该事件不会向父节点传递。

(b) 非冒泡事件：表单事件和自定义事件通常是非冒泡事件

https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html

bind绑定：事件绑定不会阻止冒泡事件向上冒泡

catch 绑定: 事件绑定可以阻止冒泡事件向上冒泡

（3）用户授权，获取用户的信息

   wx.getUserInfo({ //微信小程序提供的API

      //withCredentials: true,

      success: (res) => {

        console.log(res);

        let user = res.userInfo;

        this.setData({

          user

        })

      }

})  

（4）bind绑定：事件绑定不会阻止冒泡事件向上冒泡

catch 绑定: 事件绑定可以阻止冒泡事件向上冒泡

（5）跳转页面

   wx.navigateTo({ //可以回退

      url: '/pages/list/list',

      success(){

        console.log('跳转成功');

      }

    })    

 wx.redirectTo({ //不能回退

      url: '/pages/list/list',

      success(){

        console.log('跳转成功');

      }

    })