uniappの個人的な経験

ユニアプリとは何ですか

Uniapp とは正式には、vue 構文に基づいた一連のコードがマルチターミナル h5 アプリ アプレットをコンパイルできることを意味します。非常に良さそうですが、製品を作成する場合は、対応するテクノロジを選択することをお勧めします。公式より#end などで強制的に分離して h5 を記述する場合は、独自のスキャフォールディング アプレットを使用してください。公式のデモもあります。 

以下のインストール環境を理解するために、私が個人的に理解している uniapp を紹介したいと思いますが、これはおそらく小さなプログラムの公開バージョン (グラフィック カードの公開バージョン) です。

WeChat ミニ プログラム、Alipay ミニ プログラムなどは、独自の機能をいくつか備えた公開バージョンに基づいているため、構文は非常に似ていますが、アプリの観点から見ると、ミニ プログラム機能をサポートしているが、機能が備わっていない空のアプリです。任意のページ表示 (正式には標準ベースと呼ばれます) WeChat にはミニ プログラムの機能しかないことがわかりますが、私たちが作成するすべてのページ機能は、このミニ プログラムをますます充実させ、強力にするためのものです。よくできていて、WeChatでも真似できますが、ユーザーの視点から見ると、たとえそれを感じられなくても、アプリであるように感じられます。

前述したように、標準ベースは公式によって提供されます。公式は経験のためのテスト証明書も提供しますが、公式はアプリごとに異なるベースを設定するほど優れたものではなく、すべての新規開発者には同じアプリアイコンが表示されます。開発者が変更できるのは起動インターフェースの内部ページのみです。また、プッシュ版のアップグレード、位置決め、支払いなどの一部のアプリコアは、正式版では体験するのが困難です。カスタムベースである公式ソリューションも提供されています。独自ベースで高度な機能カスタマイズが可能ですが、それに伴いios、Android証明書、xcodeシミュレータ、Android x86シミュレータなどの開発条件がさらに必要となります。 

ここまで言うと、uniapp のパフォーマンスだけを確認したい場合は、デモを作成して効果を確認するか、純粋なページ開発には公式を使用すればよいということでしょう。特別なベースを開発するにはカスタムベースを使用する必要があります。フロントエンド開発に適していますが、ネイティブについてはあまり知りません。公式は、次のように直接使用できるいくつかの実用的なプラグインを提供するプラグインマーケットも提供していますvue プラグインがありますが、一部のプラグインには費用がかかります。

開発環境

基本的な

• Hbuiler: パッケージ化ツール。パッケージ化パラメーターを構成します (クラウド パッケージングには apicloud が好きですが、これは少しバンドルされすぎています...製品を使用するには、ソフトウェアをインストールしてアカウントを登録する必要があります)
• 実機→最高の Android: 接続して実行すれば準備完了
• Android証明書：オンラインで無料で申請できます
• Chrome: ページ レイアウトを作成するときに実機は必要ありません

テクノロジースタック (フロントエンド偏り)

• Vue ファミリー バケット ルート Vuex ルート ジャンプ イベント ストレージ ディストリビューション プロップ スロット エミット 親子コンポーネント配信
• EventBusイベントリスニング配信キャンセルリスニング
• Es6 は、インポート、エクスポート、このスコープ プロトタイプの約束を認識しており、再帰的な重複排除関数を作成でき、時間暗号化や復号化などの独自のユーティリティをカプセル化できます。
• バージョン番号の概念 wgt アップグレード (ホット アップデート) とパッケージ全体のアップグレード
• ミニ プログラムにはグローバル変数とローカル変数の概念があることを理解するのが最善です。
• 中規模プロジェクト向けに、より少ない scss メンテナンス ファイルを作成できるようになりました。UI のほとんどが依然として自分で描画されているため、サードパーティの vue ui を直接使用することはできません。公式 ui をベースに変更することもできます。
• Iconfont アイコン セットは、必要がない場合、またはベクターである場合は本当に無駄です。
• Webview (ネイティブと h5 がどのように相互作用するかを知っています)
• 企業が h5 の一部を使用して実装する場合、さまざまなモバイル UI と適応を習得する必要があります。
• onLaunch、onShow、onHide トランザクションなどの基本的なアプリのライフサイクルを理解し、ページのプッシュ ポップ スタックも理解します。

