uniapp nvue页面踩坑记录

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新版本该问题是否存在

6、运行到真机小技巧

在运行到真机时候，经常遇到修改代码后打开真机就白屏了，或是退出到了初始状态，这时候点重新运行后，大概率会加载成自定义基座中的资源，而不是本地资源。开始遇到这种情况只能重新编译，比较消耗时间。可以代码中直接ctrl+s，保存操作也会触发hx的重新差量编译，等看到提示”同步手机端程序文件完成“后在去真机打开，就没有再遇到以上问题了。（也可能是电脑性能落后太多年了导致，其他m1的本子重新编译还是挺快的）