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

小跳不会Coding2024-02-04 19:04

在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() 来触发公共接口的逻辑。