文档

Appearance

兼容问题 ​

一、编写规范 ​

  • 非H5端不支持使用*选择器，body的元素选择器需要改成page
  • 非H5端默认不启用scoped，H5段默认启用了scoped
  • 小程序由于自带了一个webview，所以不存在浏览器兼容问题，如果出现异常，那基本是CSS兼容问题
  • 非H5端有原生组件并且原生组件层级高于前端组件，要遮挡video、map等原生组件，请使用cover-view组件
  • v-html在H5中支持，但是在小程序不支持
  • 虽然div、span也可以运行在小程序上，但仍然建议养成新习惯，使用view、text
  • 大部分css样式在微信小程序中都可以支持，但推荐使用flex布局模型
  • 为避免和内置组件冲突，自定义组件请加上前缀（但不能是 u 和 uni），另外微信小程序下自定义组件名称不能以 wx 开头。
  • 不要在引用组件的地方在组件属性上直接写 style="xx"，要在组件内部写样式

二、H5开发注意 ​

  • H5版的uniapp开发全面支持Vue语法
  • 小程序的导航栏和tabbar均是原生控件，元素区域坐标不包含原生导航栏和tabbar；
    H5导航栏和tabbar是div模拟实现的，所以元素坐标会包含导航栏和tabbar的高度。
    uni-app 新增了2个css变量：--window-top 和 --window-bottom属性介绍，这代表了页面的内容区域距离顶部和底部的距离。
  • CSS 內使用 vh 单位的时候注意 100vh 包含导航栏，使用时需要减去导航栏和 tabBar 高度，部分浏览器还包含浏览器操作栏高度
  • 使用罗盘、地理位置、加速计等相关接口需要使用 https 协议，本地预览（localhost）可以使用 http 协议。
  • 正常支持 rpx，px 是真实物理像素。暂不支持通过设 manifest.json 的 "transformPx" : true，把 px 当动态单位使用。
  • vue2组件内（页面除外）不支持 onLoad、onShow 等页面生命周期， vue3请使用组合式api监听
  • 引用第三方 js 的方式：
  1. 通过 npm 引入（通过条件编译，只有是 h5 平台才 import 相应的库）
  2. 在 manifest.json 文件编辑 h5 节点的 template 属性，填写 html 模版路径，在 html 模版里面可以使用 script 的方式引入三方的 js，如下示例是加了百度统计的 html 模板部分代码，模版全部代码可参考：自定义模板
html
<body>
    <noscript>
        <strong>Please enable JavaScript to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <script>
        var _hmt = _hmt || [];
        (function() {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?xxxxxx";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>
</body>

三、微信小程序开发注意 ​

微信小程序当前bug列表

自定义组件
​

virtualHost配置

  • 微信（可以使用virtualHost配置）小程序，自定义组件在渲染时会比App/H5端多一级节点，在写样式时需要注意：
    使用flex布局时，直接给自定义组件的父元素设置为display:flex不能影响到自定义组件内部的根节点，需要设置当前自定义组件为display:flex才可以。 在自定义组件内部设置根元素高度为100%，不能撑满自定义组件父元素。需要同时设置当前自定义组件高度为100%才可以。
  • 支付宝小程序默认启用了virtualHost配置不会插入节点，一般不存在如上问题。

不支持的Vue.js ​

  • 作用域插槽
  • 动态组件
  • 异步组件
  • inline-template
  • X-Templates
  • keep-alive
  • transition （可使用 animation 或 CSS 动画替代）

四、支付宝小程序开发注意 ​

  • showLoading 是不透传的，也就是说loading显示的时候无法点击页面内容。
  • 文件名或文件夹名中不允许出现@符号。
  • 网络请求返回的数据会严格按照dataType进行处理，如果不符合规范则会抛出错误，而不是按照原格式返回。
  • canvas组件的标识是id，而不是canvas-id。目前还未进行处理，所以需要主动添加id属性。
  • 目前测试的结果，导航栏只有设置背景颜色为#FFF(FFF)时才会变成黑色文字。
  • 支付宝小程序的导航栏是支持透明渐变效果的，后面会提供相关的配置。
  • 使用伪元素做边框时，高度值不能用1rpx，需要直接用1px。
  • 不支持ECharts。
  • 支付功能模拟不了，需要真机测试。

五、设备兼容问题 ​

  1. 在苹果6s/6P/6sP的较低系统版本上，父元素使用display:flex，子元素使用position:absolute时，子元素position:absolute不会生效导致页面混乱，而且该问题在只能在真机中测出问题