[実践]ユニット-APpのチームでの使用概要

最近はユニアッパーを使った感じ.チームメンバーとコストを考慮すると、チームはReactからVueテクノロジースタックに移行しました.
使用体験
使わない前に本当にVueと同じだと思って、使ってから知りました.これはVueと小さなプログラムの結合体ですね.ウィジェットのようなラベル、Vueの構文を書きます.Uni-APpドキュメントと微信ウィジェットのドキュメントを比較すると、あまり悪くありませんが、wx=>uniを熟知しているだけで、Vueとウィジェットを直接手に入れることができます.
注意事項を見て、Vueとの違いを示す必要があります.例えばダイナミックなClassがStyleにバインドされ、H 5で使えるようになり、アプリやウィジェットが切れてしまいます.
ルート
Uni-Appのルーティングはすべてpages.jsonファイルに配置されており、複数人が開発する際にルーティングが分割できず、処理がうまくいかなければ衝突することが多い.
中の他の構成項目は、公式ドキュメントを参照して処理できます.
ツールバーの
ナビゲーションバーで注意しなければならない問題の一つは、異なる端の展示形式が異なるため、互換性の問題を処理するには、ナビゲーションバーをカスタマイズすることができ、オリジナル、フレームワーク、プラグインを使用することができますが、互換性が異なり、マルチエンドの需要は必ず異なる設備で走って効果を見なければなりません.
たとえば、ウィジェットやアプリでは、オリジナルナビゲーションバーがキャンセルされないと、カスタムナビゲーションバーは使用できません.pages.jsonにオリジナルナビゲーションバーを配置します.
互換方法としては,Uni−APpが提供する条件でコンパイルし,各端の異なる相違を処理する.支払いの業務も条件コンパイルにより,異なるエンドコールの異なる支払い方式を区別する.
ライフサイクル
分 、 、 .ほぼVueとの差は多くなく、ページライフサイクルは現在のページに対して、アプリケーションライフサイクルはウィジェット、APPに対して適用されます.これらの穴の過程はすべて踏んでみなければなりません!
ネットワーク要求
公式のuni.requestは基本的なリクエストをカプセル化していますが、ブロックされていません.私たちも最初は自分でこの上にシェルを追加して、簡単なパッケージでリクエストを送信しました.次に、flyio、axiosなどのサードパーティ製ライブラリの使用を選択します.
リソースの最適化

Webpackのようなリソースパッケージの最適化には関係ありませんが、ドキュメントには、リソースプリフェッチ、プリロード、treeShakingがプロファイルに設定されているか、開発ツールにチェックマークされていると記載されています.ウィジェットも自動圧縮混同をチェックします.

ファイルや画像リソースを削除します.パッケージ化するときに計算されるので、例えばstaticディレクトリの下のリソースファイルはパッケージ化され、画像リソースが大きすぎてもよくありません.

Uni-App実行時のフレームワークマスターchunk-vendors.jsファイルは処理され、gZipに配置されます.

Web-View
Uni-APpでWebViewを使用すると、ローカルのリソースとネットワークのリソースを使用できます.プラットフォームによって異なります.ウィジェットはローカルHTMLをサポートしていません.また、ウィジェット側のWebViewコンポーネントには必ずオリジナルのナビゲーションバーがあります.
注意しなければならないのは、ウェブページがアプリケーションpostMessageに導入される必要があります.そうしないと、通信でデータが得られません.
グローバルステータス
ウィジェットに共通のデータを各ページに追加するには、3つの方法があります.
Vue.prototype
Vueのすべてのインスタンスにマウントでき、すべてのページで使用できます.

// main.js
Vue.prototype.$globalVar = "Hello";

次にpages/index/indexで使用します.

