文档

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"，要在组件内部写样式
  • Vue3的<script setup>语法在所有平台都支持，但需注意在小程序中响应式数据的更新可能会有延迟
  • 小程序中不支持动态引入组件和模块，需要在顶部静态导入
  • 小程序中不支持使用window、document等浏览器对象，需使用uni对象提供的API

二、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%才可以。
  • 页面层级最多10层，超出会自动关闭之前的页面
  • 不支持直接操作DOM，需通过小程序提供的API如 createSelectorQuery
  • 微信小程序中使用 uni.request 时，必须将请求域名添加到小程序管理后台的安全域名列表中

不支持的Vue.js ​

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