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