• API
    • $mp
    • 小程序 API
    • globalData

    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. }