uni-app 开发vue和nvue时,注意事项

53次阅读

共计 3038 个字符,预计需要花费 8 分钟才能阅读完成。

vue 注意事项
相比 Web 平台,Vue.js 在 uni-app 中使用差异主要集中在两个方面:
新增:uni-app 除了支持 Vue 实例的生命周期,还支持应用启动、页面显示等生命周期
受限:相比 web 平台,部分功能受限,比如 v-html 指令,具体见下。(受限部分仅在 App 和小程序端受限,H5 版不受限)

注意:
不要在选项属性或回调上使用箭头函数,比如 created: () => console.log(this.a) 或 vm.$watch(‘a’, newValue => this.myMethod())。因为箭头函数是和父级上下文绑定在一起的,this 不会是如你做预期的 Vue 实例,且 this.a 或 this.myMethod 也会是未定义的。
建议使用 uni-app 的 onReady 代替 vue 的 mounted。
建议使用 uni-app 的 onLoad 代替 vue 的 created。

注意事项
.vue 和 .nvue 并不是一个规范,因此一些在 .vue 中适用的方案并不适用于 .nvue。
Vue 上挂载属性,不能在 .nvue 中使用。
.nvue 不支持 vuex
如果希望 .vue 和 .nvue 共享一些数据的话,需要采用公用模块的方案,分别在 .vue 和 .nvue 文件中引入。

非 H5 端不支持 Vue 官方文档:Class 与 Style 绑定 中的 classObject 和 styleObject 语法。

绑定的数据对象不必内联定义在模板里:
<div v-bind:class=”classObject”></div>

data: {
classObject: {
active: true,
‘text-danger’: false
}
}

注意:以:style=”” 这样的方式设置 px 像素值,其值为实际像素,不会被编译器转换。
此外还可以用 computed 方法生成 class 或者 style 字符串,插入到页面中,举例说明:

<template>
<!– 支持 –>
<view class=”container” :class=”computedClassStr”></view>
<view class=”container” :class=”{active: isActive}”></view>

<!– 不支持 –>
<view class=”container” :class=”computedClassObject”></view>
</template>
<script>
export default {
data () {
return {
isActive: true
}
},
computed: {
computedClassStr () {
return this.isActive ? ‘active’ : ”
},
computedClassObject () {
return {active: this.isActive}
}
}
}
</script>

用在组件上
非 H5 端暂不支持在组件上使用 Class 与 Style 绑定

注意事项
nvue 页面均采用 flex 布局,不支持其他布局方式,需要注意的是 flex 默认为竖向排列,即 flex-direction: column。
在 App.vue 中定义的全局样式不会在 nvue 页面生效。
目前不支持在 nvue 页面使用 scss、less 等预编译语言。
不能在 style 中引入字体文件,nvue 中字体图标的使用参考:weex 加载自定义字体。
class 进行绑定时只支持数组语法(weex 限制)。
nvue 页面跳转 vue 页面时,只能调用 uni-app 的 路由 API 进行跳转。
nvue 暂不支持运行在模拟器上。
在 created 里调用 uni-app 的 api 时,可能出现 launch webview id is not ready 错误,延时几百毫秒再执行就不会报错了。
nvue 页面 titleNview 设为 false 时,想要模拟状态栏,可以参考:https://ask.dcloud.net.cn/article/35111。
nvue 中不支持使用 import 的方式引入外部 css,需使用如下方式进行引入,注意:引入外部 css 的 style 节点下写样式是不会生效的,需要额外添加新的 style 节点。、

<style src=”@/common/test.css”></style>
<style>
.test {
color: #E96900;
}
</style>

开发 nvue 时,若遇到如下错误,是因为一个 uni-app 里必须有一个 vue 页面,在项目里新建一个空白的 vue 页面即可解决此问题。

Uncaught Error: module “common/vendor.js” is not defined
20:31:58.664 Wed Jan 23 2019 20:33:31 GMT+0800 (CST) Page route 错误
20:31:58.687 Page[pages/index/index] not found. May be caused by: 1. Forgot to add page route in pages.json. 2. Invoking Page() in async task.
20:31:58.706 console.groupEnd

nvue 注意事项
nvue 页面均采用 flex 布局,不支持其他布局方式,需要注意的是 flex 默认为竖向排列,即 flex-direction: column。
nvue 的各组件在安卓端默认是透明的,如果不设置 background-color,可能会导致出现重影的问题。
在 App.vue 中定义的全局样式不会在 nvue 页面生效。
nvue 切换横竖屏时可能重新计算 px,导致样式出现问题,建议有 nvue 的页面锁定手机方向。
目前不支持在 nvue 页面使用 scss、less 等预编译语言。
不能在 style 中引入字体文件,nvue 中字体图标的使用参考:weex 加载自定义字体。
class 进行绑定时只支持数组语法(weex 限制)。
nvue 页面跳转 vue 页面时,只能调用 uni-app 的 路由 API 进行跳转。
nvue 暂不支持运行在模拟器上。
在 created 里调用 uni-app 的 api 时,可能出现 launch webview id is not ready 错误,延时几百毫秒再执行就不会报错了。
nvue 页面 titleNview 设为 false 时,想要模拟状态栏,可以参考:https://ask.dcloud.net.cn/article/35111。
nvue 中不支持使用 import 的方式引入外部 css,需使用如下方式进行引入,注意:引入外部 css 的 style 节点下写样式是不会生效的,需要额外添加新的 style 节点。

<style src=”@/common/test.css”></style>
<style>
.test {
color: #E96900;
}
</style>

开发 nvue 时,若遇到如下错误,是因为一个 uni-app 里必须有一个 vue 页面,在项目里新建一个空白的 vue 页面即可解决此问题。

Uncaught Error: module “common/vendor.js” is not defined
20:31:58.664 Wed Jan 23 2019 20:33:31 GMT+0800 (CST) Page route 错误
20:31:58.687 Page[pages/index/index] not found. May be caused by: 1. Forgot to add page route in pages.json. 2. Invoking Page() in async task.
20:31:58.706 console.groupEnd

正文完
 0