C 側のアーキテクチャ

C サイドは、ユーザーが目にするインターフェイス要素であるさまざまなページ (基本単位) から大まかに構成されます。ページを書き込むときは 3 つのオプションがあります。

• .vue は基本的に h5 vue とあまり変わりません。div は view に置き換えられ、span は text に置き換えられます。さらに特別なフックがいくつかあります。小さなプログラムの作成方法は、ほとんどの css3 組み込みの plus+ オブジェクトをサポートします。
• .nvue は .vue に似ていますが、レンダリング エンジンは weex なので、より厳密です。たとえば、背景は使用できませんが、背景色を使用できます。css3 疑似クラスは、静的、絶対、または弾性レイアウトのみです。もちろん、 、エクスペリエンスはネイティブの組み込み plus+ オブジェクトに近くなります。
• WebView の h5 は文字通り通常の HTML と同じであり、手動の plus+ オブジェクトが必要です。

plus+ オブジェクトとは何ですか? 簡単に言うと、wx-jsk のように、plus.runtime.version 現在のバージョン番号、 plus.storage ローカル ストレージ、 plus.nativeUIネイティブ インターフェイスなど の取得など、いくつかの固有の API を呼び出す前に、オブジェクトをページに挿入する必要があります。

Uniapp には plus オブジェクトが組み込まれていますが、その上にカプセル化層があり、uni で始まる API インターフェイスは小規模なプログラムやアプリとの互換性を目的としています。つまり、最下層は依然として同じものです

Webview
ページにはローカルページのURLやコンテンツが直接表示され、アプリのユーザー情報を取得してネイティブ機能を起動するなど、plusオブジェクトを介してシェルと通信することができます。

uniappにはWebviewの機能がいくつかあります

• アプリは主に Webview オブジェクトを取得し、オブジェクト evalJS メソッドを使用してデータを h5 に渡します。イベント駆動型にしたい場合は、EventBus を使用する必要があります。
• h5 は主に webview タグを取得することによってデータをアプリに渡します 。 @message

