小程序学习笔记之三：小程序框架

前言

参考文档：微信开放文档

1. 注册小程序

每个小程序都需要在 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",
});

通过 getApp 方法获取到全局唯一的 App 实例，获取 App 上的数据或函数。

// xxx.js
const appInstance = getApp();
console.log(appInstance.globalData); // I am global data

2. 注册页面

初始数据、生命周期回调、事件处理函数等。

//index.js
Page({data: {text: "This is page data.",},onLoad: function (options) {// 页面创建时执行},onShow: function () {// 页面出现在前台时执行},onReady: function () {// 页面首次渲染完毕时执行},onHide: function () {// 页面从前台变为后台时执行},onUnload: function () {// 页面销毁时执行},onPullDownRefresh: function () {// 触发下拉刷新时执行},onReachBottom: function () {// 页面触底时执行},onShareAppMessage: function () {// 页面被用户分享时执行},onPageScroll: function () {// 页面滚动时执行},onResize: function () {// 页面尺寸变化时执行},onTabItemTap(item) {// tab 点击时执行console.log(item.index);console.log(item.pagePath);console.log(item.text);},// 事件响应函数viewTap: function () {this.setData({text: "Set some data for updating view.",},function () {// this is setData callback});},// 自由数据customData: {hi: "MINA",},
});

2.1 在页面中使用 behaviors

// my-behavior.js
module.exports = Behavior({data: {sharedText: "This is a piece of data shared between pages.",},methods: {sharedMethod: function () {this.data.sharedText === "This is a piece of data shared between pages.";},},
});

// page-a.js
var myBehavior = require("./my-behavior.js");
Page({behaviors: [myBehavior],onLoad: function () {this.data.sharedText === "This is a piece of data shared between pages.";},
});

3. 注册组件

Component 构造器的主要区别是：方法需要放在 methods: { } 里面。

Component({data: {text: "This is page data.",},methods: {onLoad: function (options) {// 页面创建时执行},onPullDownRefresh: function () {// 下拉刷新时执行},// 事件响应函数viewTap: function () {// ...},},
});

4. 生命周期

onReady,onHide,onShow,onUnload

5. 页面路由

框架以栈的形式维护了当前的所有页面。

打开新页面：新页面入栈，调用 API wx.navigateTo

页面重定向：当前页面出栈，新页面入栈，调用 API wx.redirectTo

页面返回：页面不断出栈，直到目标返回页，调用 API wx.navigateBack

Tab 切换：页面全部出栈，只留下新的 Tab 页面，调用 API wx.switchTab

重加载：页面全部出栈，只留下新的页面，调用 API wx.reLaunch

6. 模块化

// common.js
function sayHello(name) {console.log(`Hello ${name} !`);
}
function sayGoodbye(name) {console.log(`Goodbye ${name} !`);
}module.exports.sayHello = sayHello;
exports.sayGoodbye = sayGoodbye;

var common = require("common.js");
Page({helloMINA: function () {common.sayHello("MINA");},goodbyeMINA: function () {common.sayGoodbye("MINA");},
});

7. 数据绑定

<!--wxml-->
<view> {{message}} </view>

// page.js
Page({data: {message: "Hello MINA!",},
});

8. 列表渲染

<!--wxml-->
<view wx:for="{{array}}"> {{item}} </view>

// page.js
Page({data: {array: [1, 2, 3, 4, 5]}
})

9. 条件渲染

<!--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: 'MINA'}
})

10. 模板

<!--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'}}
})