uniapp微信小程序Vue.prototype挂载全局变量,页面中无法获取

在uniapp开发过程中,各端的一些高度会有区别,为了方便,就要统一放到全局变量中。
一开始使用Vue.prototype,在h5和App中使用都没问题,但打包微信小程序测试时,发现取不到这里的值。
遂改用Vuex,在onLaunch的时候把这些值放到state里边,然后在页面中使用,就可以了。
特此记录。

// 使用Vue.prototype,在h5,App中表现OK,微信小程序页面中取不到值
uni.getSystemInfo({
	success: function(e) {
		Vue.prototype.statusBar = e.statusBarHeight
		// #ifndef MP  
		if (e.platform == 'android') {
			Vue.prototype.CustomBar = e.statusBarHeight + 50
		} else {
			Vue.prototype.CustomBar = e.statusBarHeight + 45
		}
		// #endif  

		// #ifdef MP-WEIXIN  
		let custom = wx.getMenuButtonBoundingClientRect()
		Vue.prototype.CustomBar = custom.bottom + custom.top - e.statusBarHeight
		// #endif  

		// #ifdef MP-ALIPAY  
		Vue.prototype.CustomBar = e.statusBarHeight + e.titleBarHeight
		// #endif  
	}
})

// 放到Vuex中,小程序也能正常使用了。
this.$store.commit('setCustomBar',Vue.prototype.CustomBar) 
好的,我可以回答你关于 uniapp 微信小程序多环境配置及使用的问题。 首先,多环境配置可以让你在开发过程轻松地切换不同的环境,比如开发环境、测试环境和生产环境。在 uniapp ,我们可以通过配置不同的变量来实现多环境的配置,下面是具体的步骤: 1. 在项目根目录下创建不同环境的配置文件,比如 dev.env.js、test.env.js 和 prod.env.js。 2. 在配置文件定义不同环境下的变量,比如接口地址、图片地址等。 3. 在项目引入对应的配置文件,并将变量挂载到全局的 Vue 实例上。 4. 在代码使用挂载的变量。 下面是一个示例代码: // dev.env.js module.exports = { API_BASE_URL: 'https://dev-api.example.com', IMG_BASE_URL: 'https://dev-img.example.com' } // test.env.js module.exports = { API_BASE_URL: 'https://test-api.example.com', IMG_BASE_URL: 'https://test-img.example.com' } // prod.env.js module.exports = { API_BASE_URL: 'https://api.example.com', IMG_BASE_URL: 'https://img.example.com' } // main.js import Vue from 'vue' import App from './App' import envConfig from './config/' + process.env.NODE_ENV + '.env.js' Vue.prototype.$envConfig = envConfig new Vue({ el: '#app', render: h => h(App) }) // api.js import axios from 'axios' export function getList() { return axios.get(`${this.$envConfig.API_BASE_URL}/list`) } // 在组件使用 methods: { async getList() { try { const res = await this.$http.getList() // do something with res } catch (err) { console.error(err) } } } 以上就是 uniapp 微信小程序多环境配置及使用的基本步骤,希望能对你有所帮助!
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

immocha

人生得意须尽欢

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值