微信小程序笔记<三>入口app.js —— 注册小程序

小程序开发框架在逻辑层使用的语言就是JavaScript，所以想玩小程序JavaScript的基本功一定要扎实。但小程序基于js做了一些修改，以方便开发者更方便的使用微信的一些功能，使得小程序更好的贴合微信使用。

小程序的 App Service 具有以下特性：

• 增加 App() 和 Page() 方法，分别用来对小程序和页面进行注册。
• 增加 getApp() 和 getCurrentPage() 方法，分别用来获取 App 实例和当前页面栈。
• 提供微信特有功能的API，如微信用户数据，扫一扫，支付等。
• 每个页面有独立的作用域，并提供模块化能力。
• 由于框架并非运行在浏览器中，所以 JavaScript 在 web 中一些能力都无法使用，如 document，window 等。

先来看看小程序的入口 —— app.js

app.js是整个小程序的入口文件，也是用来对整个小程序进行注册的文件。

App()

App() 用来注册一个小程序，一个小程序中有且只能有一个 App() 且 App() 只能在App.js中被调用。其接收一个 Object 对小程序的生命周期进行监控。

以上为官方给出的App()函数的接收Object

//app.js
let showCount = 0; let hideCount = 0;
App({
  // 初始化
  onLaunch:function(){
    console.log("打开小程序");
  },
  // 显示
  onShow:function(){
    console.log("前台显示_" + (showCount++));
  },
  // 隐藏
  onHide:function(){
    console.log("后台隐藏_" + (hideCount++));
  },
  // 错误监听
  onError:function(){
    console.log("程序异常");
  }
})

一个简单的小程序入口，后台切换调试来看一下控制器监听到的显示结果。

onLaunch, onShow 参数

onLaunch 和 onShow 均有一个参数，onHide没有参数。

App({
  onLaunch: function (obj) {
    console.log(obj); // {path: "app", scene: 1001, query: {…}}
  }, 
  onShow: function (obj) {
    console.log(obj); // {path: "app", scene: 1001, query: {…}}
  },
  onHide:function(obj){
    console.log(obj); // undefined
  }
})

调试的时候仅看到 path 、 scene 和 query 三个参数，另外四个参数需要特定场景下使用( 本人未使用过这四个参数，若有使用过的朋友谢谢留言 )。

shareTicket 在转发场景下使用。

referrerInfo 对象参数仅在以下场景中使用，referrerInfo 主要用来获取本程序外传入数据。

getApp() 

在 app.js 外获取小程序实例，看一个例子

//app.js
App({
  onLaunch: function (obj) {}, 
  onShow: function (obj) {},
  onHide:function(){},
  data:{"sayHi":"Hello World"}  // 这里定义一个全局属性
})

// -------------------------------------------------------------------------------

// index/index.js
Page({
  onLoad: function(obj) {
    console.log(getApp().data.sayHi);   // 输出 Hello World
  },
  onReady: function () {},
  onShow: function () {},
  onHide: function () {},
  onUnload: function () {},
  onPullDownRefresh: function () {},
  onReachBottom: function () {},
  onShareAppMessage: function () {}
})

使用 getApp() 是注意一下几点

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

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