由上篇博客可以了解小程序运行的一个大体过程,首先app.json进行配置路由和基本的样式调整,其次可以在对应的路由指向的目录下添加 .wxml .wxss .js 这三种文件,只要指定一个路径框架就会对他们自行加载

接下来我们开始了解小程序的一些细节问题:

注册程序

在根目录下有app.js这个文件,里面涉及了小程序整体的一些事件响应,代码如下:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

App({
  //当小程序初始化完成时，会触发onLaunch（全局只触发一次）
  onLaunch: function () {
    console.log('App Launch')
  },
  //当小程序启动，或从后台进入前台显示，会触发onShow
  onShow: function () {
    console.log('App Show')
  },
  //当小程序从前台进入后台，会触发onHide
  onHide: function () {
    console.log('App Hide')
  },
  //以及其他的自定义的方法
  globalData: {
    hasLogin: false
  }
})

这里的前后台转换的前提都是系统没有将小程序销毁,要注意一个概念进入后台不意味着资源被销毁,只有进入后台有一段时间或者系统内存不足的时候小程序才会被回收资源

App() 这个函数是注册小程序的函数,我们进行的操作都是在它里面运行的

App.prototype.getCurrentPage()

getCurrentPage()函数用户获取当前页面的实例。

getApp()

我们提供了全局的getApp()函数，可以获取到小程序实例。

1
2
3

// other.js
var appInstance = getApp()
console.log(appInstance.globalData) // I am global data
注意:

App()必须在app.js中注册，且不能注册多个。

不要在定义于App()内的函数中调用getApp()，使用this就可以拿到app实例。

不要在onLaunch的时候调用getCurrentPage()，此时page还没有生成。

通过getApp获取实例之后，不要私自调用生命周期函数。

注册页面

上篇博客的例子中我们也运用到了怎么对我们要构建的页面进行js操作,这里用到了Page()方法,里面的结果真的和Vue很像,简直就是它的简化版,这里给出了一些api

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

//index.js
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.
    },
    // Event handler.
    viewTap: function() {
        this.setData({
            text: 'Set some data for updating view.'
        })
    }
})