ホームページ > 記事 > ウェブフロントエンド > 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 Notes
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 サイトの他の関連記事を参照してください。