uni-app 不要在计算属性中使用getapp().globaldata

最新推荐文章于 2024-10-10 16:30:08 发布
最新推荐文章于 2024-10-10 16:30:08 发布
阅读量491 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Ivanzn/article/details/121752014
博客提及了uni-app，但内容仅为‘rt’，未提供更多关键信息。uni-app是移动开发领域用于开发多端应用的技术。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

rt

Ivanzn
关注
uniapp vue在onload 和onshow获取不到接口返回的数据
前端程序员、项目经理、人工智能博主
10-31 9466
总所周知uniapp的接口是异步的，所以我们可以用promise await async去解决这个问题 methods:{ getDtail(){ return new Promise((resolve,reject)=>{ //接口调用的方法放在这里，成功的话调用resolve resolve(res)//res是你自己定义的返回值 }) } } 下面接口案例，仅供参考: 接下来是重点操作我们要在onShow或者onLoad方法去获取这个接口返回成功的数据 //o.
uni-app - 微信小程序中，使用 navigateTo 传递非常大的数字传参精度丢失的问题
最新发布
King Saj
04-29 492
另外，微信小程序通过 navigateTo 传参时，所有参数最终都会作为字符串拼接到 URL 上，并在目标页面的 onLoad(options) 中以字符串形式接收​。若需要恢复为大整数类型，可使用 BigInt(options.value)（注意微信小程序不支持原生 BigInt，可借助大数库）或直接以字符串形式使用即可。若必须传递大整数，官方并无明确规定，但通常建议先转为字符串处理，再在接收端解析或交由后台处理，避免精度损失和数据截断。：数据大小不受 URL 长度限制，可以传递任意长度和格式的数据；
uniapp中globaldata的使用
emma20080101的博客
12-28 1545
例如，在微信小程序中，globalData是全局唯一的，而在H5、APP等端上，每个页面都可以有自己的globalData。要设置或修改globalData中的数据，你需要在页面的生命周期函数中（例如onLoad、onShow等）使用getApp()方法获取app实例，然后通过app实例的globalData属性进行操作。你可以在需要使用全局数据的页面中直接获取和修改globalData下的数据。在uni-app中，globalData是一个全局的数据管理对象，可以在整个应用中访问和修改。
uni-app：全局变量的设置及引用（getApp().globalData）+全局方法的引用
weixin_46001736的博客
07-20 7160
uni-app：全局变量的设置及引用（getApp().globalData）
【uniapp】uniapp的globalData以及getApp()：
SunPeng的博客
05-23 1253
【uniapp】uniapp的globalData以及getApp()：
小程序和uniapp的globalData以及getApp()
热门推荐
沧笙踏歌的博客
04-14 1万+
globalData uniapp的globalData 小程序有globalData，这是一种简单的全局变量机制。这套机制在uni-app里也可以使用，并且全端通用。 以下是 App.vue 中定义globalData的相关配置： <script> export default { globalData: { text: 'text' } } </script> js中操作globalDa
在uniapp中监听globalData中的值变化，阿里外包前端面试
m0_60452134的博客
04-19 1033
四轮技术面+一轮hr面结束，学习到了不少，面试也是一个学习检测自己的过程，面试前大概复习了 一周的时间，把以前的代码看了一下，字节跳动比较注重算法，面试前刷了下leetcode和剑指offer， 也刷了些在牛客网上的面经。大概就说这些了，写代码去了~祝大家都能收获大厂offer~篇幅有限，仅展示部分内容网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）
uni-App的使用
wsxokn945的博客
11-28 769
是一个使用 Vue.js 开发所有前端应用的框架
跨平台应用开发进阶(十) ：uni-app 实现数据存储、获取和删除_uniapp 内存泄漏
2401_84447112的博客
05-04 683
项目开发过程中，需要实现数据的全局存储、获取及删除操作。可通过storageglobalData实现。四轮技术面+一轮hr面结束，学习到了不少，面试也是一个学习检测自己的过程，面试前大概复习了 一周的时间，把以前的代码看了一下，字节跳动比较注重算法，面试前刷了下leetcode和剑指offer， 也刷了些在牛客网上的面经。大概就说这些了，写代码去了~祝大家都能收获大厂offer~开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】篇幅有限，仅展示部分内容。
uni-app面试题
admin12345671的博客
04-16 6512
入口文件，主要作用是初始化vue实例、定义全局组件、使用需要的插件如 vuex，注意uniapp无法使用vue-router，路由须在pages.json中进行配置。是uni-app的主组件，所有页面都是在App.vue下进行切换的，是页面入口文件。除此之外，应用生命周期仅可在App.vue中监听，在页面监听无效。小程序绑定某个变量的值为元素属性时，会用两个大括号{{}}括起来，如果不加括号，为被认为是字符串。vue和uni-app动态绑定一个变量的值为元素的某个属性的时候，会在属性前面加上冒号":";
uniapp全局状态管理getApp()
weixin_68658847的博客
10-10 1100
uniapp全局状态管理getApp()
uniapp webview全屏
weixin_43315721的博客
08-12 2818
// #ifdef APP-PLUS var currentWebview = this.$scope.$getAppWebview(); //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效，非v3编译模式使用this.$mp.page.$getAppWebview() setTimeout(function() { let wv = curr
uniapp在组件中调用getApp()为undefined
Lyn1421的博客
08-17 1964
我理解可能是这个组件在首页，globalData还未初始化完整我就就调用了。
在uniapp中监听globalData中的值变化
web全栈开发的博客
08-11 6596
小程序里怎么去监听app.js里的globalData数据变化呢 1、先再app.vue 中定义一个全局数据对象globalData，再对象里定义好相应的属性与属性值 globalData：{ count:0 }, methods:{ watch:function(method,istr){ var obj=this.globalData console.log(obj) Object.defineProperty(obj,istr,{ configurable:true
uni-app运行到H5正常，但运行到小程序不正常、报错总结
菜菜的博客
09-01 9576
1.v-for中，非 h5 平台 :key 不支持表达式 index+'_' 同级多个 v-for 时 key 的值是不允许重复的，key 的绑定是不支持表达式的，需要按照以下方式处理。 // 错误的写法 <view v-for="(item, index) in list1" :key="index">{{item}}</view> <view v-for="(it...
小程序和uniapp的getApp().globalDate.
陈新科的博客
07-30 5121
1.uni-app 在app.vue文件里面定义globalData， 在其他文件则用getApp().globalData调用 export default { globalData:{ lists:[], datainfo:{} }, }, 2.别的页面引用可以直接赋值 getlevel4() { this.$http({ url: '' }).then(res => { getApp().globalDa.
uni-app 中定义全局变量globalData注意事项
liubangbo的专栏
03-17 5350
uni-app 关于全局变量有以下描述： 小程序中有个globalData概念，可以在 App 上声明全局变量。 Vue 之前是没有这类概念的，但 uni-app 引入了globalData概念，并且在包括H5、App等平台都实现了。 在 App.vue 可以定义 globalData ，也可以使用 API 读写这个值。 globalData支持vue和nvue共享数据。 <script> export default { globalData: {
uniapp 使用app.vue中globalData全局变量的方法 绑定到页面 实时刷新
beyond513222的博客
09-21 6399
uniapp定义全局变量的方法有好几种，具体可以百度，我选择了在app.vue定义globalData的方法来定义全局变量。 比如我要定义一个isSubmit的Boolean类型变量： globalData: { isSubmit: false, }, 但是问题来了，我要在其他页面中用v-if根据这个变量值判断是否显示的时候，应该怎么用呢？ 起初，我在其他页面中也定义了相同的isSubmit变量，然后在onload()里面写：this.isSubmit =getApp().globalDat.
uniapp多个页面相同值的双向绑定
weixin_42317757的博客
11-06 545
在这个页面中，我们通过import语句引入了需要修改的页面，通过$refs访问它，并且调用了其setValue方法，将我们在当前页面中输入的值传递进去。在这个页面中，我们定义了一个名为value的变量，并且编写了一个名为setValue的方法，该方法可以接受一个参数，将其赋值给value变量。在这个文件中，我们将需要修改的页面和另一个页面都注册为组件，并且在需要修改的页面中使用了ref属性。以上就是在uniapp中实现在一个页面上修改另一个页面的值的方法。
scollViewHeight: `calc(100vh - ${getApp().globalData.navHeight2 ? getApp().globalData.navHeight2 : '44'}px - 34rpx - 50px - ${uni.$u.addUnit(uni.$u.sys().safeAreaInsets.bottom)}px )`,这样写不对应该怎么修改
03-13
<think>好的，我现在需要帮用户解决一个关于计算滚动视图高度的问题。用户提供的代码是`scollViewHeight: calc(100vh - ${getApp().globalData.navHeight2 ? getApp().globalData.navHeight2 : '44'}px - 34rpx - 50px - ${uni.$u.addUnit(uni.$u.sys().safeAreaInsets.bottom)}px )`，但发现写法有问题，需要修改。首先，我要仔细分析哪里出错了。 首先，用户可能在uni-app中使用这段代码，因为涉及到uni.$u这样的方法。calc函数里的单位混合使用需要注意，比如px和rpx是否能直接混用。同时，getApp().globalData.navHeight2可能是一个数值，但直接拼接单位px可能有问题，比如如果navHeight2是数字，直接加px的话，如果值为undefined，会变成'44pxpx'吗？需要检查三元运算符的写法是否正确。 另外，uni.$u.addUnit的作用可能是添加单位，但这里直接在字符串模板中使用，是否会导致单位重复添加？比如，如果sys().safeAreaInsets.bottom的值是50，addUnit可能返回'50px'，然后用户又拼接了px，导致结果为'50pxpx'，这肯定是错误的。 接下来，我需要检查各个部分的单位处理是否正确。例如，34rpx是否需要转换成px，因为calc中的运算需要统一单位。uni-app中的rpx在H5环境下会自动转换，但在小程序中可能需要处理。不过calc在小程序中可能不支持rpx，所以可能需要将rpx转换为px。 另外，代码中的括号和字符串拼接是否正确。用户使用了模板字符串，但可能漏掉了某些闭合括号，导致变量替换不正确。例如，三元表达式是否正确闭合，每个变量是否都正确处理了单位。 还需要考虑不同平台的兼容性，比如H5和小程序对calc的支持情况，以及安全区高度的获取方式是否正确。例如，uni.$u.sys().safeAreaInsets.bottom是否正确获取了底部安全区域的高度，并且addUnit是否适用于当前平台。 最后，建议用户统一所有单位为px，或者在需要的地方正确转换rpx到px。同时，确保每个变量都正确添加了单位，避免重复添加。可能还需要使用uni.upx2px方法将rpx转换为px，特别是在需要精确计算的场景中。此外，处理可能的undefined值，设置合理的默认值，避免calc中出现无效的表达式。</think>#### 一、问题解析 这段代码主要存在 **单位混用、变量拼接、平台兼容性** 三个核心问题。以下是逐项修正方案： --- #### 二、修正方案 ```javascript scrollViewHeight: `calc(100vh - ${getApp().globalData.navHeight2 || 44}px - ${uni.upx2px(34)}px - 50px - ${uni.$u.sys().safeAreaInsets?.bottom || 0}px)` ``` --- #### 三、分步骤说明 1. **单位统一化处理** ```javascript // 错误示例：直接使用rpx - 34rpx // 无法在calc中直接运算 // 正确做法：将rpx转换为px - ${uni.upx2px(34)}px // 输出：17px（以750rpx=100%宽度换算） ``` *注：uni.upx2px() 是uni-app官方提供的rpx转px方法* 2. **安全获取动态高度** ```javascript // 错误示例：直接拼接未处理的安全区域 ${uni.$u.addUnit(uni.$u.sys().safeAreaInsets.bottom)} // 正确做法（分两步）： // 1. 获取安全区域数值（带默认值） const safeBottom = uni.$u.sys().safeAreaInsets?.bottom || 0; // 2. 直接使用数值（已通过uni.upx2px处理过的情况不需要再addUnit） ${safeBottom}px ``` 3. **变量有效性处理** ```javascript // 错误示例：三元表达式单位重复 ${getApp().globalData.navHeight2 ? ... : '44'}px // 正确做法：用逻辑或短路写法 ${getApp().globalData.navHeight2 || 44}px ``` --- #### 四、平台适配建议 1. **H5端特殊处理** ```javascript // 添加viewport单位兼容 if (process.env.VUE_APP_PLATFORM === 'h5') { height = height.replace(/px/g, 'px + '); } ``` 2. **小程序端注意事项** ```javascript // 需要使用js计算模式（部分小程序不支持模板字符串中的动态calc） computed: { scrollHeight() { const navH = getApp().globalData.navHeight2 || 44; const bottom = uni.$u.sys().safeAreaInsets?.bottom || 0; return `calc(100vh - ${navH + 50 + bottom}px - ${uni.upx2px(34)}px)`; } } ``` --- #### 五、完整优化代码 ```javascript computed: { scrollViewHeight() { const navHeight = getApp().globalData.navHeight2 || 44; // 导航栏高度 const rpx34 = uni.upx2px(34); // 转换34rpx const safeBottom = uni.$u.sys().safeAreaInsets?.bottom || 0; // 安全区域 // H5适配（使用vh单位） if (process.env.VUE_APP_PLATFORM === 'h5') { return `calc(100vh - ${navHeight}px - ${rpx34}px - 50px - ${safeBottom}px)`; } // 小程序端（使用100%高度） else { return `calc(100% - ${navHeight + 50 + safeBottom}px - ${rpx34}px)`; } } } ``` --- #### 六、调试技巧 ```javascript // 在onReady生命周期中添加调试 onReady() { console.log('最终计算值:', this.scrollViewHeight); // 示例输出：calc(100vh - 88px - 17px - 50px - 34px) } ``` --- #### 七、扩展方案 对于复杂布局场景，推荐使用 **css变量+js动态更新** 方案： ```css /* 全局样式 */ :root { --nav-height: 44px; --safe-bottom: 0px; } ``` ```javascript // 在App.vue中动态更新 onLaunch() { uni.$on('safeAreaChange', (res) => { document.documentElement.style.setProperty('--safe-bottom', `${res.bottom}px`); }); } ``` ```css /* 最终使用 */ scroll-view { height: calc(100vh - var(--nav-height) - var(--safe-bottom)); } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值