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