uni-app 【报Bug】通过Vue.prototype挂载的全局变量在微信小程序里面取不到

uni-app 【报Bug】通过Vue.prototype挂载的全局变量在微信小程序里面取不到

操作步骤：

  • 在main.js中使用vue.prototype注册全局变量，在页面中直接给标签赋值，在微信小程序中取不到注册的全局变量

预期结果：

  • 能取到在main.js中注册的全局变量

实际结果：

  • 实际在微信小程序中取不到

bug描述：

通过Vue.prototype挂载的全局变量在微信小程序里面取不到

main.js注册全局变量代码：

import Vue from 'vue'  
import App from './App'  
import { staticUrl } from '@/common/config.js'  

Vue.config.productionTip = false  
Vue.prototype.$staticUrl = staticUrl;  

App.mpType = 'app'  

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

vue代码：

<image style="width: 80upx;" :src="$staticUrl + '/icon/wechar.png'" mode="widthFix"></image>

打包成微信小程序后控制台查看的代码：

<image style="width:40px;" src="undefined/icon/wechar.png" mode="widthFix" class="data-v-35463111"></image>

通过页面data中绑定和存储在vuex中都是可用的，唯独通过prototype注册的在打包成小程序后取不到值


### 表格
| 项目 | 信息 |
| --- | --- |
| 产品分类 | uniapp/小程序/微信 |
| PC开发环境操作系统 | Windows |
| PC开发环境操作系统版本号 | 12.0.17763 |
| HBuilderX类型 | 正式 |
| HBuilderX版本号 | 3.1.18 |
| 第三方开发者工具版本号 | 1.05.2106300 |
| 基础库版本号 | 2.18.0 |
| 项目创建方式 | HBuilderX |

更多关于uni-app 【报Bug】通过Vue.prototype挂载的全局变量在微信小程序里面取不到的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

你是不是还有一个贴，我在那个贴回复你了。全局挂载的属性在小程序无法使用的，但是里面的方法可以。比如你有个全局的方法，是可以直接@tap="$api.function"用的，但是$api.abc这种不行

更多关于uni-app 【报Bug】通过Vue.prototype挂载的全局变量在微信小程序里面取不到的实战教程也可以访问 https://www.itying.com/category-93-b0.html


可以写个dome 或者贴个代码看下吗

import baseConfig from ‘@/baseConfig.js’; Vue.prototype.$imgBaseUrl = baseConfig.reqUrl;
=》代码 <image :src="$imgBaseUrl + item" mode=“scaleToFill” style=“width: 100%;height: 100%;” @click=“previewImage(item)”></image> =》实际效果 <image :src=“undefined+ item” mode=“scaleToFill” style=“width: 100%;height: 100%;” @click=“previewImage(item)”></image> 在小程序里这么用行不通，太坑了

那你别挂原型上呗，放到getApp()全局实例里面

这是因为在微信小程序环境中，Vue.prototype 挂载的全局变量在模板渲染时无法直接访问。微信小程序的模板编译机制与浏览器环境不同，它不支持在模板中直接访问 Vue 原型上的属性。

解决方案：

  1. 使用计算属性：在页面的 computed 中定义变量，返回 this.$staticUrl，模板中引用计算属性。

    computed: {
  staticUrl() {
    return this.$staticUrl;
  }
}

    模板改为：

    <image :src="staticUrl + '/icon/wechar.png'" mode="widthFix"></image>

  2. 在 onLoad 或 onShow 生命周期中赋值：将全局变量存储到页面的 data 中。

    data() {
  return {
    staticUrl: ''
  };
},
onLoad() {
  this.staticUrl = this.$staticUrl;
}
回到顶部