uniapp h5兼容小程序问题

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)
				}
            }

uniapp h5兼容小程序问题

原文：https://www.cnblogs.com/U-ndefined/p/14633222.html