小程序全局使用api

使用的是Vue 插件Plugin机制通过 install方法将 API 挂载到 Vue 的原型链或实例上从而实现全局使用。具体实现方式如下1. 核心机制Vue Plugin (install)在 http.api.js中导出一个默认对象该对象包含一个 install函数。这是 Vue 官方推荐的标准插件写法。const install (Vue, vm) { // ... vm.$u.api { postLogin: (params {}) vm.$u.post(/admin/login, params), //登录接口 getKeyLogin: (params {}) vm.$u.get(/keylogin, params), //获取key }; // 将 API 挂载到 vm.$u.api 上 } export default { install }Vue: Vue 构造器。vm: 当前 Vue 实例在 uView UI 框架中通常指代this或全局上下文。2. 挂载位置vm.$u.api代码中将所有接口方法统一赋值给了vm.$u.api。 这意味着只要你能访问到this.$u你就可以通过this.$u.api.xxx()来调用接口。// 例如在页面中 this.$u.api.getKeyLogin({ uid: this.uid })3初始化main,js// main.js 示例 import Vue from vue import uView from uview-ui; import httpApi from ./common/http.api.js; // 引入这个文件 Vue.use(uView); Vue.use(httpApi); // --- 这里执行了 install 方法完成了全局挂载4. 为什么可以直接用this.$u.apiuView UI 框架基础$u 是 uView UI 框架挂载在 Vue 原型上的全局对象Vue.prototype.$u。扩展属性http.api.js 并没有创建新的全局变量而是利用了 uView 已经存在的 $u 对象在其下面新增了一个api属性。结果因为 $u 是全局可用的所以$u.api也是全局可用的。总结这是一种典型的Vue 插件扩展模式定义 install 函数。在 install 中将功能挂载到 Vue 实例或原型上这里是挂载到vm.$u上。在主入口通过Vue.use()注册插件。在组件中通过this.$u.api.方法名()直接调用。