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

前言

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

11. 双向绑定

<input model:value="{
   
   {value}}" />