小程序框架
目录
一、小程序视图层
响应的数据绑定
列表渲染
条件渲染
模板
二、小程序事件
什么是事件
事件的使用方式
事件分类
三、小程序的生命周期
逻辑层 App Service
页面路由
注意事项
一、小程序视图层
响应的数据绑定
框架的核心是一个响应的数据绑定系统，可以让数据与视图非常简单地保持同步。当做数据修改的时候，只需要在逻辑层修改数据，视图层就会做相应的更新。
我们跟着官网来感受一下
建立一个页面
官网源码：：
Hello {{name}}!
// This is our App Service.
// This is our data.
var helloData = {name: 'Weixin'
}// Register a Page.
Page({data: helloData,changeName: function(e) {// sent data change to viewthis.setData({name: 'MINA'})}
})
- 开发者通过框架将逻辑层数据中的
name与视图层的name进行了绑定，所以在页面一打开的时候会显示Hello Weixin!；- 当点击按钮的时候，视图层会发送
changeName的事件给逻辑层，逻辑层找到并执行对应的事件处理函数；- 回调函数触发后，逻辑层执行
setData的操作，将data中的name从Weixin变为MINA，因为该数据和视图层已经绑定了，从而视图层会自动改变为Hello MINA!。
效果图：
列表渲染
使用以及效果
源码：
{array}}"> {{item}} // page.js
Page({data: {array: [1, 2, 3, 4, 5]}
})
条件渲染
效果
源码：
{view == 'WEBVIEW'}}"> WEBVIEW
{view == 'APP'}}"> APP
{view == 'MINA'}}"> MINA // page.js
Page({data: {view: 'APP'}
})模板
使用
效果图：
源码：
FirstName: {{firstName}}, LastName: {{lastName}}
{...staffA}}">
{...staffB}}">
{...staffC}}">// page.js
Page({data: {staffA: {firstName: 'Hulk', lastName: 'Hu'},staffB: {firstName: 'Shang', lastName: 'You'},staffC: {firstName: 'Gideon', lastName: 'Lin'}}
})二、小程序事件
什么是事件
事件是视图层到逻辑层的通讯方式。
事件可以将用户的行为反馈到逻辑层进行处理。
事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
事件对象可以携带额外信息，如 id, dataset, touches。
事件的使用方式
在组件中绑定一个事件处理函数。
如
bindtap，当用户点击该组件的时候会在该页面对应的 Page 中找到相应的事件处理函数。
Click me! 在相应的 Page 定义中写上相应的事件处理函数，参数是event。
Page({tapName: function(event) {console.log(event)}
})可以看到 log 出来的信息大致如下：
{"type":"tap","timeStamp":895,"target": {"id": "tapTest","dataset": {"hi":"Weixin"}},"currentTarget": {"id": "tapTest","dataset": {"hi":"Weixin"}},"detail": {"x":53,"y":14},"touches":[{"identifier":0,"pageX":53,"pageY":14,"clientX":53,"clientY":14}],"changedTouches":[{"identifier":0,"pageX":53,"pageY":14,"clientX":53,"clientY":14}]
}
事件分类
事件分为冒泡事件和非冒泡事件：
冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递
WXML的冒泡事件列表：
注：除上表之外的其他组件自定义事件如无特殊声明都是非冒泡事件，如 form 的
submit事件，input 的input事件，scroll-view 的scroll事件，(详见官网组件)
三、小程序的生命周期
下图说明了页面 Page 实例的生命周期。
写微信小程序，他的生命周期不能不知道，不知道小程序就会出现各种bug而无法解决。
小程序由两大线程组成：负责界面的线程（view thread）和服务线程（appservice thread），各司其职由互相配合
新建两个页面
c.js/*** 页面的初始数据*/data: {},/*** 生命周期函数--监听页面加载*/onLoad(options) {console.log("test.onLoad")},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {console.log("test.onReady")},/*** 生命周期函数--监听页面显示*/onShow() {console.log("test.onShow")},/*** 生命周期函数--监听页面隐藏*/onHide() {console.log("test.onHide")},/*** 生命周期函数--监听页面卸载*/onUnload() {console.log("test.onUnload")},保存点击调试器
会执行以下三个函数
在app.json中添加一个tabbar
点击首页
点击日志
可以看出在页面切换时执行的两个函数
在test.wxml中添加一个按钮
js中
toC:function(event){wx.navigateTo({url: '/pages/c/c',})}修改日志的路径
点击跳转 再点击回退时
逻辑层 App Service
小程序开发框架的逻辑层使用
JavaScript引擎为小程序提供开发者JavaScript代码的运行环境以及微信小程序的特有功能。逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。
开发者写的所有代码最终将会打包成一份
JavaScript文件，并在小程序启动的时候运行，直到小程序销毁。这一行为类似 ServiceWorker，所以逻辑层也称之为 App Service。在
JavaScript的基础上，我们增加了一些功能，以方便小程序的开发：
增加
App和Page方法，进行程序注册和页面注册。增加
getApp和getCurrentPages方法，分别用来获取App实例和当前页面栈。提供丰富的 API，如微信用户数据，扫一扫，支付等微信特有能力。
提供模块化能力，每个页面有独立的作用域。
注意：小程序框架的逻辑层并非运行在浏览器中，因此
JavaScript在 web 中一些能力都无法使用，如window，document等。
页面路由
在小程序中所有页面的路由全部由框架进行管理。
页面栈
框架以栈的形式维护了当前的所有页面。 当发生路由切换的时候，页面栈的表现如下：
对于路由的触发方式以及页面生命周期函数如下：
Tab 切换对应的生命周期（以 A、B 页面为 Tabbar 页面，C 是从 A 页面打开的页面，D 页面是从 C 页面打开的页面为例）：
注意事项
navigateTo,redirectTo只能打开非 tabBar 页面。
a--navigateTo--c, c-->redirectTo-->d
switchTab只能打开 tabBar 页面。
reLaunch可以打开任意页面。页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。
调用页面路由带的参数可以在目标页面的
onLoad中获取。