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

<p><code></p> <blockquote><p>vue注意事项</p></blockquote> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="相比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 语法。 绑定的数据对象不必内联定义在模板里: </p> <div v-bind:class=&quot;classObject&quot;></div> <p> data: { classObject: { active: true, 'text-danger': false } } 注意:以:style=&quot;&quot;这样的方式设置px像素值,其值为实际像素,不会被编译器转换。 此外还可以用 computed 方法生成 class 或者 style 字符串,插入到页面中,举例说明: <template> <!-- 支持 --> <view class=&quot;container&quot; :class=&quot;computedClassStr&quot;></view> <view class=&quot;container&quot; :class=&quot;{active: isActive}&quot;></view> <!-- 不支持 --> <view class=&quot;container&quot; :class=&quot;computedClassObject&quot;></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 节点。、 </p> <style src=&quot;@/common/test.css&quot;></style> <style> .test { color: #E96900; } </style> <p> 开发 nvue 时,若遇到如下错误,是因为一个 uni-app 里必须有一个 vue 页面,在项目里新建一个空白的 vue 页面即可解决此问题。 Uncaught Error: module &quot;common/vendor.js&quot; 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 " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code>相比Web平台, Vue.js 在 uni-app 中使用差异主要集中在两个方面: 新增:uni-app除了支持Vue实例的生命周期,还支持应用启动、页面显示等生命周期 受限:相比web平台,部分功能受限,比如 v-html 指令,具体见下。(受限部分仅在App和小程序端受限,H5版不受限) 注意: 不要在选项属性或回调上使用箭头函数,比如 created: () =&gt; console.log(this.a) 或 vm.$watch('a', newValue =&gt; 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 语法。 绑定的数据对象不必内联定义在模板里: <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">v-bind:class</span>=<span class="hljs-string">"classObject"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> data: { classObject: { active: true, 'text-danger': false } } 注意:以:style=""这样的方式设置px像素值,其值为实际像素,不会被编译器转换。 此外还可以用 computed 方法生成 class 或者 style 字符串,插入到页面中,举例说明: <span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span> <span class="hljs-comment">&lt;!-- 支持 --&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"container"</span> <span class="hljs-attr">:class</span>=<span class="hljs-string">"computedClassStr"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"container"</span> <span class="hljs-attr">:class</span>=<span class="hljs-string">"{active: isActive}"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span> <span class="hljs-comment">&lt;!-- 不支持 --&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"container"</span> <span class="hljs-attr">:class</span>=<span class="hljs-string">"computedClassObject"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"> <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> { data () { <span class="hljs-keyword">return</span> { <span class="hljs-attr">isActive</span>: <span class="hljs-literal">true</span> } }, <span class="hljs-attr">computed</span>: { computedClassStr () { <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.isActive ? <span class="hljs-string">'active'</span> : <span class="hljs-string">''</span> }, computedClassObject () { <span class="hljs-keyword">return</span> { <span class="hljs-attr">active</span>: <span class="hljs-keyword">this</span>.isActive } } } } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> 用在组件上 非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 节点。、 <span class="hljs-tag">&lt;<span class="hljs-name">style</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"@/common/test.css"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css"> <span class="hljs-selector-class">.test</span> { <span class="hljs-attribute">color</span>: <span class="hljs-number">#E96900</span>; } </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span> 开发 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 </code></pre> <blockquote><p>nvue注意事项</p></blockquote> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="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=&quot;@/common/test.css&quot;></style> <style> .test { color: #E96900; } </style> <p> 开发 nvue 时,若遇到如下错误,是因为一个 uni-app 里必须有一个 vue 页面,在项目里新建一个空白的 vue 页面即可解决此问题。 Uncaught Error: module &quot;common/vendor.js&quot; 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" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs coffeescript"><code>nvue 页面均采用 flex 布局,不支持其他布局方式,需要注意的是 flex 默认为竖向排列,即 flex-direction: column。 nvue 的各组件在安卓端默认是透明的,如果不设置background-color,可能会导致出现重影的问题。 在 App.vue 中定义的全局样式不会在 nvue 页面生效。 nvue 切换横竖屏时可能重新计算 px,导致样式出现问题,建议有 nvue 的页面锁定手机方向。 目前不支持在 nvue 页面使用 scss、less 等预编译语言。 不能在 style 中引入字体文件,nvue 中字体图标的使用参考:weex 加载自定义字体。 <span class="hljs-class"><span class="hljs-keyword">class</span> 进行绑定时只支持数组语法(<span class="hljs-title">weex</span> 限制)。</span> nvue 页面跳转 vue 页面时,只能调用 uni-app 的 路由 API 进行跳转。 nvue 暂不支持运行在模拟器上。 在 created 里调用 uni-app 的 api 时,可能出现 launch webview id <span class="hljs-keyword">is</span> <span class="hljs-keyword">not</span> ready 错误,延时几百毫秒再执行就不会报错了。 nvue 页面 titleNview 设为 <span class="hljs-literal">false</span>时,想要模拟状态栏,可以参考:https:<span class="hljs-regexp">//</span>ask.dcloud.net.cn/article/<span class="hljs-number">35111</span>。 nvue 中不支持使用 <span class="hljs-keyword">import</span> 的方式引入外部 css,需使用如下方式进行引入,注意:引入外部 css 的 style 节点下写样式是不会生效的,需要额外添加新的 style 节点。 &lt;style src=<span class="hljs-string">"@/common/test.css"</span>&gt;&lt;/style&gt; &lt;style&gt; .test { color: <span class="hljs-comment">#E96900;</span> } &lt;/style&gt; 开发 nvue 时,若遇到如下错误,是因为一个 uni-app 里必须有一个 vue 页面,在项目里新建一个空白的 vue 页面即可解决此问题。 Uncaught Error: <span class="hljs-built_in">module</span> <span class="hljs-string">"common/vendor.js"</span> <span class="hljs-keyword">is</span> <span class="hljs-keyword">not</span> defined <span class="hljs-number">20</span>:<span class="hljs-number">31</span>:<span class="hljs-number">58.664</span> Wed Jan <span class="hljs-number">23</span> <span class="hljs-number">2019</span> <span class="hljs-number">20</span>:<span class="hljs-number">33</span>:<span class="hljs-number">31</span> GMT+<span class="hljs-number">0800</span> (CST) Page route 错误 <span class="hljs-number">20</span>:<span class="hljs-number">31</span>:<span class="hljs-number">58.687</span> Page[pages/index/index] <span class="hljs-keyword">not</span> found. May be caused by: <span class="hljs-number">1.</span> Forgot to add page route <span class="hljs-keyword">in</span> pages.json. <span class="hljs-number">2.</span> Invoking Page() <span class="hljs-keyword">in</span> async task. <span class="hljs-number">20</span>:<span class="hljs-number">31</span>:<span class="hljs-number">58.706</span> <span class="hljs-built_in">console</span>.groupEnd</code></pre> <p></code></p>
脚本宝典为你提供优质服务
脚本宝典 » uni-app 开发vue和nvue时,注意事项

发表评论

提供最优质的资源集合

立即查看 了解详情