What is the difference between uniapp calling vue and nvue

Difference: 1. Calling vue requires the use of webview rendering, while calling nvue uses the native rendering of weex; 2. The css of the vue interface supports media queries, but the css of the nvue page does not support media queries. 3. nvue pages all use flex layout, and vue pages can have multiple layout methods.

The operating environment of this article: windows10 system, uni-app version 2.5.1, DELL G3 computer.

What is the difference between uniapp calling vue and nvue

uni-app separates logic and rendering, and the rendering layer is provided on the app side Two sets of typesetting engines.

Webview rendering in the mini program mode and native rendering in the weex mode. You can choose the two rendering engines according to your needs.

• vue file-based webview rendering

• nvue uses weex-based native rendering

Component The writing method is the same as js, but css is different. The css that can be used for native typesetting must be flex layout

The App side of uni-app has a built-in native rendering engine based on weex improvement, providing native rendering capabilities .

On the App side, if you use vue page, use webview rendering; if use nvue page (abbreviation of native vue), use native rendering. Two pages can be used in one App at the same time. For example, the homepage uses nvue and the second-level page uses vue. This is the hello uni-app example.

Although nvue can also be multi-terminal compiled and output H5 and small programs, nvue's CSS writing method is limited, so if you do not develop apps, you do not need to use nvue.

nvue and vue communicate with each other

In uni-app, nvue and vue pages can be mixed and matched.

It is recommended to use uni.o n, u n i. on, uni.on, uni.emit for page communication

nvue Notes

1 , nvue pages all use flex layout, other layout methods are not supported, and percentages cannot be used. It should be noted that flex defaults to vertical arrangement, that is, flex-direction: column. If you need to change the layout direction, you can use flex-direction: row; to change to horizontal arrangement

2. Defined in App.vue Global styles will not take effect on nvue pages.

3. Currently, the use of precompiled languages ​​such as s css and less on nvue pages is not supported.

4. Font files cannot be introduced in style. For the use of font icons in nvue, please refer to: weex loading custom fonts.

5. When binding class, only array syntax is supported (weex restriction).

6. When the nvue page jumps to the vue page, you can only call the routing API of uni-app to jump.

7. nvue does not support running on the simulator. When calling the api of uni-app in created, the launch webview id is not ready error may occur. If you delay execution for a few hundred milliseconds, the error will not be reported. When nvue page titleNview is set to false, if you want to simulate the status bar, you can refer to: https://ask.dcloud.net.cn/article/35111.

8. nvue does not support the use of import to introduce external css. You need to use the following method to introduce it. Note: the style written under the style node of the external css will not take effect. You need to add a new style. node.

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

9. When developing nvue, if you encounter the following error, it is because there must be a vue page in a uni-app. This problem can be solved by creating a new blank vue page in the project.

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

10. In nvue, you cannot directly introduce font files in css through @font-face. You need to use the dom module in js to introduce font files. The url of the src field must be enclosed in brackets. Use single quotes

 const domModule = weex.requireModule('dom');
   domModule.addRule('fontFace', {
   'fontFamily': "iconfont",
   'src': "url('../../static/iconfont.ttf')"
   });

11. Many css styles do not support abbreviations

For example, border

/* 错误 */
.class {
    border: 1px red solid;
}
 
/* 正确 */
.class {
    border-width: 1px;
    border-style: solid;
    border-color: red;
}

image sets border-radius

cannot be given to image in nvue Set border-radius. If you want to change the rectangular pattern into a circle, you need to wrap a layer of div around the image. The code is as follows:

<div style="width: 400px;height: 400px;border-radius: 400px;overflow: hidden;">
    <image style="width: 400px;height: 400px;" src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png"></image> </div>

12. nvue page control can only use v-if but not v. -show

13. The unit only supports px and does not support em, rem, pt, %, upx

The width problem will automatically divide the mobile phone screen into 750 parts wide and 1250 parts high

Recommended: "uni-app tutorial"

The above is the detailed content of What is the difference between uniapp calling vue and nvue. For more information, please follow other related articles on the PHP Chinese website!