{{item}}
当前位置:   article > 正文

uni-app运行到H5正常,但运行到小程序不正常、报错总结

uniapp为啥h5能拿到路由传参,微信小程序拿不到this.$route.query
1.v-for中,非 h5 平台 :key 不支持表达式 index+'_'

同级多个 v-for 时 key 的值是不允许重复的,key 的绑定是不支持表达式的,需要按照以下方式处理。

  1. // 错误的写法
  2. <view v-for="(item, index) in list1" :key="index">{{item}}</view>
  3. <view v-for="(item, index) in list2" :key="index+'_'">{{item}}</view>
  4. // 正确的写法
  5. <view>
  6. <view v-for="(item, index) in list1" :key="index">{{item}}</view>
  7. </view>
  8. <view>
  9. <view v-for="(item, index) in list2" :key="index">{{item}}</view>
  10. </view>
2.onLaunch里获取不到getApp()

控制台"Cannot read property 'globalData' of undefined"解决办法:将getApp()替换成this

  1. onLaunch: function(e) {
  2. // 错误的写法
  3. getApp().globalData.uuid = this.getGuid()
  4. // 正确的写法
  5. this.globalData.uuid = this.getGuid()
  6. }
3.pages.json里有重复的path在小程序控制台会报错
解决办法:删除重复的pages配置
4.避免使用window,navigator这种浏览器特有的对象,会报undefined
5.微信分享js-sdk,及其他三方的web解决方案,在小程序不能直接正常运转
6.插槽的写法注意:
  1. // 错误的写法
  2. <view v-slot:right v-if="rightText.length">
  3. 123
  4. </view>
  5. // 正确的写法
  6. <view slot="right" v-if="rightText.length">
  7. 123
  8. </view>

以上错误的写法编译都会不通过

7.{{}}里不要写复杂的表达式,否则会出现Bad value with message
  1. // 错误的写法
  2. <text>{{(school.subject_ask || "").length > 0 ? " ": ""}}</text>
  3. // 正确的写法
  4. <text>{{school.subject_ask? " ": ""}}</text>
8.v-if里不要写复杂的表达式,否则会出现Bad value with message(同7)
  1. // 错误的写法
  2. <view v-if="v-if="(item.title || '').length > 0"">{{item.title}}</view>
  3. // 正确的写法1
  4. <view v-if="item.title">{{item.title}}</view>
  5. // 正确的写法2
  6. <view v-if="item.title.length > 0">{{item.title}}</view>

问题应该出在(item.title || '').length,其中(item.title || '')得到的结果有问题

9.绑定事件时方法里不要套方法,否则会出现Property value expected type of string but got null,编译都会不通过
  1. // 错误的写法
  2. <view @click.stop="clearDefaultSelect(getNum(orderIndex))"></view>
  3. // 正确的写法
  4. <view @click.stop="clearDefaultSelect(orderIndex)"></view>
10.uni.createSelectorQuery().select(id)获取不到节点信息

解决办法:加入in(this)

  1. // 错误的写法
  2. const view = uni.createSelectorQuery().select(id)
  3. view.boundingClientRect(res => {
  4. }).exec()
  5. // 正确的写法
  6. const view = uni.createSelectorQuery().in(this).select(id)
  7. view.boundingClientRect(res => {
  8. }).exec()
10.在引用组件时对组件设置class样式在小程序不生效,在h5正常
  1. <comp-a class="a" ></comp-a>
  2. .a{
  3. //针对.a的样式小程序不生效,h5正常
  4. background-color: #F0AD4E;
  5. }

原因:h5引用组件会渲染成uni-view标签,而小程序直接是comp-a标签,此时虽然显示设置了样式,但不会渲染出来解决办法:在子组件中设置好样式,或者用/deep/ 对子组件下的节点设置样式

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小丑西瓜9/article/detail/481392
推荐阅读
相关标签