【uniapp开发小程序】封装一个公共接口,每次点击不同页面时都会调用

在uni-app中封装一个公共接口,让每次点击不同页面时都会调用,您可以使用uni-app的全局混入(mixin)功能来实现

1.创建一个全局混入文件 mixin.js,并在其中定义一个公共方法:

// mixin.js

c 复制代码
export default {
  methods: {
    commonApi() {
      // 封装的公共接口逻辑
      console.log("调用了公共接口");
    }
  }
};

2.在 main.js 文件中全局引入混入文件:

// main.js

c 复制代码
import Vue from 'vue'
import App from './App'
import mixin from './mixin'

Vue.mixin(mixin)

const app = new Vue({
  ...App
})
app.$mount()

3.在需要调用公共接口的页面中,直接使用 this.commonApi() 来调用公共方法。

举例:在 pages/index/index.vue 页面中:

c 复制代码
<template>
  <view>
    <button @click="callCommonApi">调用公共接口</button>
  </view>
</template>

<script>
export default {
	onshow(){
		this.commonApi(); // 调用公共接口
	}
  methods: {
    callCommonApi() {
      this.commonApi(); // 调用公共接口
    }
  }
};
</script>

在上述代码中,我们首先在 mixin.js 文件中定义了一个公共方法 commonApi,用于封装公共接口的逻辑。然后在 main.js 文件中使用 Vue.mixin() 方法将混入文件引入到全局中。

通过这种方式,每次点击不同页面时,都可以在页面中调用 this.commonApi() 来触发公共接口的逻辑。

相关推荐
qq_424409193 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding3 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
2501_915918413 小时前
Fiddler中文版全面评测:功能亮点、使用场景与中文网资源整合指南
android·ios·小程序·https·uni-app·iphone·webview
布兰妮甜3 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui
SevgiliD3 小时前
el-button传入icon用法可能会出现的问题
前端·javascript·vue.js
我在北京coding3 小时前
Element-Plus-全局自动引入图标组件,无需每次import
前端·javascript·vue.js
鱼 空3 小时前
解决el-table右下角被挡住部分
javascript·vue.js·elementui
说私域4 小时前
从品牌附庸到自我表达:定制开发开源AI智能名片S2B2C商城小程序赋能下的营销变革
人工智能·小程序
難釋懷4 小时前
第一个小程序
小程序
春哥的研究所4 小时前
可视化DIY小程序工具!开源拖拽式源码系统,自由搭建,完整的源代码包分享
小程序·开源·开源拖拽式源码系统·开源拖拽式源码·开源拖拽式系统