前言

由于工作需要冶忱，首次進(jìn)行微信小程序開發(fā)，從基礎(chǔ)環(huán)境搭建到小程序發(fā)布登馒，體驗到小程序便捷的同時匙握，也踩了不少坑，在此記錄下陈轿。

1圈纺、彈窗事件穿透問題

這個問題相信很多小程序開發(fā)者都會碰到。
現(xiàn)象描述：打開一個彈窗麦射，滑動彈窗中內(nèi)容蛾娶，會影響到下層UI，導(dǎo)致下層UI跟隨滑動潜秋。
解決方式：
在標(biāo)簽中添加@touchmove.stop.prevent,如下示例：

<!-- @touchmove.stop.prevent 阻止事件穿透 -->
<view class="select-wrap" @touchmove.stop.prevent>
  ...
</view>

2蛔琅、PC端微信小程序不支持下拉刷新

建議使用ScrollView實現(xiàn)

3、PC端微信小程序不支持自定義標(biāo)題欄

image.png

若設(shè)置了自定義導(dǎo)航欄峻呛，在PC端展示會出現(xiàn)兩個導(dǎo)航欄,如下：

兩個導(dǎo)航欄

4罗售、rich-text支持富文本節(jié)點不足

不是所有的標(biāo)簽辜窑、屬性都支持，支持屬性參考：支持屬性

5莽囤、網(wǎng)絡(luò)訪問不支持http訪問

在開發(fā)模式可以通過配置暫時性的忽略以方便開發(fā)谬擦，但是在小程序發(fā)布時就必須要采用https了，并且還要在微信小程序開發(fā)者后臺【項目配置中】提前配置合法的request域名朽缎。
開發(fā)模式配置方式：
微信開發(fā)者工具 → 右側(cè)工程【詳情】→ 勾選【不校驗合法域名....】惨远，如下圖：

image.png

6、文件上傳

僅支持單文件上傳话肖，若有多文件上傳的需要自己封裝函數(shù)北秽，多次調(diào)用uni.uploadFile();

注意：上傳前先在微信小程序后臺配置下上傳的合法域名，否則是上傳不了的最筒。筆者在這里犯了次錯誤贺氓。

7、canvas頁面中的彈窗要使用cover-view

canvas在移動端運(yùn)行為作為原生組件床蜘，其層級高于小程序組件辙培，因此要保證彈窗的層級高于canvas，必須使用同為原生組件的cover-view組件.
cover-view的使用,類似小程序組件View的使用邢锯。

值得注意的是：z-index屬性對原生組件在真機(jī)上不生效扬蕊，因此顯示在Canvas上的要放在布局時要放在canvas后面；

8丹擎、在IOS端藍(lán)牙連接時手機(jī)息屏或小程序處于后臺無法進(jìn)行通信

解決方案：
方式一：保存屏幕常亮

uni.setKeepScreenOn({
    keepScreenOn:show
})

方式二：
在uniapp工程的app.vue中尾抑，監(jiān)聽onShow（顯示）和onHide（隱藏）方法
在微信小程序app.js中監(jiān)聽onAppShow()和onAppHide()

在筆者的工程中是采用兩者結(jié)合的方式，如下：

1. 在onHide斷開藍(lán)牙連接并記錄斷開連接的設(shè)備信息蒂培；
   2.在onShow時重新與斷開的設(shè)備進(jìn)行藍(lán)牙連接再愈；
   3.同步并處理離線的藍(lán)牙數(shù)據(jù)；
   代碼如下：

//增加保持小程序屏幕常亮
uni.setKeepScreenOn({
    keepScreenOn:show
})
if(osName === 'ios'){
    if(show){//展示
        if(hideDevice){
            let {deviceId,mac,localName,name} = hideDevice
            let dev = {deviceId,mac,localName,name}
            console.log(`進(jìn)入前臺恢復(fù)藍(lán)牙連接：${deviceId}`)
            //連接藍(lán)牙設(shè)備
            ...
        }
        hideDevice = undefined
    }else {//隱藏
        let device = this.globalData.device
        console.log("連接的設(shè)備==>",device)
        if(device){
            console.log(`進(jìn)入后臺斷開藍(lán)牙連接：${device.deviceId}`)
            hideDevice = device
            //斷開連接的設(shè)備
            uni.closeBLEConnection({
                deviceId:device.deviceId
            })
        }
    }
}

先就這些吧护戳，后面發(fā)現(xiàn)了在補(bǔ)上翎冲，有同學(xué)發(fā)現(xiàn)其它的坑也可以在評論區(qū)一起交流下。