API

$mp

页面的根 VM 上在页面初始化时保存小程序的相关信息，VM 树上所有的 VM 都可以通过 this.$mp 获取

  1. {
  2.   platform: 'wechat',   // 平台，目前有 微信:'wechat', 支付宝：'alipay',百度智能小程序：'swan'
  3.   page: Page,           // 小程序页面实例 
  4.   query: { id: 100 },   // onLoad 传入的页面参数对象
  5.   options: { id: 100 }, // 与 query 是同一个对象（别名）
  6. }
  1. {
  2.   platform: 'wechat',   
  3.   app: App,             // 小程序程序实例，@0.2.2+，注意，@0.2.1-依然定义为 page
  4.   query: { id: 100 },   
  5.   options: { id: 100 }, 
  6. }

小程序 API

以微信为例，微信小程序 API 可通过全局对象 wx 直接调用如 wx.api，alipay 为 my，百度智能小程序为 swan。

如果需要做同构，那么 api 的调用需要注意平台区分。

比如我们需要使用小程序原生的网络接口 request，但是在不同的平台下命名有所不同。

我们可以手动利用 vue mixin 或其他方式统一 api

  1. export default {
  2.   methods: {
  3.     GET (api, callback) {
  4.       let { platform } = this.$mp || {},
  5.         request = ()=>{}
  6.       switch(platform) {
  7.         case 'wechat':
  8.           request = wx && wx.request
  9.         break;
  10.         case 'alipay':
  11.           request = my && my.httpRequest
  12.         break;
  13.         case 'swan':
  14.           request = swan && swan.request
  15.         break;
  16.         default:
  17.         break;
  18.       }
  19.       request && request({
  20.         url: api,
  21.         success: callback
  22.       })
  23.     }
  24.   }
  25. }

同样具有全局性质的还有全局方法 getApp() 等，类似的全局对象均可直接访问

globalData

由于小程序的各个页面间都是相对独立的，官方提供了 globalData 用于储存全局数据

megalo 将 globalData 改造成了类似于 vue data 的构建形式，可以是对象，也可以说执行方法

  1. // object
  2. {
  3.   globalData: 'I am global data'
  4. }
  6. {
  7.   globalData: {
  8.     msg: 'I am global data'
  9.   }
  10. }
  12. // funtion
  13. {
  14.   globalData: ()=>{
  15.     return {
  16.       mp: this.$mp
  17.     }
  18.   }
  19. }