1.小程序报错报类似Bad value with message的错误
模板里面如果存在这样的语法,则会报错Bad value with message；然而||''和||[]则不会报错;如下所示；
<u-cell-item :arrow="false" title="报废年限">{{
data.scrapYear||{}
}}</u-cell-item>
2.如果后端的接口数据返回null，则微信小程序会渲染成null ；h5端则不会；
解决方法：建议java后端加个拦截器统一处理下null
3.全局挂在的属性，在模板中不可用；
建议使用计算属性来访问全局变量；
Vue.prototype.$file = fileUrl
4.微信小程序报错Converting circular structure to JSON
Converting circular structure to JSON --> starting at object with constructor 'Object' --- property 'order' closes the circle
原因：排查循环依赖的问题,如下注释的代码即为循环依赖
this.detailData = data.order;//循环引用
// this.detailData.order = data.order;//原来的：循环引用
this.detailData.order =JSON.parse(JSON.stringify(data.order)) ;//修复后的，使用单层深拷贝解决循环引用问题
5.uview不能使用@tap
6.包体积瘦身，单包不能超过2M，总包不能超过20M
- uni.scss文件一定不能引用过多的样式，否则所有编译成wxss都将会存在引入的样式，最突出的
体积大问题 - @/static下的静态文件，如果只是分包下用到，也可以放到分包下的static
- 按照业务分包
7.@tap无法动态传参
如下所示，方法toWorkOrderDetail接受不到order的入参
<view
class="card"
v-for="order inlist"
:key="order.id"
@tap="toWorkOrderDetail(order)"
>
</view>
解决如下
<view class="card" v-for="order in list" :key="order.id"
@click="toWorkOrderDetail($event)" :data-row="order">
</view>
toWorkOrderDetail(e) {
const {
id
} = e.currentTarget.dataset.row
uni.navigateTo({
url: `/******/detail?point_id=${pointId}`,
});
},
8. 无法使用v-on=“ l i s t e n e r s " 和 v − b i n d = " listeners"和v-bind=" listeners"和v−bind="attrs”
这个是通病，截至2023年uniapp都不支持该语法，切记封装组件的时候不要使用该语法鸡肋的是我当时热更新没有问题，第二次运行的时候就提示不支持了，然后回去重头写组件
9.uniapp动态插槽，小程序不支持动态插槽报错
子组件
<template>
<!-- #ifdef MP-WEIXIN -->
<!-- 小程序没有作用域插槽 -->
<slot name="{{item.slot}}" ></slot>
<!-- #ifndef MP-WEIXIN -->
<slot :name="item.slot" :formItem="item"></slot>
<!-- #endif -->
</template>
父组件切记小程序不要用template，否则渲染不出来
<!-- #ifdef MP-WEIXIN -->
<view v-slot:deviceNo>
<u-icon name="scan" size="38" @click="scan"></u-icon>
</view>
<!-- #endif -->
<!-- #ifndef MP-WEIXIN -->
<template v-slot:deviceNo>
<u-icon name="scan" size="38" @click="scan"></u-icon>
</template>
<!-- #endif -->
10 vue3中使用createSelectorQuery.in(this)获取元素的时候报错TypeError: Cannot read property ‘route’ of undefined的解决方法
此问题只有小程序才会出现，h5不会出现
/**
* 获取dom节点的宽高位置信息
* 示例：uni.$yw.getDomClientRect('.yw-fixed-button')
* @param {选择器字符串} select
* @returns
*/
export function getDomClientRect(select) {
return new Promise((resolve, reject) => {
const instance = getCurrentInstance()
uni.createSelectorQuery().in(instance).select(select).boundingClientRect(res => {
resolve(res)
}).exec()
})
}
10.uniapp编译到微信小程序 的时候，会多一层以组件命名的标签
这是因为自定义组件渲染差异导致，如下为官网说明
可以配置virtualHost来配置
export default {
options: {
virtualHost: true,
},
}
11. computed在微信小程序端不管是页面还是组件，默认会自动执行一次，而其它端则无此问题
切记多端兼容的时候不要在computed执行数组的push等操作,否则数据会重复；文章来源：https://www.toymoban.com/news/detail-725375.html
/**卡片数组 */
const carList = computed(() => {
const _tmp = [
{ label: '品牌', key: 'modelName', },
{ label: '所在仓库', key: 'stashStr' },
]
/**如果是不是采购的话就加上库存,同时设最大值 */
/**注意事项：一定要加上type.value 的判断，不然微信小程序会先会执行2遍，这样就push进去了 */
/**因为小程序computed会自动执行一次，然后onLoad里面给type赋值的时候又执行一次，这个是uniapp这个框架一直没有解决的编译BUG */
if (type.value && (Number(type.value) != ENUMS.GOODS.APPLY_TYPE.BUY.VALUE)) {
_tmp.push({ label: '库存', key: 'inventoryNumber' })
maxKey.value = 'inventoryNumber'
}
return _tmp
})
12在ios真机中如果使用scrollView组件后，子元素如果使用fixed定位的话，此时fixed将会将对于scrollView定位；
解决方法：
是因为在ios中会自动加上 -webkit-overflow-scrolling:touch，可在scrollView中的calss中取消掉它文章来源地址https://www.toymoban.com/news/detail-725375.html
.uni-scroll-view {
-webkit-overflow-scrolling: auto;
}
到了这里，关于uniapp编译成微信小程序中遇到的兼容性问题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
