记首次小程序遇到坑及解决

前言

由于工作需要，首次进行微信小程序开发，从基础环境搭建到小程序发布，体验到小程序便捷的同时，也踩了不少坑，在此记录下。

1、弹窗事件穿透问题

这个问题相信很多小程序开发者都会碰到。
现象描述：打开一个弹窗，滑动弹窗中内容，会影响到下层UI，导致下层UI跟随滑动。
解决方式：
在标签中添加@touchmove.stop.prevent,如下示例：

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

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

建议使用ScrollView实现

3、PC端微信小程序不支持自定义标题栏

image.png

若设置了自定义导航栏，在PC端展示会出现两个导航栏,如下：

两个导航栏

4、rich-text支持富文本节点不足

不是所有的标签、属性都支持，支持属性参考：支持属性

5、网络访问不支持http访问

在开发模式可以通过配置暂时性的忽略以方便开发，但是在小程序发布时就必须要采用https了，并且还要在微信小程序开发者后台【项目配置中】提前配置合法的request域名。
开发模式配置方式：
微信开发者工具 → 右侧工程【详情】→ 勾选【不校验合法域名....】，如下图：

image.png

6、文件上传

仅支持单文件上传，若有多文件上传的需要自己封装函数，多次调用uni.uploadFile();

注意：上传前先在微信小程序后台配置下上传的合法域名，否则是上传不了的。笔者在这里犯了次错误。

7、canvas页面中的弹窗要使用cover-view

canvas在移动端运行为作为原生组件，其层级高于小程序组件，因此要保证弹窗的层级高于canvas，必须使用同为原生组件的cover-view组件.
cover-view的使用,类似小程序组件View的使用。

值得注意的是：z-index属性对原生组件在真机上不生效，因此显示在Canvas上的要放在布局时要放在canvas后面；

8、在IOS端蓝牙连接时手机息屏或小程序处于后台无法进行通信

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

uni.setKeepScreenOn({
    keepScreenOn:show
})

方式二：
在uniapp工程的app.vue中，监听onShow（显示）和onHide（隐藏）方法
在微信小程序app.js中监听onAppShow()和onAppHide()

在笔者的工程中是采用两者结合的方式，如下：

1. 在onHide断开蓝牙连接并记录断开连接的设备信息；
   2.在onShow时重新与断开的设备进行蓝牙连接；
   3.同步并处理离线的蓝牙数据；
   代码如下：

//增加保持小程序屏幕常亮
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(`进入前台恢复蓝牙连接：${deviceId}`)
            //连接蓝牙设备
            ...
        }
        hideDevice = undefined
    }else {//隐藏
        let device = this.globalData.device
        console.log("连接的设备==>",device)
        if(device){
            console.log(`进入后台断开蓝牙连接：${device.deviceId}`)
            hideDevice = device
            //断开连接的设备
            uni.closeBLEConnection({
                deviceId:device.deviceId
            })
        }
    }
}

先就这些吧，后面发现了在补上，有同学发现其它的坑也可以在评论区一起交流下。