ノートアプレット開発マイクロチャネル（B）

小さなを構成するプログラムコード

　　ツールの開発を素早くwechatdemoプロジェクトを作成します。このプロジェクトは、ファイルの種類の内部で生成されました：

　　プロフィール.json

　　テンプレートファイル、HTMLテンプレートと同等のものを.wxml

　　HTML CSSスタイルシートと同等のスタイルファイルとして.wxss、

　　JSのための.jsスクリプトロジックファイル、jsのスクリプトのHTMLと同等

　　アプリの全体的なプログラムの記述

　　各ページを記述した複数のページ

　　プロジェクトのIDE設定ファイルproject.config.json

　　共通ライブラリプログラムロジックutilsの

 

2.メインプログラム（名前のアプリ）三つのファイルの小さな部分は、プロジェクトのルートディレクトリに配置する必要があります

　　ファイルの必要な役割は、
　　小さなプログラムのロジックがあるapp.js
　　app.jsonアプレット一般的な構成である
　　app.wxssアプレット共通のスタイルシートはありません

　　2.1アプリapp.jsファイルの全体的なプログラム（登録アプレットプロジェクト）の記述

　　1.Appは（）内のapp.jsに登録する必要があり、および1つ以上登録することはできません。
        コールgetApp（）内のApp（機能）で定義されてはいけない2.は、インスタンスを取得するには、このアプリを使用することができます。
        onLaunch（）、そのページが生成されていない場合3. getCurrentPagesを呼び出すことはありません。
        getApp 4.（）インスタンスを取得した後に、ライフサイクルメソッドを呼び出そうとしないでください。

　　オブジェクトパラメータに任意の関数やデータを追加するために、他の開発者は、この使用してアクセスすることができる
　　のApplicationContextに対応し、全アプレットコンテキストは、使用、すなわち全体のサービスアプレットの範囲にあります。
　　app.jsプログラム体層getApp（）論理層でページを.jsファイルを使用して、このアクセスロジックを用いて形成される。プロパティ名にアクセスすることができます。

//はapp.js 
のApp（{ 
  onLaunch（オプション）{ 
    //ドゥ初期何か打ち上げ。
  }、
  onShow（オプション）{ 
    //何かするときショー。
  }、
  onHide（）{ 
    //実行（Do）何かするとき皮を。
  }、
  onError（MSG）{ 
    にconsole.log（MSG）
  }、
  グローバルデータ： '私はグローバルデータ午前' 
}）

onLaunch（Objectオブジェクト）
の初期化は一度だけ、グローバルトリガー完了すると、アプレットがトリガーされます。パラメータはまた、wx.getLaunchOptionsSyncのGETを使用することができます。
パラメータ：wx.getLaunchOptionsSyncと一致

onShow（Objectオブジェクト）
アプレット開始、又は前景に背景からの表示をトリガします。聞く結合wx.onAppShow使用することもできます。
パラメータ：wx.onAppShowと一致

onHide（）
アプレットがバックグラウンドにフォアグラウンドからトリガされます。また、聞く結合wx.onAppHideを使用することができます。

onError（文字列のエラー）
スクリプトエラーまたはAPIコールエラーが発生したときにアプレットが起動されます。また、聞く結合wx.onErrorを使用することができます。
パラメータ：wx.onErrorと一致

onPageNotFound（Objectオブジェクト）
基盤ライブラリ1.9.90をサポートするために始めた、低いバージョンが行われるように処理すると互換性があります。
何のトリガーがないときアプレットページが開きます。また、聞く結合wx.onPageNotFoundを使用することができます。注wx.onPageNotFoundを参照してください。
パラメータ：wx.onPageNotFoundと一致

アプリケーション開発のドキュメントポータル

　　2.2 app.jsonアプリファイル（設定アプレットプロジェクト）の全体的なプログラムの記述

　　役割：小型マイクロチャネルグローバルコンフィギュレーションプログラムのパス、ページファイルの決定、ショーウィンドウ、ネットワークのタイムアウトを設定し、マルチタブを設定するというように。

　　すべての設定オプションページや、窓、タブバー、NetworkTimeout、デバッグ
　　App.json設定項目一覧：

