目录
一、小程序视图层
响应的数据绑定
框架的核心是一个响应的数据绑定系统,可以让数据与视图非常简单地保持同步。当做数据修改的时候,只需要在逻辑层修改数据,视图层就会做相应的更新。
我们跟着官网来感受一下
建立一个页面
官网源码::
<view> Hello {{name}}! </view>
<button bindtap="changeName"> Click me! </button>
// 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 view
this.setData({
name: 'MINA'
})
}
})
- 开发者通过框架将逻辑层数据中的
name
与视图层的name
进行了绑定,所以在页面一打开的时候会显示Hello Weixin!
;- 当点击按钮的时候,视图层会发送
changeName
的事件给逻辑层,逻辑层找到并执行对应的事件处理函数;- 回调函数触发后,逻辑层执行
setData
的操作,将data
中的name
从Weixin
变为MINA
,因为该数据和视图层已经绑定了,从而视图层会自动改变为Hello MINA!
。
效果图:
列表渲染
使用以及效果
源码:
<!--wxml-->
<view wx:for="{{array}}"> {{item}} </view>
// page.js
Page({
data: {
array: [1, 2, 3, 4, 5]
}
})
条件渲染
效果
源码:
<!--wxml-->
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>
// page.js
Page({
data: {
view: 'APP'
}
})
模板
使用
效果图:
源码:
<!--wxml-->
<template name="staffName">
<view>
FirstName: {{firstName}}, LastName: {{lastName}}
</view>
</template>
<template is="staffName" data="{{...staffA}}"></template>
<template is="staffName" data="{{...staffB}}"></template>
<template is="staffName" data="{{...staffC}}"></template>
// page.js
Page({
data: {
staffA: {firstName: 'Hulk', lastName: 'Hu'},
staffB: {firstName: 'Shang', lastName: 'You'},
staffC: {firstName: 'Gideon', lastName: 'Lin'}
}
})
二、小程序事件
什么是事件
事件是视图层到逻辑层的通讯方式。
事件可以将用户的行为反馈到逻辑层进行处理。
事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。
事件对象可以携带额外信息,如 id, dataset, touches。
事件的使用方式
在组件中绑定一个事件处理函数。
如
bindtap
,当用户点击该组件的时候会在该页面对应的 Page 中找到相应的事件处理函数。
<!--wxml-->
<view id="tapTest" data-hi="Weixin" bindtap="tapName"> Click me! </view>
在相应的 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中添加一个按钮
<view>
<button bindtap="toC">跳转c页面</button>
</view>
js中
toC:function(event){
wx.navigateTo({
url: '/pages/c/c',
})
}
修改日志的路径
点击跳转 再点击回退时
逻辑层 App Service
小程序开发框架的逻辑层使用
JavaScript
引擎为小程序提供开发者JavaScript
代码的运行环境以及微信小程序的特有功能。逻辑层将数据进行处理后发送给视图层,同时接受视图层的事件反馈。
开发者写的所有代码最终将会打包成一份
JavaScript
文件,并在小程序启动的时候运行,直到小程序销毁。这一行为类似 ServiceWorker,所以逻辑层也称之为 App Service。在
JavaScript
的基础上,我们增加了一些功能,以方便小程序的开发:
增加
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
中获取。