vue와 nvue를 호출하는 uniapp의 차이점은 무엇입니까

차이점: 1. vue를 호출하려면 webview 렌더링을 사용해야 하고, nvue를 호출하려면 weex의 기본 렌더링을 사용해야 합니다. 2. vue 인터페이스의 CSS는 미디어 쿼리를 지원하지만 nvue 페이지의 CSS는 미디어 쿼리를 지원하지 않습니다. 3. nvue 페이지는 모두 flex 레이아웃을 사용하며, vue 페이지는 여러 레이아웃 방법을 가질 수 있습니다.

이 기사의 운영 환경: windows10 시스템, uni-app 버전 2.5.1, DELL G3 컴퓨터.

vue와 nvue를 호출하는 uniapp의 차이점은 무엇인가요?

uni-app은 로직과 렌더링을 분리하여 앱 측에서 두 세트의 조판 엔진을 제공합니다.

미니 프로그램 모드의 Webview 렌더링과 weex 모드의 기본 렌더링, 필요에 따라 두 가지 렌더링 엔진을 선택할 수 있습니다.

• vue 파일 기반 웹뷰 렌더링

• nvue는 weex 기반 네이티브 렌더링을 사용합니다

컴포넌트와 js는 같은 방식으로 작성되지만 CSS는 네이티브 조판에 사용할 수 있는 CSS가 다릅니다. be flexlayout

유니앱의 앱측에는 weex를 기반으로 개선된 네이티브 렌더링 엔진이 내장되어 있어 네이티브 렌더링 기능을 제공합니다.

앱 측에서 vue 페이지를 사용하는 경우 webview 렌더링을 사용하고, nvue 페이지(native vue의 약어)를 사용하는 경우 네이티브 렌더링을 사용합니다. 하나의 앱에서 두 개의 페이지를 동시에 사용할 수 있습니다. 예를 들어 홈페이지는 nvue를 사용하고 두 번째 레벨 페이지는 vue를 사용합니다.

nvue는 멀티 터미널 컴파일도 가능하고 H5나 작은 프로그램도 출력할 수 있지만 nvue의 CSS 작성 방식에는 한계가 있기 때문에 앱을 개발하지 않는다면 굳이 nvue를 사용할 필요는 없습니다.

nvue와 vue는 서로 소통합니다

uni-app에서는 nvue와 vue 페이지를 혼합하여 사용할 수 있습니다.

페이지 통신에는 uni.on, u n i.on, uni.on, uni.emit를 사용하는 것이 좋습니다.

nvue Notes

1 nvue 페이지는 모두 flex 레이아웃을 사용하며 다른 레이아웃 방법은 지원되지 않습니다. 백분율을 사용할 수 없습니다. flex의 기본값은 수직 배열, 즉 flex-direction:column입니다. 레이아웃 방향을 변경해야 하는 경우 flex-direction: row를 사용하여 수평 배열로 변경할 수 있습니다.

2. App.vue에서는 nvue 페이지에 적용되지 않습니다.

3. 현재 nvue 페이지에서는 s css 등의 사전 컴파일된 언어 사용이 지원되지 않습니다.

4. 글꼴 파일은 스타일에 도입할 수 없습니다. nvue에서 글꼴 아이콘 사용에 대한 참조: weex는 사용자 정의 글꼴을 로드합니다.

5. 클래스는 바인딩 시 배열 구문만 지원합니다(weex 제한).

6. nvue 페이지에서 vue 페이지로 점프할 때 uni-app의 라우팅 API만 호출하면 점프할 수 있습니다.

7. nvue는 시뮬레이터에서의 실행을 지원하지 않습니다. 생성된 uni-app의 API를 호출할 때 실행 webview id가 준비되지 않았습니다 오류가 발생할 수 있습니다. 몇 백 밀리초 동안 실행을 지연하면 오류가 보고되지 않습니다. nvue page titleNview가 false로 설정된 경우 상태 표시줄을 시뮬레이션하려면 https://ask.dcloud.net.cn/article/35111을 참조하세요.

8. nvue는 외부 CSS를 도입하기 위한 가져오기 사용을 지원하지 않습니다. 이를 도입하려면 다음 방법을 사용해야 합니다. 참고: 가져온 외부 CSS의 스타일 노드에 스타일을 추가해야 합니다. 새로운 스타일 노드.

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

9. 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

10. nvue에서는 @font-face를 통해 CSS에 글꼴 파일을 직접 도입할 수 없습니다. 글꼴 파일을 도입하려면 src에서 괄호 안에 작은따옴표를 사용해야 합니다. field

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

11. 많은 CSS 스타일은 약어를 지원하지 않습니다.

예를 들어 border

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

image는 border-radius를 설정합니다

nvue의 이미지에 대해 border-radius를 설정할 수 없습니다. 레이어 div를 감싸야 합니다. 코드는 다음과 같습니다:

<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 페이지 제어는 v-if만 사용할 수 있지만 v-show

13은 사용할 수 없습니다. em, rem, pt, %, upx

width를 지원하지 않습니다. 질문은 휴대폰 화면을 자동으로 가로 750부분, 높이 1250부분으로 나눕니다.

권장: "uni-app tutorial"

위 내용은 vue와 nvue를 호출하는 uniapp의 차이점은 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!