【微信小程序】JS/数据绑定

页面JS文件

整个页面执行了一个Page（{...}）方法，参数是一个Object对象，用来指定页面的初始数据data，生命周期函数（on+...）的函数，事件处理函数

页面的生命周期：

1. 加载
2. 显示
3. 渲染
4. 隐藏
5. 卸载

MINA框架提供5个生命周期函数来监听这5个特定的生命周期：

1. onLoad：监听页面加载，一个页面只会调用一次

2. onReady：监听页面显示，每次打开页面都会调用

3. onShow：监听页面初次渲染完成，一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互

4. onHide：监听页面隐藏

5. onUnload：监听页面卸载

Page({
  data:{},

  onLoad:function(option){
    //页面初始化option为页面跳转所带来的参数
    console.log("onLoad:页面被加载");
  },

  onReady:function(){
    //页面渲染完成
    console.log("onReady:页面被渲染");
  },

  onShow:function(){
    //页面显示
    console.log("onShow:页面被显示");
  },

  onHide:function(){
    //页面隐藏
    console.log("onHide:页面被隐藏");
  },

  onUnload:function(){
    //页面关闭
    console.log("onUnload:页面被关闭");
  }
})

一个页面被正常显示，必须经历加载->显示->渲染

 

3个小程序特定事件的处理函数：

1. onPullDownRefresh：监听用户下拉动作的事件处理函数
2. onReachBottom：页面上拉触底事件的处理函数

3. onShareAppMessage：用户点击右上角分享

---

数据绑定

传统网页：首先获取HTML的DOM，对DOM标签进行赋值，从而实现数据的显示。

小程序：采用数据绑定机制来做数据的初始化和更新。而且完全抛弃了DOM结构，只能用数据绑定来做数据的相关操作

原生js实现数据单向绑定

原生js实现数据双向绑定

微信小程序数据绑定-官方

微信小程序开发学习--页面事件和数据绑定

不同于AngularJS的双向数据绑定，小程序仅实现了单向数据绑定，即仅支持从逻辑层传递到渲染成的数据绑定

小程序使用Page方法参数里的data变量作为数据绑定的桥梁

数据绑定：

• 初始化的数据绑定：数据直接写在Page方法参数的data对象下
• setData方法数据绑定：同数据更新，会引起页面的重新渲染

1、初始化数据绑定

在js的data中定义变量名和译意，在wxml中用双花括号{{ }}写入变量名

当页面执行了onShow函数后，逻辑层会收到一个通知，随后逻辑层会将该变量名以json的形式发送到view视图层，视图层接收初始化数据后，开始渲染并显示初始化数据，最终将数据呈现在开发者眼前。

---

学习《微信小程序开发入门与实践》的笔记内容，并非剽窃=-=