uniapp 微信小程序无法获取Vue.prototype的值

最新推荐文章于 2024-04-24 14:52:16 发布
最新推荐文章于 2024-04-24 14:52:16 发布
阅读量4.5k 收藏 6
点赞数 11
分类专栏： uniapp 文章标签： vue.js 微信小程序 原型模式 uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42543244/article/details/121915531
版权

在使用uniapp开发的过程中，遇到了一个问题，发现在微信小程序无法去直接获取挂载在vue原型上的变量值，具体内容可看下图，解决方法也已经表明，供各位踩坑用！！！

main.js

 我在vue的原型上挂载了一个$baseUrl的变量

index.vue

在1中，直接取原型上的值  

在2中，在当前页面下，声明了一个变量baseUrl，把$baseUrl赋值给它

在3中，采用computed，return返回this.$baseUrl

在4中，采用methods定义了一个方法，同样return返回this.$baseUrl

 运行结果（左h5，右小程序）

 可以看出来，在直接获取的时候，h5是可以获取到的，小程序则是一个undefined，而使用另外三种方法，结果并无差异，至于原因，应该是生命周期的一块原因，需要去翻一下源码可知，

除了上述的三种解决办法，还有vuex等等，根据自己的业务需求来决定使用哪种方法解决，特此留笔，以供各位不要踩坑！！！

