小程序实战视频课：微信小程序开发全案精讲
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

1.4 微信小程序逻辑层

视频课程

微信小程序逻辑层

小程序开发框架的逻辑层是用JavaScript编写的。逻辑层将数据进行处理后发送给视图层，同时接收视图层的事件反馈。编写过程中，在JavaScript的基础上做了一些扩展。

① 增加App 和Page 方法，进行程序和页面的注册。

② 增加getApp 和getCurrentPages 方法，分别用来获取App 实例和当前页面栈。

③ 提供丰富的API，如微信用户数据、扫一扫、支付等微信特有功能。

④ 每个页面有独立的作用域，并提供模块化功能。

⑤ 由于框架并非运行在浏览器中，所以JavaScript 在Web 中的一些功能会无法使用，如document和window 等。

⑥ 开发者编写的所有代码最终将会打包成一个JavaScript文件，并在小程序启动时运行，直到小程序销毁。类似ServiceWorker，所以逻辑层也称为App Service。

1.4.1 App()注册程序

函数App() 用来注册一个小程序。接收一个object 参数，其负责指定小程序的生命周期函数等。相关的生命周期函数包括onLaunch监听小程序初始化、onShow监听小程序显示、onHide监听小程序隐藏和onError错误监听函数，示例代码如下：

    App({
      onLaunch: function() {
        // Do something initial when launch.
      },
      onShow: function() {
          // Do something when show.
      },
      onHide: function() {
          // Do something when hide.
      },
      onError: function(msg) {
        console.log(msg)
      },
      globalData: 'I am global data'
    })

注意：App() 必须在app..js 中注册，且不能注册多个；不要在定义于App() 内的函数中调用getApp()，使用this 就可以获取app实例；不要在运行onLaunch 时调用getCurrentPage()，此时page 还没有生成；通过getApp() 获取实例后，不要私自调用生命周期函数。

1.4.2 Page()注册页面

函数Page() 用来注册一个页面。接收一个object 参数，其负责指定页面的初始数据、生命周期函数和事件处理函数等。相关的生命周期函数包括onLoad监听页面加载、onReady监听页面初次渲染完成状态、onShow监听页面显示、onHide监听页面隐藏和onUnload监听页面卸载，示例代码如下：

    Page({
      data: {
        text: "This is page data."
      },
      onLoad: function(options) {
        // Do some initialize when page load.
      },
      onReady: function() {
        // Do something when page ready.
      },
      onShow: function() {
        // Do something when page show.
      },
      onHide: function() {
        // Do something when page hide.
      },
      onUnload: function() {
        // Do something when page close.
      },
      onPullDownRefresh: function() {
        // Do something when pull down.
      },
      onReachBottom: function() {
        // Do something when page reach bottom.
      },
      onShareAppMessage: function () {
        // return custom share data when user share.
      },
      // Event handler.
      viewTap: function() {
        this.setData({
          text: 'Set some data for updating view.'
        })
      },
      customData: {
        hi: 'MINA'
      }
    })
上一章目录下一章