図1に示すように、構成された単一のアプリケーションフレームワークを:(以下は基本的なディレクトリ構造ユニアプリアイテムを作成することです）
pages.jsonファイルはグローバルに設定ユニアプリのために使用され、タブバーなどの下部にページファイルパス、ウィンドウスタイル、ネイティブのナビゲーションバーを決定します。（App.sjon同様の小さなプログラム）
例:(以下はpages.json）は、すべての設定オプションが含まれている
{
[{「ページと」
「パス」：「ページおよび/インデックス/インデックス」、
「スタイル」： {//など各ページのステータスバー、ナビゲーションバー、タイトル、ウィンドウの背景色、セット
「navigationBarTitleTextを」：「輸入書類」、//ナビゲーションバーのタイトルテキスト
「enablePullDownRefresh」：真、//ドロップダウンリフレッシュを開きます
}
}、{
"パス"： "ページ/ホーム/ホーム"、
"スタイル"：{
"navigationBarTitleText"： "ホーム"
}
}、{
"パス"： "ページ/分類/分類"、
"スタイル"：{
"
「navigationBarTextStyle」：「黒」、 // ナビゲーションバーとステータスバーの色前景色のタイトル、唯一のブラック/ホワイト支える
「navigationBarTitleText」：「デモ」、//ナビゲーションバーのタイトルテキスト
「navigationBarBackgroundColor」：「＃1 f7f7f7」 、/ /ナビゲーションバーには、デフォルトの背景色f7f7f7番号である
"backgroundColorの"： "＃1 FFFFFF"、ウィンドウの//背景色
"usingComponents"：{} //参照アプレットコンポーネント
}、
"タブバー"：{
"色"：「＃FFFFFF 」、デフォルトのテキストの色上記//タブ
『selectedColor『：』＃00cf89』 、//タブのテキストの色の選択時に
『：』＃1 FFFFFF 『のbackgroundColor』 、//タブの背景色
『のborderStyle『：』黒』 、//国境のタブバーの色、オプションの値が黒、白
「高さ」：「は50px」、//タブバーのデフォルトの高さ
「のfontSize」：「10pxの」、 // デフォルトのテキストサイズ
「iconWidth」：「は24px」、 // 、ズームなどのデフォルトのアイコンの幅の比は、
「3px」を間隔、//アイコンとテキスト：「間隔」
"リスト"：[{//タブ列表
"pagePath"： "ページ/ホーム/ホーム"、
"あるIconPath"： "静的/画像/ img.png"、
"selectedIconPath"： "静的/画像/ img_on.png"、
"テキスト"： "ホーム"
}、{
"pagePath"： "ページ/分類/分類"、
"あるIconPath"： "静的/画像/ ify.png"、
"selectedIconPath"： "静的/画像/ ify_on.png"、
"テキスト"： "分類"
]}
"midButton"：{//中间按钮、仅在リスト项为偶数时有效
"幅"： "80px"、
"高さ"： "は50px"、
"テキスト" "テキスト"、
"あるIconPath："静的/画像/ btn.png」、
"iconWidth"： "24ピクセル"、
"backgroundImageの"： "静的/画像/ btn_on.png"
}
}
}
//////////////////////////////////////////////// ////
mainfest.jsonファイル、アプリケーションの設定ファイルであるアプリケーション、アイコン、およびその他の権限の名前を指定します。
名前：//アプリケーション名が
のappid：//アプリケーション識別を、ときに新しいユニアプリアイテム、dcloud雲の分布。
説明：//アプリケーションの説明
versionName：//バージョン名
versionCode：//バージョン番号
transformPX：//コンバートPXプロジェクトにtrueに、PXはRPXに変換するかどうかを
///////////// ///////////////////////////////////////
package.jsonの増加ユニアプリのファイル拡張ポイント、カスタム条件付きコンパイルのプラットフォームを実装することができます。
設定使用方法：
{
"UNI-のApp"：{
"スクリプト"：{
"カスタム・プラットフォーム"：{
"タイトル"： "カスタム拡張名"、
"ブラウザ"： ""、//ターゲットブラウザを実行するには
、「ENV 「：
}、
"DEFINE"：{
"CUSTOM-CONST"：真条件付きコンパイル定数に//カスタム
}
}
}
}
}
//////////////////////// ///////////////////////////
パッケージ化、そして、このために必要である、ああ、一般的な構成のために使用されている場合注、このファイルをvue.config.js WebPACKの他のコンパイラオプション
module.exportsは=関数（）{
publicPath： '/'
}
//////////////////////////////// /////////////////
使用uni.scss文書では、全体的なスタイル制御アプリケーションを容易にすることです。
使用される場合のlang =「SCSS」スタイルだけでなく、追加のノードに、SCSSの必要性がhbuilderxプラグイン内部インストール
//////////////////////////// ////////////////////
App.vueは、すべてのページがApp.vue、ページエントリファイルに切り替えられ、ユニアプリ本体です。
しかし、彼は、ビュー要素を記述することはできませんページ自体ではありません。
ファイルのアクションが含まれます：グローバルストレージグローバルデータを構成し、アプリケーションライフサイクル機能、グローバルスタイルの設定を呼び出す。
アプリケーションライフサイクルのみApp.vue、モニター無効なページを聞きます。
アプリケーションライフサイクル機能：
OnLaunch：ユニアプリの初期化が完了したときにトリガ（グローバルは一度だけトリガー）
onShow：ユニアプリの起動、またはフォアグラウンドのショーに背景から
onHide：ときにバックグラウンドにフォアグラウンドからユニアプリ
のonError：ユニトリガー所与アプリ
：グローバルデータがApp.vueに配置された定義された
エクスポートデフォルト{
グローバルデータ：{
テキスト：「テキスト」
}
}
JSグローバルデータは、以下のように動作する：getApp（）globalData.text =「テスト 」;
onLaunch適用する場合、getAppオブジェクトを取得していない、あなたは一時的に$ scope.globalData GETグローバルデータ。これを使用することができます
@import」../../common/common.css'：グローバルスタイル、App.vue、CSSファイル参照の一般的な方法で;
//////////////////////////////////////////////
main.js主な役割は、VUEのインスタンスを初期化し、このようなプラグイン必要vuexの使用などのグローバルコンポーネントを定義することで、単一のアプリケーションファイルエントリです。
まずVUEライブラリとApp.vueを導入し、VUEのインスタンスを作成し、VUEインスタンスをマウントします。
;インポート「VUE」からVueの
アプリケーション」./App 『からインポートし、
ページ頭からインポートpageHead』 ./components/page-head.vue';//グローバル参照アセンブリ
Vue.config.productionTip = falseに、
Vue.component （「ページ頭」、pageHead ）; // グローバル登録ページヘッドアセンブリ、各ページが構成要素として使用される
App.mpType =「アプリ」;
CONST =新しい新しいアプリヴュー（{
...アプリ
}）
アプリ。$）（マウント; // Vueのインスタンスをマウント
////////////////////////////////////// ////////////
ヒント
hbuilderxに、入力（にconsole.logを詰まらに直接出力することができる）、
入力clogv直接出力はconsole.log（「：」+）。
2、ページのライフサイクル
onLoad（）{}モニタページの読み込み、最後のページのデータ、パラメータ型オブジェクト、パラメータパッシングのためのページに渡されたパラメータ。
onShow（）{}ページ表示モニタ。ページが現在のページへの復帰を含む画面のトリガ、上に現れるたびに、ページの下の点から露出しています。
最初のページのレンダリングを聞いてonReadyは、（）{}レンダリング速度ならば、ページをトリガする前に、完全にアニメーションを入力することに注意してください、完了です。
onHide（隠された）{}モニタページ
のonunload（）{}リスナーがアンインストールされ
てonResize（）{}リスニングウィンドウサイズ変更（APP、マイクロチャネル・アプレット）
onPullDownRefresh（）{}ユーザープルダウン動作をリスニング、一般的なプルダウンリフレッシュ
onReachBottom（）イベントの{}最後に、ページスクロール部は、スクロールビュー、共通言語ドロップダウン次のデータはない
onBackPress（）{}モニターページに戻る{から：戻るボタン、navigateBack =イベントを返す }、戻るボタンの左上隅のソースは、バックボタン、navigateBackあることを示しソースはそのuni.navigateBackを示しています
3、コンポーネントのライフサイクル
//同じライフサイクルおよびコンポーネントでサポートされているユニアプリのVUE。
beforeCreate（）{}初期化インスタンスの後に呼び出される
すぐに作成されたコール・インスタンスの後に作成された（）{}
ロードが始まる前beforeMount（）{}が呼び出され
た後（）{}例最大マウント搭載呼び出し
（のBeforeUpdateをデータの更新が場合）{}呼び出さ
更新フック呼び出した後、データの変更は、仮想DOM再レンダリングとパッチ引き起こされるので（）{}
）beforeDestroyを（{}破壊インスタンスを呼び出す前に
破壊破壊（）{} VUEインスタンスの後に呼び出しの後を呼び出し、すべてが表示インスタンスをVUE -ド結合し、すべてのイベントリスナーが削除され、そのすべての子孫は破棄されます。
4、ページ
getApp（）関数は、典型的には、グローバルデータを取得するため、アプリケーションの現在のインスタンスを取得するために使用されます。
例：
CONST getAppアプリ=（）;
にconsole.log（app.globalData）;
getCurrentPages（）関数は、ページのスタックの現在のインスタンスを取得するために使用され、スタックのアレイの形で与えられた順序で、最初の要素は最終的に家であり、そして現在のページの要素。
getCurrentPages（）は、すべてのページオブジェクトに得ることができ、そして配列に従って、指定されたページのWebViewオブジェクトを取ることができます。
ページのgetCurrentPages = VAR（）;
[。-pages.length 1] VAR =ページページ;
VAR = currentWebview getAppWebviewページ$（）;.
consol.elog（currentWebview.id）; // WebViewのの現在の値IDを取得します。
注：
navigateTo、RedirectTo唯一のオープン以外のTabBarページ。
switchTabのみオープンTabBarのページ。
再起動は、任意のページを開くことができます。
5、ページのニュースレター
。$のEMIT（eventNameの、オブジェクトUNI ）; // イベント名、イベントトリガーの追加パラメータがトリガグローバルカスタムイベントを実施しました。追加のパラメータは、リスナーコールバックに渡されます。
。UNI $のEMIT（ '更新' 、{MSG： ' アップデートのページ'}）
.. $ UNI ON（eventNameの、コールバック）; //グローバルカスタムイベントをリッスン、イベントは$ EMIT UNIによってトリガすることができ、コールバック関数を受け取り、機能トリガすべての着信イベントの追加パラメータ
UNIを。$ ON（「更新」、関数（データ）{
にconsole.log（「更新からイベントを聞く、キャリー・パラメータ」+ data.msg）
}）
UNI。$（かつてeventNameの、コールバック）; //グローバルカスタムイベントをリッスン。イベントを発する。UNIで$をトリガし、一度だけトリガすることができ、最初のトリガ後のリスナーを削除します。
ユニ。$（ '更新'、関数（データ）{一度
にconsole.log（ 'モニタ更新イベント' + data.msg）
}）
UNI。$ OFF（[eventNameの、コールバック]）独自のイベントリスナーを削除するグローバル
ユニ。$ OFF（「更新」、関数（データ）{
}）
注：破壊するイベントリスナーを使用する場合、例えば、ページが除去オフUNI $内部リスナー、ONUNLOAD登録にUNI $内部ONLOAD ... または1回限りのイベント、ユニの直接使用。$リスニング一度。
6、ネットワーク要求
// getメソッドの場合は、クエリ文字列にデータを変換します。たとえば、{名：「名前」、年齢 ：18} 変換結果は名前である=名＆年齢= 18である
ポスト方法およびヘッダのため//は[「コンテンツタイプ」]アプリケーション/ JSONデータは、JSONシリアル化意志です。
ポストヘッダ方法@ [「コンテンツタイプ」]データアプリケーション/ X-WWW-フォーム- URLエンコード、およびデータクエリ文字列に変換します。
例：
uni.request（{
URL： ''、//インタフェースのアドレス、
データ：{//パラメータ
名： '名前'
}、
メソッド： 'GET'、
ヘッダ：{
'コンテンツタイプ'： 'Applicaiton / JSON' //カスタムリクエストヘッダ情報
}、
成功：（RES）=> {
にconsole.log（RES、 '成功'）
}、
失敗：（ERR）=> {
にconsole.log（ERR、 '失敗'
7、アップロード、ダウンロードファイル、写真のクラス
開発者のサーバーにアップロード//ローカルリソース、クライアントが開始コンテンツタイプはマルチパート/フォームデータであるポスト要求、。
uni.chooseImage（{
COUNT :. 1
たSizeType：[ 'オリジナル'、 '圧縮']、
たsourceType：[ 'アルバム'、 'カメラ']、
成功：（chooseImageRes）=> {
CONST = tempFilePaths chooseImageRes.tempFilePaths;
UNI。 uploadFile（{
URL： ''、//サーバアドレス
filePathに：tempFilePaths [0]、
名称： 'ファイル'、
FORMDATA：{
'ユーザー'： 'テスト'
}、
成功：（uploadFileRes）=> {
コンソール。
uni.downloadFile（{
URL： ''、//インターフェースアドレス
成功：（RES）=> {
にconsole.log（RES）
}
}）
公式サイトケインに行くために多くのAPIがあります。
最近、ユニアプリの開発、プロセスを作成するために、彼のプロジェクトについての話とシュシュのテストデモ版をプレイする過程で
エディタまたはオプションHBuilderX騒々し左上隅がファイルがある、ファイルをクリックし、新しいファイルを選択し、アイテムがああユニアプリを選択し、以下のボックスをポップアップ表示されます選択。
これまでのところ、このプロジェクトが成功を作成し、[作成]をクリックし、プロジェクト名を入力してください。
次に、新しいvue.config.jsonプロジェクトファイル、内容は内部として設定することができます。
タイトルバーでHBuilderXは、リリースを参照してくださいが、ネイティブAPP-のパッケージも選択し、以下のボックスをポップアップ赤いボックスマークを選択し、ボタンのパッケージをクリックしますします]をクリックします。
注：パッケージが成功した後、そこにアプリケーションをダウンロードするためのアドレスになりますが、わずか5回ああをダウンロードすることができます。
文書の公式ウェブサイトを特に参照すると： https://uniapp.dcloud.io/collocation/pages