　　属性タイプ必須説明の
        ページに文字列配列は、ページパスの設定されている
        ウィンドウオブジェクトはありません設定に窓性能のデフォルトページ
        TabBarのオブジェクトはありません設定タブのパフォーマンスの下
        networkTimeoutオブジェクトノーセットネットワークタイムアウト
        デバッグブールありませんが、有効または無効にデバッグモードを

「ページ」：[ 
    //ここでは、最初のページがありますがホームとして表示され
    、「ページ/インデックス/インデックス」、
    「ページ/ログ/ログ」
  ]、
//アプレットページを縮小/追加するには、ページの配列を必要とします編集します

"ウィンドウ"：{ 
    "backgroundTextStyle"： "光"、
    "navigationBarBackgroundColor"： "#FFF"、
    "navigationBarTitleText"： "演示"、
    "navigationBarTextStyle"： "黒" 
  }、

プロパティ型デフォルト説明最小バージョン
navigationBarBackgroundColor HexColor＃000000ナビゲーションバーの背景色、など＃000000     
navigationBarTextStyle文字列ホワイトナビゲーションバーのタイトルの色、唯一のブラック/ホワイトサポートする     
ナビゲーションバーのタイトルテキスト微信navigationBarTitleText文字列を     
navigationStyle文字列のデフォルトのナビゲーションバーのスタイル、のみ以下をサポートしています値：デフォルトのスタイルをデフォルト、カスタム、カスタムナビゲーションバー、マイクロチャンネルボタンカプセルクライアント7.0.0の唯一の右上隅を残し
backgroundColorのウィンドウの背景色HexColor #FFFFFF     
プルダウンパターンのbackgroundTextStyle文字列ダークロード、唯一のダーク/ライトサポート     
トップbackgroundColorTop文字列#FFFFFFをウィンドウの背景色、唯一のマイクロチャネルのサポートのiOSクライアント6.5.16  
ウィンドウの下部#FFFFFF背景色backgroundColorBottom文字列、チャネルのみサポートマイクロクライアントのiOS 6.5.16
ドロップダウンオープンするかどうかを、現在のページを更新しenablePullDownRefreshブール値はfalse。参照してくださいPage.onPullDownRefresh    
ページの底部からの距離は、ユニットは、ボトムonReachBottomDistance番号50ページイベントがトリガされるにPXプルあります。参照Page.onReachBottom     
PageOrientation文字列縦画面回転の設定、詳細な変更（風景）2.4.0（オート）/ 2.5.0に対応して、オート/ポートレート/風景表示領域をサポート
trueにブール偽disableScrollセットは、ページ全体を上下にスクロールすることはできません。唯一のページレイアウトで有効な、あなたはでapp.jsonを設定することはできません     
usingComponentsませカスタムコンポーネントの設定ページ1.6.3オブジェクト
スタイルの文字列のデフォルトはコンポーネントのスタイルの新しいバージョンを有効にしない2.10.2

ポータル設定ウィンドウ

"タブバー"：{ 
    "色"： "＃7A7E83"、
    "selectedColor"： "＃3cc51f"、
    "のborderStyle"： "黒"、
    "backgroundColorの"： "#FFFFFF"、
    "リスト"：[ 
      { 
        "pagePath"： "ページ/コンポーネント/インデックス"、
        "あるIconPath"： "画像/ icon_component.png"、
        "selectedIconPath"： "画像/ icon_component_HL.png"、
        "テキスト"： "组件" 
      }、
      { 
        "pagePath"：「ページ/ weui /例/インデックス" 
        "あるIconPath"： "画像/ icon_component.png"、
        "selectedIconPath "： "画像/ icon_component_HL.png"、 
        "テキスト"： "扩展组件" 
      }、
      { 
        "pagePath"： "ページ/ API /インデックス"、 
        "あるIconPath"： "画像/ icon_API.png"、
        "selectedIconPath"： "画像/ icon_API_HL.png"、
        "テキスト"： "接口" 
      }、
      { 
        "pagePath"： "ページ/クラウド/インデックス"、
        "あるIconPath"： "画像/ icon_cloud.png"、
        "selectedIconPath"： "画像/ icon_cloud_HL.png"、
        "テキスト"： "云开发" 
      } 
    ] 
  }、

アプレットは、マルチアプリケーション]タブの場合は、指定された項目のバータブのパフォーマンス（クライアントウィンドウの下部または上部には、ページを切り替えるにはタブバーを持っている）、およびハンドオーバのためのページに対応するタブはタブバーを介して設定することができます。