• デフォルトでは、公式のタイトル バー (Web 内のタイトルに基づく) が使用され、Web ページは、pages.json で titleNView オブジェクトを設定します。

  タイトル バーをカスタマイズする必要がある場合は、「navigationStyle」:「custom」を設定し、Webview オブジェクトを取得して手動で設定します。

  wv.setStyle({titleNView:{"titleText": "自定义标题,})

• アプリストレージとh5 plusストレージは相互運用可能です

基本的なユニットと機能を一般的に理解した後、アプリを開発する場合、ネイティブ Vue で何ページ書くか、WebView で何ページ書くかを考え始めます。また、100% ネイティブ Vue を使用して作成することもできますが、保守と反復が非常に面倒な場合 (将来、一部の企業で新しいページを追加する必要がある場合、バージョンを更新する必要があります)、または 100% Web ビュー ページ (wap2App エクスペリエンスは良くありません）、これはユーザーエクスペリエンスにある程度影響を与えます。

優れた APP エクスペリエンスを実現するには、最初のレベル ページのタブバー、コールド データ ページなどを初期段階で合理的に割り当て、ネイティブ vue.h5 を使用してホット データ アクティビティや特定のビジネスを実行する必要があります。 , ただし、サーバーの h5 ページにアクセスできない場合でも、アプリにアクセスできることを確認します。他のアプリのバージョン アップグレードとプッシュ ログインへのフレンドリーなアクセス。ネイティブに処理するのが最善です。アプリが属する業界のビジネス ニーズによって異なります。に。

プロジェクトは 2 つの部分に分割するのが最適です。

1 uniapp 1 h5 は、 scssクラスやrequest.js などの技術的手段を使用して開発エクスペリエンスの一貫性を実現できます。スキャンの開始など、Plus オブジェクトを通じてネイティブと対話するには、native.js ツール クラスをカプセル化するのが最善です。 h5 で直接コードを記述するだけです 。メソッドを呼び出すだけです。初心者の場合は、関数の開発だけに集中してください。ベテランの場合は、uniapp 機能といくつかのプラグインを使用して高品質のメソッド クラスを作成し、ユーザー エクスペリエンスを向上させることができます。 app.scan(callback)

経験

• onLaunch App.vue で他のページのみを宣言し、onShow onLoad   それらの ページを使用してonLoadトリガーするのは 1 回だけであり、回数は onShow無制限です。

• プラグイン マーケットのネイティブ プラグインはカスタム ベース専用です。オフィス ファイルを開いてプラグインをパッケージ名にバインドする場合は、証明書が有効であることを必ず確認してください。

• 例えば、ページレイアウトインターフェースのドッキングをChromeモードで実行してSDKの機能をテストすることができ、シミュレーターでデバッグや開発を行った後、実機で実行することで効率が向上します。

• レイアウトの前に、uni-ui uni-uiを考慮してください

• Mescroll は非常に優れたプルアップ、スクロール、プルダウンの更新プラグインですが、手動で作成しないことをお勧めします。

• webviewiw setStyle の際、しばらく setTimeout が必要で、それを h5 に設定する必要があります。document.addEventListener('plusready',plusReady,false);

  一部の Android マシンでは初期化中に plus オブジェクトが見つからない可能性があるため、エラーが報告されます。

• または、初期化の問題は、onLaunch で非表示の Web ビューを開いて h5 を開くことに基づいています。プリロード効果は達成されました。それでも遅い場合は、ロードを行う必要があります。

• Web ビュー ページで、  webviews = this.$scope.$getAppWebview() Web ビュー コレクションを取得し、現在の Web ビューを取得します。 wv = currentWebview.children()[0]

• たとえば、Web ビューのカスタム ヘッダー ボタンを実装したい場合は、右上隅のボタンをクリックしてページにジャンプし、 wv.setStyle({titleNView: {buttons:[btn1,btn2,...}) ボタン設定を使用します。

ただし、Android のボタンの onclick は string 型のみを受け入れるようであるため、同様の互換性プロセスを実行する必要があります。

                                          //$h5 首先你需要定一个挂在对象 把EventBus挂在进去

	                                 if (plus.os.name=="Android"){
	                  			return "javascript:window.$h5.EventBus.dispatch('"+cbName+"','haha');"
					}else{
						return function(){
							var jsString='window.$h5.EventBus.dispatch("'+cbName+'","haha");'
							wv.evalJS(jsString);
						}
					}

• Uniapp はスパ シングルページ アプリケーションをサポートしていますが、プッシュ アニメーションとポップ アニメーションを自分で処理する必要があります。

• ネイティブ vue+h5 モードを使用してプロジェクトをビルドし、アップグレードを容易にするために比率を約 3 ～ 4 7 ～ 6 に開いてみてください。

• 梱包時に黒縁が発生する場合がございますので、対応するサイズの起動画像をご用意ください。

• バージョン検出はパッシブとアクティブに分ける必要があり、一部のシナリオではユーザーに強制的にアップデートする必要があります。

• 統一アイコンはベクターアイコンを使うのがおすすめです 高品質で便利です h5 uniappでも使えます 結局各アイコンのパスが非常に面倒です

• 有効利用 plus.storage と plus.sqliteローカル ストレージは、詳細なコールド データと履歴データなど、どちらのストレージが優れているかを明確に区別します。もちろん、うまくやれば、キーが使用されるたびにサーバー コピーを送信して、アプリをより使いやすくし、ユーザーの向上を図ることができます経験。

• uniapp は大きな技術スタックです。公式のオールインワンを決して真似してはいけません。少なくともアプリを作りたい場合は、そのアプリを使用してください。ミニプログラムを変更するか、ミニプログラムに使用してください。最初は非常に粗いバージョンですが、繰り返して市場レベルのアプリに仕上げます。まったく問題ありません。前提条件はそれぞれに優れていることです。class api sdk

• 公式も wap2app を推奨しており、実際の効果はそれなりですが、webview を使って自分で実装するのには及びません。