uniapp h5兼容小程序问题
1. 模板语法中不支持ES6的模板字符串写法
如下
<li :class= "`${currentStepNum==item.stepNum?‘step-active‘:‘‘}${item.stepNum==stepList.length?‘ step-end‘:‘‘}${item.stepNum<currentStepNum?‘step-visited‘:‘‘}`" v-for="(item,index) in stepList" :id="‘scrollDom‘+(index+1)">
- 解决方案：
将动态添加改成 多重嵌套
<li :class="(currentStepNum == item.stepNum) ? ‘step-active‘:((item.stepNum == stepList.length) ? ‘ step-end‘:((item.stepNum < currentStepNum) ? ‘step-visited‘:‘‘))" v-for="(item,index) in stepList" :id="‘scrollDom‘+(index+1)">
2.template模板语法中不能调用未在方法method定义的函数
- 案例：
uni-goods-specification 组件报错
- 错误定位:
<view class="stockNum">库存：{{stockAmount!=‘‘?stockAmount:stockNum}} <text>{{typeof(stockNum)==‘number‘?‘‘+‘件‘:‘‘}}</text> </view>
此处typeof相当于this.typeof，会报not function
- 解决方案:
【报Bug】2.40版本以上的 template内使用typeof编译到出错
https://ask.dcloud.net.cn/question/83449
把typeof放到method里 然后 在template里直接调用定义method
//兼容小程序端 typeof方法重写
typeOf(){
var type = typeof(this.stockNum)
return type;
}
3.计算属性必须加上setter方法，尽管不使用
pages/goods/cartList 页面报错
https://blog.csdn.net/qq_35176916/article/details/86555080
出现上述报错是因为某处代码对checkall的值进行了动态改变，所以需要给该动态属性添加set方法即可
- 问题定位：
- 解决方案：计算属性需要用标准写法，就算没使用setter也需写上set方法
totalAllPrice:{
get(){
let price = 0 // 加入选择框以后的计算总价
if(!this.isCartEdit) {
this.cartListInfo.forEach((v,k) => {
if(this.ids.indexOf(v.id) !== -1) {
price += parseInt(v.speciesCount)*parseFloat(v.dailyPrice)
}})
return price; }
else { return price; }
},
set(){
}
}
4.不允许使用windows、document对象、H5的缓存语法
5. 不允许使用 uni-input uni-view等样式选择器来编辑样式，因为这些是只有H5才会编译出来的标签
- 案例：
此样式只在H5有效，在小程序是无效的，必须改为 input标签选择器
input {
width: 100px;
background-color: #f5f5f5;
height: 27px;
padding: 4px 6px;
font-size: 14px;
}
6.this.$parent 在微信与H5中使用的区别
- 官方文档
https://uniapp.dcloud.net.cn/use?id=实例属性
- 官方给出的兼容方案
//#ifdef H5
this.$parent.$parent.isVisible = false;
//#endif
//#ifdef MP
this.$parent.isVisible = false;
//#endif
- 实际兼容方案（实际上h5支持
this.$parent,小程序不支持）
//#ifdef H5
this.$parent.isVisible = false;
//#endif
7.不允许使用在<text>标签使用<span>标签，在wx小程序不支持
- 案例：
8不允许使用v-show，不能在小程序使用，所有v-show都改用v-if
- 案例：
9.图片路径是以下这种形式赋值的时候，不能用相对路径，如下，toTop图片能访问，empty不能
10. v-for写法规范如下 v-for="(item,index) in imgSrcList" :key="index" 必须要有 :key值，并将key值的index带进for循环里。
- 正确案例：
<view class="img" v-for="(item,index) in imgSrcList" v-if="imgSrcList.length > 0" :key="index">
<image src="../../static/img/refund/delete.png" @click="deleteCurrentImg(item,index)" v-if="getRefundStatus(refundStatus)" class="delete-icon"></image>
<image :src="item.fileUrl" class="img-src" @click="previewImage(index)"></image>
</view>
- 错误案例1：（缺少key）
<view class="img" v-for="(item,index) in imgSrcList" v-if="imgSrcList.length > 0" ">
<image src="../../static/img/refund/delete.png" @click="deleteCurrentImg(item,index)" v-if="getRefundStatus(refundStatus)" class="delete-icon"></image>
<image :src="item.fileUrl" class="img-src" @click="previewImage(index)"></image>
</view>
- 错误案例2：（v-for使用了表达式、key使用了表达式）
- 错误案例3：缺少(item,index)
<view class="img" v-for="item in imgSrcList" v-if="imgSrcList.length > 0" :key=‘index‘>
<image src="../../static/img/refund/delete.png" @click="deleteCurrentImg(item,index)" v-if="getRefundStatus(refundStatus)" class="delete-icon"></image>
<image :src="item.fileUrl" class="img-src" @click="previewImage(index)"></image>
</view>
11.使用uni.createSelectorQuery(‘#id’)时，对应的id不能为纯数字，需要为字母+数字的形式才能正常获取到对应的节点
//定义id
<view v-else class="common-item item-video" :id=‘"a"+item.id‘>
//mounted中获取到该节点信息
setTimeout(()=>{ uni.createSelectorQuery().in(this).select(‘#a224588100084314112‘).boundingClientRect(data => {
// console.log(data.height)
console.log(data)
}).exec();
},2000)
12.uniapp官网已经不推荐使用upx单位了，如果我们后面遇到可以将它改为rpx, 不用考虑适配的的元素可以用px
https://uniapp.dcloud.io/frame?id=尺寸单位
13.模板语法需规范化，除了普通表达式之外其他原生方法不能写道模板语法里，需用过滤器或者计算属性代替(ps:部分hbuilder版本才会出现此问题)
- 错误：
{{item.pulishTime.substring(0,10)}}
- 正确：
{{pulishTime(item.pulishTime)}}
//封装成计算属性
computed: {
pulishTime() {
return function(item) {
return item.slice(3)
}
}