リスト・アレイを受信する2の最小及び5タブの最大で構成することができます。順序を並べ替えタブアレイは、各アイテムが目的です。

TabBarには、ポータルを設定するより、私はここで行うよりも、詳細にポータルを。。。

 

ページの3.説明複数の各ページ（カタログページアプレットに保存されているすべてのページ）

　　必要なファイルのアクション
　　ページ名このページのロジックはロジックである.jsファイル
　　かどうかを設定するには、このページ.jsonページ名
　　このページのページ名の.wxml構造は
　　、このページのスタイルシートなし.wxssページ名

　　JSロジック層3.1ページ（登録ページ）

ページの論理層：その主な機能は、「登録ページ」で、各ページのディレクトリ/ページ名の.js
ページが登録に使用：app.jsアプレットプロジェクト機能のApp（Object）を同様の使用と登録
ページ（オブジェクト）;オブジェクト{}は、オブジェクトパラメータ、初期ページの指定されたライフサイクル機能のデータ、イベントハンドラなどを表します。

//index.js 
ページ（{ 
  データ：{ 
    テキスト：「これは、データページです」
  }、
  オンロード：機能（オプション）{ 
    //ページが作成されたときに実行される
  }、
  関数（）{：onShow 
    ときフォアグラウンドで//ページが表示されます実行
  }、
  onReady：関数（）{ 
    ページが最初にレンダリングされる実行//完全
  }、
  onHide：関数（{）
    前景から実行が//ページは、背景となる
  、} 
  {関数（）：ONUNLOAD 
    ページが破棄//ときに実行します
  } 、
  onPullDownRefresh：関数（）{ 
    //トリガプルダウンリフレッシュを実行
  }、
  onReachBottom：関数（）{ 
    場合、ページ下部//実行
  } 
  onShareAppMessage：関数（）{ 
    //ページときにユーザー共有実行されます 
  }
  onPageScroll：関数は、（{）
    ときにページをスクロール//実行
  }、
  さらにonResize：機能（）{ 
    際にページサイズの変更//実行
  、} 
  onTabItemTap（項目）{ 
    あなたがクリックしたときに、//タブを実行
    にconsole.log（item.index）
    コンソールを。 （item.pagePath）ログ
    はconsole.log（item.Text）
  }、
  //イベント応答関数
  viewTap：関数（）{ 
    this.setData（{ 
      テキスト： 'いくつかのセットビューを更新するためのデータ' 
    }、関数（）{ 
      / /このsetDataメソッドコールバックIS 
    }）
  }、
  //自由にデータ
  customData：{ 
    こんにちは： 'MINA' 
  } 
}）

Jsのポータルページ

　　3.2 JSON設定ページ（ページ名.json）

各ページには、ウィンドウのパフォーマンス.jsonこのページをファイルを構成するために使用することができます。

、app.jsonグローバル設定よりもはるかに簡単であるだけで、設定項目の内容のウィンドウを設定するには、ページの設定項目をapp.jsonの設定ページには、同じ設定項目がウィンドウにapp.jsonカバーします。

.jsonページは、このページの窓性能を決定するためにのみ、ウィンドウ関連の設定項目を設定することができ、キーウィンドウを記述する必要はありません。

概要：各ページの.json（ページ構成）、実際には、設定項目の画面上app.json継承上書き

アプリケーション：app.jsonは上のプルダウンリフレッシュを有効にするために構成されたが、一部のページは必要ありません、あなたが.jsonのページ名に書き換え禁止することができます。別の例では、各ページのタイトルですが、また、書き換える必要があります。

 　　{ 
        "navigationBarBackgroundColor"： "＃1 FFFFFF"、
        "navigationBarTextStyle"： "黒"、
        "navigationBarTitleText"： "微信接口功能演示"、
        "backgroundColorの"： "＃1 eeeeee"、
        "backgroundTextStyle"： "光" 
    }

すべての.jsonでapp.jsonページ名でウィンドウの設定項目をすべて上書きのこと、
しかし、ページ名の.json構成は独自の特性を持っては小さくないapp.jsonグローバル設定です。
プロパティ型デフォルト説明
disableScrollブールはfalseをtrueに設定し、その後、全ページが上下にスクロールすることはできません。
page.jsonでのみ有効を、あなたはでapp.jsonでこれを設定することはできません。

