小程序全局使用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.api

  • uView UI 框架基础u 是 uView UI 框架挂载在 Vue 原型上的全局对象(`Vue.prototype.u`)。
  • 扩展属性 :http.api.js 并没有创建新的全局变量,而是利用了 uView 已经存在的 $u 对象,在其下面新增了一个 api 属性。
  • 结果 :因为 u 是全局可用的,所以 `u.api` 也是全局可用的。

总结

这是一种典型的 Vue 插件扩展模式

  1. 定义 install 函数。
  2. 在 install 中将功能挂载到 Vue 实例或原型上(这里是挂载到 vm.$u 上)。
  3. 在主入口通过 Vue.use() 注册插件。
  4. 在组件中通过 this.$u.api.方法名() 直接调用。
相关推荐
Ming_studying6 分钟前
HTML + CSS + JavaScript实现可视化JSON工具:格式化、折叠、搜索与错误定位
javascript·css·html·json·数据可视化·web工具
Ai-_Man4 小时前
希望大家能推荐一款软件,可以直接把文心生成的代码变流程图,提高办公效率
人工智能·ai·小程序·流程图
Chengbei119 小时前
DSH渗透测试插件dsh-pentest全新升级!适配DeepSeek Harness,可视化探索链路,一键搭建轻量化AI渗透测试环境。
人工智能·web安全·网络安全·微信·小程序·系统安全·安全架构
kyriewen10 小时前
我把最常踩的8个CORS跨域报错整理了一遍——第8个去年还不存在
前端·javascript
2601_9499506312 小时前
用练题簿小程序把课件做成可以在线刷题的内容
小程序·练习·小程序推荐
NeilCarmack14 小时前
Deepseek-harness增加桌面版端序列:第 2 讲 · spawn Electron:当前进程如何“交棒“
前端·javascript·electron
一几文15 小时前
2026年上半年软考高级-系统架构设计师考试真题回顾与解析-综合知识选择题6
小程序·架构·系统架构·软考高级·软考·it证书
এ慕ོ冬℘゜17 小时前
使用 jQuery 动态渲染表格与状态切换
前端·javascript·jquery
智购科技自动售货机厂家18 小时前
2026自动售货机AI视觉识别优化:从YOLOv11n模型量化到RKNN部署的端侧推理工程实践~YH
javascript·人工智能·yolo·机器学习·计算机视觉·目标跟踪·perl