uni-app 中通过 Vue.prototype 挂载的全局方法和变量在微信小程序中获取不到的解决办法

新人刚接触 uni-app 和微信小程序开发，发现按照官方文档在 main.js 中通过 Vue.prototype 挂载的全局方法在微信小程序中报错。

比如，我使用了 luch-request 库，如果通过全局引用的方式：

main.js

import Request from '@/utils/luch-request/index.js'
Vue.prototype.$http = http

pages/index.vue

methods: {
	getPosts(){
		this.$http.get('posts')
		.then(res => {
			//console.log(res.data.data)
			this.posts = res.data.data
		}).catch(err => {

		})
	}
}

上述代码编译到微信小程序中，就会报 get 方法不存在，实际上是没能正确获取到全局方法 $http。

解决办法是改成局部引用的方式：

pages/index.vue

import Request from '@/utils/luch-request/index.js'
const http = new Request()

export default {
	data() {
		return {
			title: 'Hello',
			posts:[],
		}
	},
	onLoad() {
		this.getPosts()
	},
	methods: {
		getPosts(){
			http.get('posts')
			.then(res => {
				//console.log(res.data.data)
				this.posts = res.data.data
			}).catch(err => {

			})
		}
	}
}

当然，如果你不想每次使用都局部引用一次的话，也可以按下面方式实现全局方法：

如果是选项式API，您可以使用app.config.globalProperties进行替换：

// 之前 - Vue 2  
Vue.prototype.$http = () => {};  
// 之后 - Vue 3  
const app = createApp(/* ... */);  
app.config.globalProperties.$http = () => {};

如果是组合式API，您可以使用provide/inject：

// main.js  
import { createApp } from 'vue'  
const app = createApp(/* ... */);  
app.provide('message', 'hello');  

// 组件中  
import { inject } from 'vue';  
export default {  
setup() {  
console.log(inject('message')); // 'hello'  
}  
}

附：官方的uni-app 全局变量的几种实现方式（转）解决方案。