uniApp开发注意要点提炼-xyphf

我们在使用uniApp开发的时候，很多朋友由于对多端兼容性的不了解，结果在多端编译的时候经常出这样或者那样的问题，而不断的说uniApp这坑那坑的，下面我基于自身经验和官网说明提炼一些常见的注意要点。

因为很多公司时常初衷是开发一个微信小程序，而程序员开发时只专注于微信小程序，而开发差不多了，领导一拍脑袋，又要一个APP或者抖音小程序等，这时候领导可能也听说了uniApp支持多端打包的，但是这个时候你构建其他端时就会大面积报异常，这个时候难免要被PUA考虑问题不够全面，为了防患于未然，我们一开始开发任意一端时，就要尽可能的考虑所有端的兼容性支持问题。

1、最好只用class选择器。H5不支持 *选择器, 百度小程序不支持属性选择器。

2、body的元素选择器请改为page

3、div、ul、li改为view，span、font改为text，a改为navigator、img改为image，css不能引入本地图片，如果非要引入可以试试写行内样式

<view class="content" style="background-image: url('../../static/index-top-bg.png');">
</view>

4、组件和页面样式相互影响，H5端默认开启了 scoped，其他端并未开启，并且百度小程序不支持scoped，建议开发时全部使用class父子级管理来处理

5、uniApp推荐并支持使用flex布局【快应用只支持flex布局】，但是不支持太新的CSS属性；vue页面在App端，默认是被系统rom的webview渲染的，Android4.4对应的webview是chrome37，如果你知道使用的CSS属性是否被支持，可以使用使用CSS支持查询器查询一下。

关于手机webview内核、默认浏览器、各家小程序的渲染层浏览器的区别和兼容性

6、video、map等原生组件无法遮挡，非H5端有原生组件并引发了原生组件层级高于前端组件的问题，比如要遮挡video、map等原生组件，请使用cover-view组件；但是请注意360旗下轻应用和字节系下抖音、飞书小程序是不支持的cover-view组件的；cover-view组件不要嵌套，支付宝小程序不支持。

7、不要使用浏览器专用js对象，比如document、xmlhttp、cookie、window、location、navigator、localstorage、websql、indexdb、webgl等，因为非H5不支持。如果你的代码没有直接使用这些，那很可能是引入的三方库使用了这些，建议使用uniApp官方提供的具有相同功能的API或寻找其他替代方案。

8、蒙版弹层不能覆盖原生底部tab，官网建议动态隐藏tabbar但是导致的闪烁问题客户不满意，为了规避此问题，建议使用自定义tab，如果使用原生底部tab，这些是要在pages.json里配置的。

CSS 內使用 vh 单位的时候注意 100vh 包含导航栏，使用时需要减去导航栏和 tabBar 高度，部分浏览器还包含浏览器操作栏高度，使用时请注意。

APP 和小程序的导航栏和 tabbar 均是原生控件，元素区域坐标是不包含原生导航栏和 tabbar 的；而 H5 里导航栏和 tabbar 是 div 模拟实现的，所以元素坐标会包含导航栏和tabbar的高度。为了优雅的解决多端高度定位问题，uni-app 新增了2个css变量：--window-top 和 --window-bottom，这代表了页面的内容区域距离顶部和底部的距离。举个实例，如果你想在原生tabbar 上方悬浮一个菜单，之前写 bottom:0。这样的写法编译到 h5 后，这个菜单会和 tabbar 重叠，位于屏幕底部。而改为使用 bottom:var(--window-bottom)，则不管在 app 下还是在h5下，这个菜单都是悬浮在 tabbar 上浮的。这就避免了写条件编译代码。当然仍然也可以使用 H5 的条件编译处理界面的不同。——官方说了一大堆，所以本人建议还是别用原生tabbar好了

9、位置坐标系统一为国测局坐标系gcj02

10、使用通过 npm 引入第三方js，只有是 h5 平台才 import 相应的库；

11、data 后面必须写 function；不能修改 props 的值；组件最外层 template 节点下不允许包含多个节点；

12、如果无法发送请求，请核验微信公众平台小程序开发者设置是否有设置请求域名；开发工具可以请求但真机无法请求请核验域名是否是https协议[真机是必须https];如果是web-view页面加载失败请查看微信公众平台小程序开发者设置业务域名是否有配置，页面的服务器根目录是否有添加微信小程序web-view的鉴权文件；如果遇到跨域造成js无法联网，注意网络请求（request、uploadFile、downloadFile等）在浏览器存在跨域限制

13、使用罗盘、地理位置、加速计等相关接口需要使用 https 协议，本地预览（localhost）可以使用 http 协议。

14、不要在组件内使用 onLoad、onShow 等页面生命周期。

15、自定义组件请加上前缀（但不能是 u- 和 uni-）避免与官方组件冲突。

16、使用flex布局时，直接给自定义组件的父元素设置为display:flex不能影响到自定义组件内部的根节点，需要设置当前自定义组件为display:flex才可以。

17、在自定义组件内部设置根元素高度为100%，不能撑满自定义组件父元素。需要同时设置当前自定义组件高度为100%才可以

18、[uniapp vendor.js 过大的处理方式]

        (1)HBuilderX创建的项目勾选运行-->运行到小程序模拟器-->运行时是否压缩代码

        (2) cli创建的项目可以在package.json中添加参数--minimize，示例："dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch --minimize"

        (3)使用分包优化

19、showLoading 是不透传的，也就是说 loading 显示的时候无法点击页面内容。

20、文件名或文件夹名中不允许出现 @ 符号

21、网络请求返回的数据会严格按照 dataType 进行处理，如果不符合规范则会抛出错误，而不是按照原格式返回。

22、canvas 组件的标识是 id，而不是 canvas-id。目前还未进行处理，所以需要主动添加 id 属性。

23、使用伪元素做边框时，高度值不能用 1rpx，需要直接用 1px。

24、支付宝小程序不支持 ECharts；

25、v-if 和 v-for 不可在同一标签下同时使用；

26、页面蒙版弹出下面页面仍然可以滚动，请在蒙版的外层标签添加@touchmove.stop.prevent="() => {}"

<view class="appreciate" @touchmove.stop.prevent="() => {}">
</view>

27、1像素问题处理

                .bottom-btn {position: relative;height: 80rpx;display: flex;}.bottom-btn:after {content: " ";position: absolute;left: 0;bottom: 0;right: 0;height: 1px;color: #e0e0e0;transform-origin: 0 100%;transform: scaleY(0.5);z-index: 1;}.bottom-btn:before {content: " ";position: absolute;left: 0;top: 0;right: 0;height: 1px;border-bottom: 1px solid #F5F5F5;color: #e0e0e0;transform-origin: 0 0;transform: scaleY(0.5);z-index: 1;}