一个 android 程序员的入门小程序实录（三）

逻辑层功能与使用，视图层与逻辑层间的通信机制

概要

结束上篇的梳理，我们已经知道了视图层的基本功能和使用方式，但处理逻辑还是需要逻辑层的帮助，本篇我们来梳理逻辑层的基本功能和使用方式，及视图层与逻辑层间的通信机制。

逻辑层

也叫 App Service, 小程序开发框架将所有代码打包成 JavaScript 文件，
逻辑层利用 JavaScript 引擎，处理数据并与视图层交互。因此，为了更好开发小程序，应了解一些 JavaScipt 语法。

注册程序

App() 能且仅能在 app.js 中调用一次，可监听各指定生命周期的回调。
可以在各页面调用 getApp()，获得 App 实例，但不建议私自调用生命周期函数，一般用于获取全局数据。
比如，

// index.js
const app = getApp()
console.log(app.globalData) 

app.js示例代码及调用注释

//app.js
App({
  onLaunch(options) {
    // 初始化被触发，全局就一次
  },
  onShow(options) {
    // 启动及回到前台调用
  },
  onHide() {
    // 前台进入后台
  },
  onError(msg) {
  //脚本错误或 api 调用错误
    console.log(msg)
  },
   onPageNotFound(option) {
  //小程序打开页面不存在
  },
  //全局数据
  globalData: 'I am global data'
})

场景值

模拟各运行场景，查阅文档可得，场景值 ID 及场景说明，使用小程序开发者工具可在模拟器上方的模拟操作下拉栏里选对应的场景值，小程序可以在 App 的 onLaunch 和 onShow，或wx.getLaunchOptionsSync 中利用 scene 属性获取场景值。

页面生命周期与监听函数

示例代码：

// index.js
Page({
  data: {
  //初次渲染使用的初始数据，json 格式
    text: 'This is page data.'，
    array：[{msg: '1'}, {msg: '2'}]
  },
  onLoad(options) {
    //页面加载时触发，一个页面一次。
  },
  onReady() {
    // 初次渲染后触发，一个页面一次
  },
  onShow() {
    // 切入前台显示触发
  },
  onHide() {
    // 切入后台隐藏触发
  },
  onUnload() {
    //页面跳转后触发，如redirectTo或navigateBack到其他页面时。
  },
  onPullDownRefresh() {
    // 监听下拉刷新事件
  },
  onReachBottom() {
    // 监听上拉触底事件
  },
  onShareAppMessage() {
    /*
    监听转发按钮（自定义或右上角），并自定义转发内容，只有定义了该函数，右上角按钮才会出现
    */
  },
  onPageScroll() {
    //监听页面在竖直方向滚动的距离，不要定义空方法，以免增加通信耗时
  },
  onResize() {
    //屏幕旋转时触发
  },
  ...
  })

• 下拉刷新

  • 需要在.json（app.json 或 *.json）设置enablePullDownRefresh = true
  • 调用 wx.startPullDownRefresh 直接触发下拉刷新，效果和用户手动一致
  • 调用 wx.stopPullDownRefresh 停止本页面刷新
    和 android 开发中的 SwipeRefreshLayout 的用法基本一样，但不需在 wxml 中定义，也不需要在页面上注册

• 组件事件处理函数
  常用！
  在 wxml 中定义组件时加入事件绑定，当事件触发时，执行page 中的事件处理函数

<!--index.wxml-->
<view bindtap="viewTap">click me</view>

//index.js
Page({
  viewTap() {
    console.log('view tap')
  }
})

• setData 方法
  用于将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步）。
  简单示例
  定义ChangeText，函数被触发时，调用 setData，更改数据

changeText() {
    this.setData({
      text: 'changed data'
    })
  },

• 注意事项：

1. 不要使用 this.data ！会造成数据不一致！
2. 一次数据不能超过 1024 KB！
3. setData 中属性可以不在 data 中预先定义，直接使用

页面生命周期图解

页面生命周期图解

页面路由

小程序的页面和 android activity 一样都是用栈的形式维护的，页面跳转的方式不同，页面栈有不同表现

image.png

• navigateTo, 打开新页面
• redirectTo 页面重定向
• switchTab tab 切换
• reLaunch 页面重加载
• tabbar 只有在 app.json 中定义在 tabbar中的页面有，其余页面都没有

上篇： 一个 android 程序员 入门小程序实录（二）