框架
整个小程序框架系统分为两部分:逻辑层(App Service)和 视图层(View)。
小程序提供了自己的视图层描述语言 WXML 和 WXSS,以及基于 JavaScript 的逻辑层框架,并在视图层与逻辑层间提供了数据传输和事件系统,让开发者能够专注于数据与逻辑。
响应的数据绑定
框架的核心是一个响应的数据绑定系统,可以让数据与视图非常简单地保持同步。当做数据修改的时候,只需要在逻辑层修改数据,视图层就会做相应的更新。
<!--pages/welcom/welcom.wxml-->
<view> {{name}} </view>
<button bindtap="fnChangeName"> Click me! </button>
// pages/welcom/welcom.js
Page({
data: {
"name":"WeChat"
},
fnChangeName: function (e) {
this.setData({
name: 'MINA'
})
}
})
页面管理
基础组件
丰富的 API
场景值
场景值用来描述用户进入小程序的路径。
逻辑层 App Service
逻辑层将数据进行处理后发送给视图层,同时接受视图层的事件反馈。
注册小程序
每个小程序都需要在 app.js 中调用 App 方法注册小程序示例,绑定生命周期回调函数、错误监听和页面不存在监听函数等。
// app.js
App({
onLaunch(options) {
// Do something initial when launch.
},
onShow(options) {
// Do something when show.
},
onHide() {
// Do something when hide.
},
onError(msg) {
console.log(msg)
},
globalData: 'I am global data'
})
// pages/welcom/welcom.js
const appInstance = getApp()
console.log(appInstance.globalData)
注册页面
对于小程序中的每个页面,都需要在页面对应的 js 文件中调用 Page 方法注册页面示例,指定页面的初始数据、生命周期回调、事件处理函数等。
页面生命周期
页面路由
navigateTo, redirectTo 只能打开非 tabBar 页面。
switchTab 只能打开 tabBar 页面。
reLaunch 可以打开任意页面。
页面底部的 tabBar 由页面决定,即只要是定义为 tabBar 的页面,底部都有 tabBar。
调用页面路由带的参数可以在目标页面的onLoad中获取。
模块化
API
视图层 view
- 框架的视图层由 WXML 与 WXSS 编写,由组件来进行展示。
- 将逻辑层的数据反应成视图,同时将视图层的事件发送给逻辑层。
- 组件(Component)是视图的基本组成单元。
- WXML(WeiXin Markup language) 用于描述页面的结构。
- WXS(WeiXin Script) 是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构。
- WXSS(WeiXin Style Sheet) 用于描述页面的样式。