Jay丶萧邦
关注
  • 11
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
uniapp小程序封装网络请求或变量无法挂载到prototype上解决方案
weixin_51705477的博客
09-22 406
今天在使用uniapp去写微信小程序遇到一个问题，我将封装好的网络请求挂载到Vue的prototype上时运行。在网页和安卓模拟器上运行都没有问题，但是在微信小程序上运行就报错了。我打印出来发现是：undefined。
基于微信小程序的基于Vue.js的校园防疫微信小程序开发+ssm框架.rar
04-05
基于微信小程序的校园防疫微信小程序结合Vue.js前端框架和SSM框架（Spring + Spring MVC + MyBatis），致力于为校园提供一套完善的防疫管理系统，有效应对疫情风险，保障师生健康安全。该系统主要包括以下功能模块： 用户身份验证与信息注册：用户可以通过微信登录小程序，并填写个人信息进行注册，系统验证身份后，可享受相应功能，包括学生、教职工和管理人员等。 实时疫情信息展示：小程序首页展示实时疫情信息，包括校园内部疫情动态、防控措施等内容，提醒用户保持关注和警惕。 健康打卡与报备：用户每日需进行健康打卡，填写个人健康信息，并报备近期活动轨迹，系统根据用户提交的信息进行风险评估和监控。 疫情地图与轨迹追踪：用户可以查看疫情地图，了解校园内疫情分布情况，并可以追踪自己的活动轨迹，及时发现潜在风险。 防疫知识与宣传：小程序提供防疫知识科普、防护指南等内容，帮助用户增强防疫意识和知识水平，提高防护能力。 疫情预警与应急响应：系统根据用户提交的健康信息和疫情数据进行分析，实时监测潜在风险，提供预警并启动应急响应机制。 数据统计与分析：系统对用户健康信息、疫情数据等进行统计与分析，生成报表和可视化数据，为校园防疫管理提供科学依据。 通知与沟通：系统可以向用户发送疫情通知、防疫提示等信息，用户也可以通过小程序进行在线沟通和反馈。 通过以上功能的设计与实现，基于微信小程序的校园防疫微信小程序结合Vue.js前端框架和SSM框架为校园防疫工作提供了一个高效、便捷的管理平台，有助于校园内部疫情监控、预防和处置，保障师生身体健康和校园安全。
uni-app 全局变量的几种实现方式【Vuex，Vue.prototype、公共文件】【多组件传参且改变html元素状态时Vuex优先】
weixin_43343144的博客
06-13 5249
uni-app 全局变量的几种实现方式：http://ask.dcloud.net.cn/article/35021 【非常重要】对于uni-app框架在app或微信端来说,Vue.prototype和Vuex就有差别了！【在uni-app框架的app平台中，html标签中无法直接访问Vue的全局属性和方法，而Vuex却可以直接访问】 Vue.prototype.$amount = 1...
uni-app 全局变量实现的4种方式，app前端开发
m0_62289956的博客
03-18 185
小程序中可以在 App 上声明全局变量，但在 Vue 中没有，uni-app 中在 App.vue 可以定义在 globalData 属性上，也可以使用 API 读写这个值。2、建议在 Vue.prototype 上挂载的属性或方法，可以加一个统一的前缀。将一些使用频率较高的常量或者方法，直接扩展到 Vue.prototype 上，每个 Vue 对象都会“继承”下来。注意这种方式只支持多个vue页面或多个nvue页面之间公用，vue和nvue之间不公用。是目前nvue和vue共享数据的一种比较好的方式。
uni-app全局变量的4种实现方式
qq_40660283的博客
05-06 6860
uni-app 全局变量的4种实现方式
在线微信小程序作业管理系统系统 框架 微信小程序app + vue.js + php + msql 角色介绍 管理员
04-06
在线微信小程序作业管理系统系统 框架 微信小程序app + vue.js + php + msql 角色介绍 管理员 admin 123456 教师用户 qqq 123456 学生用户 xs 123456 模块介绍 管理员 登陆模块 系统首页 个人中心 学习管理 教师管理 带论文报告 分类管理 作业管理 学生作业 作业批阅 在线提问 提问回复 交流论坛 系统管理 轮播图管理 公告管理 关于我们 系统简介 退出登录 教师微信端 登录注册 系统首页 作业信息 （教师可以添加作业信息等操作） 交流论坛 我的模块 作业管理 作业批改 在线提问 提问回复 我的收藏 我要发贴 我的发帖 退出登录 学生微信端 登录注册 系统首页 作业信息 （学生可以选择作业信息操作） 交流论坛 我的模块 学生作业 作业批改 在线提问 提问回复 我的收藏 我要发贴 我的发帖 退出登录 数据库名称php62sp4，utf8mb4 CREATE TABLE `aboutus
uniapp微信小程序Vue.prototype挂载全局变量，页面中无法获取
immocha的博客
02-02 6837
在uniapp开发过程中，各端的一些高度会有区别，为了方便，就要统一放到全局变量中。 一开始使用Vue.prototype，在h5和App中使用都没问题，但打包微信小程序测试时，发现取不到这里的值。 遂改用Vuex，在onLaunch的时候把这些值放到state里边，然后在页面中使用，就可以了。 特此记录。 // 使用Vue.prototype，在h5,App中表现OK，微信小程序页面中取不到值 uni.getSystemInfo({ success: function(e) { Vue.protot
谷粒商城学习日记（21）——Vue生命周期
menxinziwen的博客
03-21 416
Vue生命周期钩子函数生命周期函数beforeCreate()created()beforeMount()mounted()beforeUpdate()updated()activateddeactivatedbeforeDestroy()destroyed()errorCaptured() ( vue2.5+ ) 钩子函数 生命周期示意图 Vue的对象创建，渲染有这完整的生命周期 代码示例 <!DOCTYPE html> <html lang="en"> <he
Vue.prototype 详解及使用
sslcsq的博客
04-23 7019
Vue.prototype 详解及使用
uniapp转微信小程序后Vue.prototype定义的全局变量在微信小程序页面无法直接访问
苛学加记事
10-24 2821
使用Vue.prototype定义的全局变量 使用uni-app开发多端应用，为了防止小程序上应用包过大同时又不影响app端的使用体验，我将一些静态资源的路径改为了Vue.prototype定义的全局变量进行拼接。 app使用/static/iconimg/+图片名称实现本地访问；小程序使用https://xxx.com/iconimg+图片名称实现网络访问。于是在main.js中对资源前缀地址使用Vue.prototype进行了全局统一管理，在app端或h5端表现都正常，但是转为小程序后，却无法直接在页面
uniapp Vue.prototype绑定属性无法在微信小程序中直接使用 报[渲染层网络层错误]
shenpapa的博客
03-07 3803
最近在做uniapp的时候发现在h5上运行正常的代码，在微信小程序上测试的时候报错了 [渲染层网络层错误] Failed to load local image resource /pages/index/undefined/images/carousel/batmanvssuperman.png the server responded with a status of 500 (HTTP/1.1 500 Internal Server Error) 查看报错发现是在main.js中给Vue的原
在线微信小程序作业管理系统系统框架 微信小程序app + vue.js + php + msql
04-06
在线微信小程序作业管理系统系统 框架 微信小程序app + vue.js + php + msql 角色介绍 管理员 admin 123456 教师用户 qqq 123456 学生用户 xs 123456 模块介绍 管理员 登陆模块 系统首页 个人中心 学习管理 教师管理 带论文报告 分类管理 作业管理 学生作业 作业批阅 在线提问 提问回复 交流论坛 系统管理 轮播图管理 公告管理 关于我们 系统简介 退出登录 教师微信端 登录注册 系统首页 作业信息 （教师可以添加作业信息等操作） 交流论坛 我的模块 作业管理 作业批改 在线提问 提问回复 我的收藏 我要发贴 我的发帖 退出登录 学生微信端 登录注册 系统首页 作业信息 （学生可以选择作业信息操作） 交流论坛 我的模块 学生作业 作业批改 在线提问 提问回复 我的收藏 我要发贴 我的发帖 退出登录 数据库名称php62sp4，utf8mb4 CREATE TABLE `aboutus
基于uniapp微信小程序电影院选座订票系统源码设计.rar
04-17
基于uniapp微信小程序电影院选座订票系统源码设计 基于uniapp微信小程序的电影院选座订票系统源码设计，是一个功能全面、操作便捷、用户体验良好的票务管理平台 功能介绍：这是一个基于微信小程序的电影院订票系统，其中买票提供了选座功能，有用户和管理员2个身份。管理员后端采用springboot+vue开发，管理员登录后台后可以管理注册用户信息，可以添加和管理电影院信息，添加和管理热门电影信息，管理论坛帖子及其评论信息，维护轮播图信息记录和电影新闻资讯信息，电影票订单信息管理及其按日/月/商品销售量统计；用户在小程序端注册登录后可以查询搜索热门电影，给自己的账户充值余额及其购买vip会员，查询电影院信息，查看热门电影信息，选择自己喜欢的电影下单选座位然后提交订单支付，如果是会员就可以享受会员优惠价，凭借购票订单就可以去兑换观看电影了，观看完毕可以对电影发布评论信息，用户还可以发布论坛帖子交流等
微信小程序基于Vue.js的校园防疫微信小程序开发+ssm.zip
04-11
SSM项目小程序“基于Vue.js的校园防疫微信小程序开发Ssm.zip”是一个结合了Spring、Spring MVC、MyBatis（SSM）框架以及Vue.js技术开发的微信小程序，旨在为高校师生提供实时的校园疫情信息与健康服务。该项目利用微信小程序的用户便利性和技术栈的综合优势，构建了一个功能全面的校园防疫管理平台。 以下是该校园防疫微信小程序的核心功能和特点： 1. **健康打卡**：学生和教职工每日通过小程序进行健康打卡，记录体温和健康状况。 2. **疫情数据报告**：实时更新校园内外的疫情数据，包括确诊病例、隔离情况等。 3. **防疫知识普及**：提供科学的防疫知识教育，帮助师生了解如何预防新冠病毒。 4. **个人防护提醒**：根据校园的具体防疫政策，向用户推送个性化的防护建议。 5. **疫情相关新闻**：汇总并展示官方发布的疫情防控相关的新闻和通知。 6. **线上咨询服务**：连接校医院或专业医生，为用户提供在线医疗咨询服务。 7. **密切接触者追踪**：利用数据分析工具，协助校方进行潜在密切接触者的追踪和管理。 8. **后台数据管理**：强大的后台系统支持管理员对疫情数据的管理和分析。 整个系统以微信小程序为前端，便于用户随时随地访问和使用；后端采用SSM框架结合Vue.js，确保了数据处理的效率和前后端的良好协作。它不仅提供了一个便利的校园防疫信息通道，还通过综合化的服务和智能化的管理，提升了师生的健康安全水平，是现代校园疫情防控的重要工具。
uniapp微信小程序实现网易云音乐
07-28
使用uniapp实现的仿网易云音乐的微信小程序，可正常在微信开发者工具中运行，音乐播放，页面展示，跳转等功能
vue报错 ‘超出最大堆栈大小‘
qingdouxiaohua的博客
04-18 257
在 Vue.js 中遇到 "超出最大堆栈大小"（Maximum call stack size exceeded）的错误通常意味着你的应用程序中有一个无限递归或者循环引用的情况。如果你在计算属性（computed properties）中引用了自己或其他计算属性，并且这些引用形成了一个闭环，那么这也可能导致堆栈溢出。如果你的组件之间通过事件（emit）和监听器（on）进行通信，并且这些事件和监听器形成了循环调用，那么也可能导致堆栈溢出。有时候，问题可能是由于使用了旧版本的库，而这些库在新版本中已经被修复。
Vue.js（自定义指令）
Luo3255069063的博客
04-18 462
【代码】Vue.js（自定义指令）
vue 实现级联选择器功能
清音的博客
04-22 470
数组包含了级联选择器的数据源，其中每个对象表示一个选项，包括。组件来实现级联选择器功能,下面是一个示例代码，演示如何使用。组件初始化级联选择器，并设置默认值为单位。对象用于指定数据结构中的属性名，以便。上，可以在初始化时选中指定的值。使用 Element UI 的。中设置初始选中值为单位。组件正确地解析数据。
前端开发攻略---封装calendar日历组件，实现日期多选。可根据您的需求任意调整，可玩性强。
最新发布
nibabaoo的博客
04-24 977
封装calendar日历组件，实现日期多选。Vue日历组件封装。Vue3封装日历组件。Vue2封装日历组件
uniapp微信小程序使用mqtt
07-09
Uniapp 是一个跨平台开发框架，可以同时开发多个平台的应用，包括微信小程序。如果你想在 Uniapp 的微信小程序中使用 MQTT 协议进行通信，可以按照以下步骤进行： 1. 在 Uniapp 项目中安装相关的 MQTT 插件或库，比如 `uni-mqtt`。可以通过 npm 或者其他方式引入。 2. 在 `main.js` 文件中引入 MQTT 插件，并配置 MQTT 连接参数。例如： ```javascript import mqtt from 'uni-mqtt'; // 配置 MQTT 连接参数 const options = { protocolVersion: 4, // MQTT 协议版本 clean: true, // 清除会话 connectTimeout: 4000, // 连接超时时间 clientId: 'your_client_id', // 客户端 ID username: 'your_username', // 用户名 password: 'your_password', // 密码 }; // 创建 MQTT 实例 const client = mqtt.connect('mqtt://your_broker_address', options); // 将 MQTT 实例挂载到 Vue 原型上，方便在组件中使用 Vue.prototype.$mqtt = client; ``` 3. 在需要使用 MQTT 的组件中，可以通过 `$mqtt` 来订阅和发布消息。例如： ```javascript // 订阅主题 this.$mqtt.subscribe('your_topic'); // 接收消息 this.$mqtt.on('message', (topic, message) => { console.log('Received message:', message.toString()); }); // 发布消息 this.$mqtt.publish('your_topic', 'Hello MQTT!'); ``` 以上是使用 Uniapp 的微信小程序中使用 MQTT 的基本步骤。具体的配置和使用方式可能会有些差异，可以根据具体的 MQTT 插件或库的文档进行参考和调整。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

Jay丶萧邦

你的鼓励将是我创作的最大动力

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

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

打赏作者

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

抵扣说明：

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

余额充值