网站建设制作设计营销公司四川,汕头站扩建什么时候完成,百度建立企业网站建设的目的,传媒宣传片制作我们在使用uniApp开发的时候#xff0c;很多朋友由于对多端兼容性的不了解#xff0c;结果在多端编译的时候经常出这样或者那样的问题#xff0c;而不断的说uniApp这坑那坑的#xff0c;下面我基于自身经验和官网说明提炼一些常见的注意要点。 因为很多公司时常初衷是开发一…我们在使用uniApp开发的时候很多朋友由于对多端兼容性的不了解结果在多端编译的时候经常出这样或者那样的问题而不断的说uniApp这坑那坑的下面我基于自身经验和官网说明提炼一些常见的注意要点。 因为很多公司时常初衷是开发一个微信小程序而程序员开发时只专注于微信小程序而开发差不多了领导一拍脑袋又要一个APP或者抖音小程序等这时候领导可能也听说了uniApp支持多端打包的但是这个时候你构建其他端时就会大面积报异常这个时候难免要被PUA考虑问题不够全面为了防患于未然我们一开始开发任意一端时就要尽可能的考虑所有端的兼容性支持问题。 1、最好只用class选择器。H5不支持 *选择器, 百度小程序不支持属性选择器。
2、body的元素选择器请改为page
3、div、ul、li改为viewspan、font改为texta改为navigator、img改为imagecss不能引入本地图片如果非要引入可以试试写行内样式
view classcontent stylebackground-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_ENVdevelopment UNI_PLATFORMmp-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 classappreciate 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;}
