0.uniapp注意事项

nvue的css仅支持flex布局，是webview的css语法的子集。这是因为操作系统原生排版不支持非flex之外的web布局。当然flex足以排布出各种页面，只是写法需要适应。
class 进行绑定时只支持数组语法。
不支持媒体查询
不能在 style 中引入字体文件
不能使用百分比布局，如width：100%
不支持在css里写背景图background-image，但可以使用image组件和层级来实现类似web中的背景效果。因为原生开发本身也没有web这种背景图概念
使用image标签，支持使用base64，不支持svg格式图片
nvue 的各组件在安卓端默认是透明的，如果不设置background-color，可能会导致出现重影的问题
文字内容，必须只能在text组件下，text组件不能换行写内容，否则会出现无法去除的周边空白
只有text标签可以设置字体大小，字体颜色

此外，css不支持层级嵌套的写法

1. 无法加载iconfont问题

nvue页面需要通过weex提供的DOM.addRule来加载字体，官方文档描述已经挺详细了，见dom | uni-app官网

但有一点千万要注意，font-family不能加引号，感觉是uniapp的bug

    <style>
		.my-iconfont {
			font-family: myIconfont; // 不能加引号
			font-size: 60rpx;
			color: #00AAFF;
		}
	</style>

项目中使用的阿里的iconfont，不建议使用cdn的服务，其平台也不承诺期服务的稳定性，使用ttf转成base64，https://www.giftofspeed.com/base64-encoder/

import base64Font from '@/static/iconfont/base64.js'

  beforeCreate() {
    /* #ifdef APP-NVUE */
    domModule.addRule('fontFace', {
      fontFamily: 'ft',
      src: `url('${base64Font}')`,
    })
    /* #endif  */
  },

这里加了条件编译，因为nvue页面也是可以编译成h5的。

2.状态栏高度设置

uniapp提供了状态栏高度的css变量--status-bar-height，vue页面可以正常使用，在nvue中高度获取不准确，建议使用plus.navigator.getStatusbarHeight方法设置style

<view class="status-bar" :style="{ height: barHeight + 'px' }" />

export default {
   data() {
    return {
      barHeight: 0, // 动态高度初始值
    }
   },
   onLoad() {
    this.barHeight = plus.navigator.getStatusbarHeight()
  },
}

3、不支持vue.config.js 中alias配置

在使用nvue之前项目中设了一些alias，如

chainWebpack: (config) => {
    config.resolve.alias
      .set('IMG', resolove('static/image'))
      .set('COMPONENTS', resolove('components'))
}

这样在页面或组件中就可以 import xxx from 'IMG/xyz'的形式，但是这在nvue的编译下不支持，需要全部去除这些别名

4、不支持定义在Vue.prototype上的全局变量

5、跳转nvue页面会再次触发onLaunch

发现这个问题开始是因为进入nvue页面之后，路由跳转就开始闪屏，测试下来最终发现是从vue页面进入nvue页面时候入口main.js重复执行了，因为路由跳转的方法在main.js中添加了拦截器，这部分也重复注册了。hbuilderx版本为3.6.4，怀疑是uni的bug，main.js不该重复执行才对，临时处理方案为main.js中所有执行都加一层判断，代码层面保证不会重复执行。后续再跟进hx新版本该问题是否存在

uniapp nvue页面踩坑记录