globalData

    export default {
      globalData:{
        data:1
      }
      onShow() {

      getApp().globalData.data; //   

      getApp().globalData.data = 1; //   
    
  };

Vuex
Vuexは、Vue専用の状態管理モードである.データを集中的に管理し、データの変化や流れを観測することができます.
以前は、プロジェクト内のグローバル変数を記述する方法を交通手段で比喩する通俗的な比喩を見た.
以下に、これらの一般的な理解状態を列挙する.
Vueプラグインuni.web-view.jsは一部のグローバル変数(アプリケーション状態と呼ぶ)を管理することができ、学習後、bus(中国語:バス)という名前がイメージされていることが分かった.
まずこれらの方法を羅列しますが、この分類は厳密ではありません.
1、VueBus:バス2、Vuex:飛行機3、全局import

a.vue-bus:専用車

b.new Vue():急行

c.Vue.use:追い風車

4、globalData:地下鉄
まずVue.prototypeは、バスのように柔軟で便利で、いつでも乗ることができます.コードに表れて、とても軽くて、呼んですぐ来て、欠点はメンテナンスがよくなくて、これらの変数を管理する専門のファイルがありません.普段バスを待つ気持ちを想像して、戻ってくるのを知っていましたが、いつ来るのか分からず、不安な感じがしました.VueBusは、飛行機のように荘重で、タワーは飛行機の動作を調整し、飛行機はいつでも地面に自分の位置を報告し、大型プロジェクトに適しています.表現コードでは,すべての状態を集中的に管理し,予測可能な方法で変化する.飛行機が絶対につながっていないという特徴にも対応しています.
第3の方式はVuexで、3種類に分けられ、それぞれ import、new Vue()、Vue.use()、Vue.prototypeである.ネット予約車にたとえると、3つのタイプがそれぞれ対応しています.専用車、急行、追い風車です.すべて十分に柔軟で、コードの中で表現します:1か所はインポートして、至る所で利用することができます.
また、それぞれ説明します.new Vue()滴滴の礼橙専用車のように、公式運営で、安全で信頼できる.コードに表れているのは、Vueが公式にメンテナンスしているライブラリだけがこの方法を使用することができます.Vue.use()急行のように、滴滴の規範に合致しなければ、専任運転手になれない.コードには、インポートしたプラグイン(またはライブラリ)がVueの書き方(すなわち、Vueプラグインの書き方がカプセル化されている)に合致しなければならないことが示されています.Vue.prototype追い風車のように、上の2つほど厳しくなく、一般的なjsの書き方に合えばいいので、追い風車の参入敷居が少し低いようです.
もちろん、Uni-AppのプロジェクトにはglobalDataでグローバル変数を定義することができます.比喩ではなく、地下鉄を使うことができます.まずvue-busより管理とメンテナンスがよく、地下鉄がバスよりも信頼できるかどうかを想像します.次にVuexよりも簡単です.globalDataは本当に簡単に変数を定義しているからです.
globalDataはWeChatウィジェットで発明されたもので、Vueプロジェクトには対応する概念がないようですが、Uni-Appで同様に利用できます.
上述したように、この分類方式は厳密ではなく、主に原理的に現れ、簡単な並列関係や含む関係ではない.
プラグイン市場
使いやすいコンポーネント:
ColorUI-UniApp:コンポーネントライブラリではなくスタイルライブラリです.
https://ext.dcloud.net.cn/plugin?id=239
解答模版:左右滑解答模版、単選題、多選択肢、判断問題、空欄記入問題、問答問題.ColorUIベースで作られています.
https://ext.dcloud.net.cn/plugin?id=451
UCharts高性能全端グラフ:
https://ext.dcloud.net.cn/plugin?id=271
最后に:各端の异なっている性、多くのもの、H 5はとても良くて、本物に行くと挂かって、本物はよくて、小さいプログラムを交换して漂って、异なっている小さいプログラムの间にも异なって、重点は详しくドキュメントを読むことです.
クラウドパッケージの制限、クラウドパッケージ(APK)の毎日の制限があり、回数を超えて購入する必要があります.
オリジナルで実現できる機能ユニット-APPは実現できないかもしれませんが、全体的に開発すればまあまあですが、多くのピットはマルチエンドが互換性がないため、書くのが面倒なだけでなく、基本的に解決できる戦略があります.以前Weexでアプリを書くより開発体験がいいです.