uniapp 呼び出し vue と nvue の違いは何ですか

違い: 1. vue の呼び出しには Webview レンダリングの使用が必要ですが、nvue の呼び出しには weex のネイティブ レンダリングが使用されます; 2. vue インターフェイスの CSS はメディア クエリをサポートしますが、nvue ページの CSS はサポートしませんメディアクエリをサポートします。 3. nvue ページはすべてフレックス レイアウトを使用し、vue ページは複数のレイアウト方法を持つことができます。

この記事の動作環境: Windows10 システム、uni-app バージョン 2.5.1、DELL G3 コンピューター。

uniapp 呼び出し vue と nvue の違いは何ですか

uni-app はロジックとレンダリングを分離し、レンダリング層はアプリ側 2 セットの植字エンジン。

ミニ プログラム モードでの Webview レンダリングと weex モードでのネイティブ レンダリング、ニーズに応じて 2 つのレンダリング エンジンを選択できます。

• vue ファイルベースの Web ビュー レンダリング

• nvue は weex ベースのネイティブ レンダリングを使用します

コンポーネント書き方はjsと同じですがcssが異なります ネイティブ組版に使用できるcssはフレックスレイアウトである必要があります

uni-appのアプリ側には、以下をベースとしたネイティブレンダリングエンジンが組み込まれていますweex が改善され、ネイティブ レンダリング機能が提供されます。

アプリ側では、vue ページを使用する場合は Webview レンダリングを使用し、nvue ページ (ネイティブ vue の略) を使用する場合はネイティブ レンダリングを使用します。 1 つのアプリで 2 つのページを同時に使用できます。たとえば、ホームページでは nvue を使用し、第 2 レベルのページでは vue を使用します。これは hello uni-app の例です。

nvue はマルチターミナルでコンパイルして H5 や小さなプログラムを出力することもできますが、nvue の CSS 記述方法には制限があるため、アプリを開発しない場合は nvue を使用する必要はありません。

nvue と vue は相互に通信します

uni-app では、nvue ページと vue ページを組み合わせて使用​​できます。

ページ通信には uni.o n、un i. on、uni.on、uni.emit を使用することをお勧めします

nvue N​​otes

1 、nvue ページはすべてフレックス レイアウトを使用し、他のレイアウト方法はサポートされておらず、パーセンテージは使用できません。 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を呼び出すと「launch webview id is notready」エラーが発生する場合がありますが、数百ミリ秒実行を遅らせればエラーは報告されません。 nvue ページの titleNview が false に設定されている場合、ステータス バーをシミュレートしたい場合は、https://ask.dcloud.net.cn/article/35111 を参照してください。

8. nvue では import による外部 CSS の導入はサポートされていませんので、以下の方法で導入する必要があります 注: 外部 CSS のスタイルノード配下に記述されたスタイルは有効になりません。新しい style. ノードを追加する必要があります。

<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 にフォント ファイルを直接導入することはできません。フォント ファイルを導入するには、js の dom モジュールを使用する必要があります。src フィールドの URL は、単一引用符を使用します。

 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. このユニットは px のみをサポートし、em、rem、pt、%、upxx

幅の問題はサポートしません。携帯電話の画面を幅 750 部分、高さ 1250 部分に自動的に分割します。

推奨: "uni-app チュートリアル "

以上がuniapp 呼び出し vue と nvue の違いは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。