　　ビュー層（.wxmlページ名とページ名.wxss）3.3ページ

WXML（WeiXinマークアップ言語）をベース成分と組み合わせたマークアップ言語設計フレームワークであり、イベント・システムは、ページの構造を構築することができます。

データバインディング

<！ - wxml - > 
< ビュー> {{メッセージ}} </ ビュー>

//はpage.js 
（{ページ
  ：{データ
    メッセージ： 'こんにちはMINAを！' 
  } 
}）

 

リストをレンダリング

<！ - wxml - > 
< ビューWXのための：= "{{アレイ}}" > {{アイテム}} </ ビュー>

// page.js 
（{ページ
  ：{データ
    配列[1、2、3、4、5] 
  } 
}）

 

レンダリング条件

<！ - wxml - > 
< ビューWX：もし= "{{ビュー== 'のWebView'}}" >のWebView </ ビュー> 
< ビューWX：ELIF = "{{ビュー== 'APP'}}" > APP </ ビュー> 
< ビューWX：他= "{{ビュー== 'MINA'}}" > MINA </ ビュー>

// page.js 
（{ページ
  ：{データ
    ビュー'MINA' 
  } 
}）

 

カスタムテンプレート

テンプレート（テンプレート）を提供WXMLは、その後、コードフラグメント定義テンプレート内の異なる場所で呼び出すことができます。

< - -ページ/アイテム/ item.wxml！> 
<テンプレート名= "msgItem" > 
  < ビュー> 
    < テキスト> {{インデックス}}：{{MSG}} </ テキスト> 
    < テキスト>時間：{{時間}} </ テキスト> 
  </ ビュー> 
</ テンプレート>

 

テンプレートの使用

プロパティの使用は、テンプレート宣言を使用すると、テンプレートを必要とし、その後のような、必要なデータを渡します。

<！ -ページ/インデックス/ index.wxml - > 
<輸入SRC = "../項目/ item.wxml" /> 
< テンプレートがある= "msgItem" データ= "{{...}}項目" / >

<！ -ページ/インデックス/ index.js - > 
ページ（{ 
  データ：{ 
    項目：{ 
      インデックス：0、
      MSG： 'これはテンプレートである' 
      時間'2016年9月15日' 
    } 
  } 
}）

 

スコープテンプレート

テンプレートは、独自のスコープを持って、あなただけの<WXS />モジュールで定義されたデータだけでなく、着信データ・テンプレート定義ファイルを使用することができます。

ポータルページwxml

 

3.4 WXS

（WeiXinスクリプト）を使用すると、ページの構造を構築することができ、WXMLと組み合わせて、小さなスクリプト言語プログラムです。

WXSとJavaScriptは、独自の構文を持って、異なる言語であり、JavaScriptは一貫していません。

構文ポータルページWXS

ルートディレクトリproject.config.json 4.

IDEプロジェクトと呼ばれる1）プロジェクトの設定ファイルや設定ファイル

　　「マイクロ手紙開発ツール」で任意の設定を行うには、ファイルに書き込まれます。    

2）シナリオ：

　　IDEの開発ツールを使用する際に通常、あなたがあなた自身のデザインパーソナライズされたコンフィギュレーションのために何かをするだろう、

　　このようなカラーインタフェース、コンパイラの設定など、あなたがツールを再インストールするために別のコンピュータを変更したとき、あなたは再設定する必要があるとして。

3）解決策：このproject.config.jsonのIDEプロジェクトの設定ファイルがあります

　　あなたがコンピュータのためのツールや仕事を再インストールすると、限り、あなたは、同じプロジェクトのコードのパッケージをロードするよう

　　開発者ツールを使用すると、自動的にプロジェクトの開発時間のカスタマイズした設定に戻すのに役立ちます、

　　などのオプション、一連のアップロード時の色のエディタが含まれる、コードが自動的に圧縮されています

4）。アイデア

　　ビーイングが言ったことを、各プロジェクトは、自分の好きなIDEの設定のセットをカスタマイズすることができます

5. Aは、ライブラリプログラムロジックを共有（utilディレクトリ）

このディレクトリには、名前をカスタマイズすることができます

公開機能のjsファイル、module.exportsはの方法による露光を使用して、ページ内の各ページ

各ページには、重複したJSコードを記述する必要はありません。