nvue と vue の使用
nvueとは何ですか？ヌーブを使用する理由
- nvue(native vue) 、ネイティブレンダリングです
- uni-app はロジックとレンダリングから分離されており、レンダリング層はアプリ側に 2 セットの植字エンジンを提供します。アプレット モードでの Webview レンダリングと weex モードでのネイティブ レンダリング、ニーズに応じて 2 つのレンダリング エンジンを選択できます。
- vue ファイルの Webview レンダリングと、nvue weex メソッドのネイティブ レンダリング。
- コンポーネントの書き方はjsと同じですが、cssは異なります ネイティブレイアウトに使用できるcssはflexレイアウトである必要があります アプリ側ではvueページを使用する場合はwebviewレンダリングを使用し、nvueページを使用する場合は、ネイティブレンダリングを使用します。1 つのアプリで 2 種類のページを同時に使用できます。たとえば、hello uni-app の例のように、nvue はホーム ページに使用され、vue は第 2 レベルのページに使用されます。nvueでもマルチターミナルのコンパイルやH5やアプレットの出力が可能ですが、nvueのcss記述方法は限られているので、アプリ開発をしないのであればnvueを使う必要はありません。
- weex の大きな問題は、十分な API 機能 (さまざまなプッシュ SDK 統合、Bluetooth、その他の機能呼び出しなど) を持たず、単なる高性能レンダラーであるため、開発がネイティブ エンジニアのコラボレーションに大きく依存することです。コストを節約すると、フロントエンド、iOS、Android の 3 つのグループの開発が必要になり、逆効果です。nvue はこの問題を解決し、フロントエンド エンジニアが完全なアプリを直接開発できるようにし、豊富なプラグイン エコロジーとクラウド パッケージを提供します。これらの組み合わせソリューションは、開発者が効率を向上させ、コストを削減するのに役立ちます。
- vue で定義したネイティブ モジュールまたはコンポーネントの関数を呼び出す必要がある場合は、注意が必要です。このとき、vue ではなく nvue を使用する必要があります。vue を使用すると呼び出しが失敗します。
- uni-app は weex ネイティブ レンダリング エンジンの多くの組版機能を拡張し、バグを修正します Android
側はボーダー シャドウをサポートします
iOS 側はガウスぼかしをサポートします
領域スクロールの長いリスト + 左右のドラッグによる複雑な組版効果を実現できますリスト + 吸引天井
最適化された丸い境界線の描画パフォーマンス - アプリ側の一部の vue ページのパフォーマンスが低い場合は、nvue を強化された補足として使用します。
nvue と vue 開発の一般的な違い
ネイティブ エンジンに基づくレンダリングは依然としてフロントエンドのテクノロジ スタックではありますが、Web 開発とは明らかに異なります。
- nvue ページ コントロールは表示と非表示のみであり、
v-if使用することはできませんv-show - nvue ページのみが使用でき
flex布局、他のレイアウト方法はサポートされません。ページを開発する前に、まずページの垂直方向のコンテンツが何であるか、どのコンテンツをスクロールするかを考え、次に各垂直方向のコンテンツの横軸の配置をどうするかを考え、フレックス レイアウトに従ってインターフェイスを設計します。 - nvue ページのレイアウト方向はデフォルトで垂直です
column。レイアウト方向を変更する必要がある場合は、manifest.json -> app-plus -> nvue -> flex-directionノード。これはユニアプリ モードでのみ有効です。 - nvue ページが H5 および小さなプログラムにコンパイルされると、css のデフォルト値を調整する仕事が行われます。weex レンダリング エンジンは flex のみをサポートしており、デフォルトの flex 方向はvertical であるためです
column。ただし、H5 とアプレットは、デフォルトではフレックスではない Web レンダリングを使用し、display:flex設定後のフレックス方向はデフォルトで垂直ではなく水平になります。したがって、nvue が H5 および小規模プログラムにコンパイルされると、ページのデフォルトのレイアウトが自動的に flex に設定され、方向が垂直に設定されます。もちろん、開発者は手動設定後にデフォルト設定をオーバーライドします。 - テキスト コンテンツは
<text>コンポーネントの下にのみ存在する必要があり、また存在することもできます。<div>、<view>テキストエリアに直接テキストを書き込むことはできません。そうしないと、レンダリングされても、js 内の変数をバインドできません。 - フォントサイズとフォントカラーを設定できるのはテキストタグのみです。
- レイアウトではパーセンテージやメディア クエリは使用できません。
- nvue が水平画面と垂直画面を切り替えると、スタイルの問題が発生する可能性があるため、nvue を使用するページで携帯電話の向きをロックすることをお勧めします。
- サポートされている CSS は限られていますが、必要なインターフェイスのレイアウトには影響しません。Flex は依然として非常に強力です。
- 背景画像はサポートされていません。ただし、画像コンポーネントとレイヤーを使用して、Web と同様の背景効果を実現できます。ネイティブ開発自体にWebの背景イメージの概念がないため
- CSS セレクターはサポート対象が少なく、クラス セレクターのみを使用できます。
- nvue のコンポーネントは Android 側でデフォルトで透明になっているため、設定しないと
background-colorゴーストの問題が発生する可能性があります。 - クラス バインディングでは配列構文のみがサポートされます。
- Android 側のページで多数の丸い境界線を使用すると、パフォーマンスの問題が発生します。特に、複数の角のスタイルが同じでない場合、パフォーマンスの消費が大きくなります。このような使用は避けてください。
- nvue ページにはバウンス リバウンド効果はありません。バウンス効果があるのは、 を含む少数のリスト コンポーネントだけです
list、recycle-list、waterfall。 - ネイティブ開発にはページ スクロールの概念がありません。ページのコンテンツは画面の高さより高いため、自動的にスクロールされません。スクロールできるのは一部のコンポーネント (リスト、ウォーターフォール、スクロール ビュー/スクローラー) のみです。スクロール可能なコンテンツは、スクロール可能なコンポーネントの下に配置する必要があります。これはフロントエンド開発の習慣に従わないため、nvue がユニアプリ モードにコンパイルされると、ページの外層にスクローラーが自動的に設定され、高すぎる場合はページ コンテンツが自動的にスクロールします。(リサイクルリストがある場合、コンポーネントの設定やページの設定は行われません)。設定は後ほど提供しますが、自動設定しないように設定することもできます。
App.vueで定義されたグローバル js 変数は、nvue ページでは有効になりません。globalData と vuex は有効です。App.vueで定義されたグローバル CSS は、nvue ページと vue ページの両方で有効です。グローバル CSS 内の一部の CSS が nvue でサポートされていない場合、コンパイル時にコンソールに警告が表示されます。これらのサポートされていない CSS を条件付きコンパイルでラップすることをお勧めします。APP-PLUS-NVUE- nvue:load Custom fontでのフォントアイコンの使い方参考、スタイルではフォントファイルを導入できません。ローカル フォントの場合は、plus.io API を使用してパスを変換できます。
- 現在、nvue ページでの使用はサポートされていません
typescript/ts。 - nvue ページがネイティブ ナビゲーション バーを閉じたときに、ステータス バーをシミュレートしたい場合は、記事を参照してください。ただし、nvue ページではネイティブ ナビゲーション バーを使用することを強くお勧めします。nvue のレンダリング速度がどんなに速くても、ネイティブ ナビゲーション バーほど速くはありません。ネイティブ植字エンジンが JSON を解析してネイティブ ナビゲーション バーを描画するのにはほとんど時間がかかりませんが、nvue の JS を解析してページ全体を描画するには、特に新しいページがアニメーション期間に入った場合に非常に長い時間がかかります。 、アニメーション中にネイティブ ナビゲーション バーは表示されません。画面全体の空白またはスプラッシュ スクリーンが生成されます。
nvueを使用する際の注意点
-
Nvue のCSS は、WebView の CSS 構文のサブセットであるflex レイアウト のみをサポートします。これは、オペレーティング システムのネイティブ タイプセットが flex 以外の Web レイアウトをサポートしていないためです。もちろん、さまざまなページを配置するには flex で十分ですが、書き方を工夫する必要があります。
-
セレクターのサポートは少なく、単純なもののみがサポートされています
class="classA"。クラス バインディングでは配列構文のみがサポートされます。 -
メディアクエリはサポートされていません。
-
複合スタイルはサポートされておらず、短縮表記もサポートされていません。
-
フォント ファイルを style に含めることはできません。
-
レイアウトではパーセンテージを使用できません
width：100%。 -
背景画像など、一部の Web CSS プロパティは nvue ではサポートできません。ただし、画像コンポーネントとレイヤーを使用して、Web と同様の背景効果を実現できます。ネイティブ開発自体にWeb背景画像という概念がないからです。
-
nvue のコンポーネントは Android 側でデフォルトで透明になっているため、設定しないと
background-colorゴーストの問題が発生する可能性があります。 -
テキスト コンテンツは
textコンポーネントの下にのみ存在する必要があり、テキスト コンポーネントはコンテンツを新しい行に書き込むことはできません。そうしないと、削除できない周囲の空白が存在します。 -
文字サイズ、文字色を設定できるのはラベルのみです
text。
詳細については、以下を参照してください。
はじめに | uni-app公式サイト（dcloud.net.cn）
uni-app_w3cschool で Weex/nvue を使用する場合の注意事項
ネチズン - 開発ノートの記事:
uni-appがvueやnvueを開発する際の注意点（fly63.com）