マイクロチャネルのアプリケーション開発の構文

レコードのように、オンラインの記事はかなり良い感じを参照してください。

プロファイル

app.json設定(グローバル)

{
//ページは、パスを設定するために使用
[:「ページ」
「ページ数/インデックス/インデックス」、//ホーム
「ページ/テスト/テスト」//ジャンプページ
]、
「ウィンドウ」:{
「enablePullDownRefreshを」:trueに//プルダウンリフレッシュをサポートするかどうかを
「backgroundTextStyleを」:「暗い」、 //は、 ドロップダウンフォントの色を更新し、サポートライト
「のbackgroundColor」:「#1 e04c4c」、//ドロップダウンリフレッシュの背景色設定
「navigationBarBackgroundColor」:「#FFFを」上部のナビゲーションバーの色のマイクロチャネルプログラムアップ//セット
「navigationBarTitleText」:「yejiawei」、 // 上部のナビゲーションバーのテキスト
「navigationBarTextStyle」:「黒」//上部のナビゲーションバーのテキストのスタイル、黒または白
「onReachBottomDistance」:50 //セットプルトリガ・イベントの底位置から
}、
「タブバー」:{//スイッチングフィールドのタブの構成設定
「リスト」:[
{
「PagePath」:「ページと/インデックス/インデックス」、//ジャンプパス
「テキスト」:「ホーム」、//タブのテキスト
"あるIconPath"背景図のパスを設定する"/images/t1.jpg" //
}、
{
"pagePath": "ページ/試験/試験"、
"テキスト": "テスト"、
"selectedIconPath":「/画像/ T1 .JPG「あなたは絵のパスを選択する//セット
}
]、
」色「:」#1 e04c4c「//フォントの色ボタンの設定]タブ
『selectedColor『:』#000』 、//は、 色を選択してボタンを設定する
」のbackgroundColorを「: 「#1aad16」、//背景色]タブボタン設定
「のborderStyle」:「黒」、 // セットタブバーの境界線の色を、唯一のブラック/ホワイトサポートする
「位置」:「トップ」タブバー//セット位置、セットトップを画像はありません
}、
"NetworkTimeout":{
"リクエスト":10000、//タイムアウト要求要求
"connectSocket":10000、// connectSocketタイムアウト
「downloadFile」:10000、//ダウンロードファイルのタイムアウト
「uploadFile」:1000個の//タイムアウトアップロードファイル
}、
「デバッグ」:デバッグモードでの真//オンにするには、コンソール出力プログラム情報
}
Page.json構成(ページ)

App.jsonの構成設定は、ウィンドウ構成カバーに
{
「navigationBarBackgroundColor」:「#FFFFFF」を、//設定マイクロチャネルプログラムの上部のナビゲーションバーの色
「navigationBarTextStyle」:「黒」、 // トップナビゲーションバーのテキストのスタイル、黒またはホワイト
「navigationBarTitleText」:「マイクロチャネルインターフェイス機能がデモ」、//上部のナビゲーションバーのテキスト
「のbackgroundColor」:「#eeeeee」、 //は、 ドロップダウンリフレッシュの背景色設定
「backgroundTextStyleを」:「光」、 // フォントの色]ドロップダウンリフレッシュライトサポートするために、
「enablePullDownRefreshを」:trueに、//プルダウンリフレッシュをサポートするかどうかを
「disableScroll」:真を、//スクロールをサポートするかどうかを
50 //セットに下の位置からプルトリガイベントへ:「onReachBottomDistanceを」
}
プログラムのエントリ関数(APP)

アプリ({
OnLaunch:機能(オプション){
//プログラムの呼び出しロード
}、
onShow:機能(オプション){
、既定のプログラムが最初の呼び出しにロードされたバック前景に背景から//コールを
、}
onHide:機能(){
//前面から背面コールに切り替え
}、
のonError:関数(MSG){
//与えられたプログラムの呼び出し
}、
myFuncという:関数(){
//カスタム関数
}、
グローバルデータ:{
//カスタムデータがグローバル
ユーザー情報: "yejiawei"
}
})
上記方法は、以下の性質を有するonShow onLaunchオプションやパラメータ、オプションパラメータた
{
パスは、「ページ/インデックス/インデックス」//プログラムは、パス開く
クエリを{} wx.navigateToを呼び出すとき、//クエリを渡すことができます
シーン:1001、//アプレットのシーン値開く
referrerInfoを:{//、他のプログラムからこのプログラムを入力し、このフィールドを返します
AppIDを:...、// APPID他のプログラムを
extraData:... //別のプログラムを介したデータ伝送は
}
}
VARアプリ= getApp()を使用することができる。アプレットインスタンスを取得するために、にconsole.log(app.globalData.userInfo)
エントリ関数ページ(ページ)

ページ({
データ:{
MSG:状態"笑" //ページ
}、
のonLoad:機能(オプション){//ページ}がロードされたトリガで、
onReady:機能(){//ページのレンダリングがトリガを完了する}、
onShow:機能(){//ページのレンダリング開始トリガ}、
onHide:関数(){背景ページへ//トリガスイッチ}、
ONUNLOAD:関数(){//ページアンロードトリガー}、
onPullDownRefresh:関数(){//ページドロップダウンを更新トリガー}、
onReachBottom:機能ページトリガ上の(){//スリップ底}、
onShareAppMessage:機能(){
//ページサプライ・トリガーは、オブジェクトを返す必要があり、この方法の唯一の定義は、転送機能があります
リターンを{
タイトル:「共有ページ」、//共有ページのタイトル
パス:「/ページ/ログ/ //ログ」 ページへの共有パスを
}
}、
onPageScroll:機能(オプション){//ページスクロールトリガー}、
myFn :関数(){//カスタム関数
にconsole.log(this.route); //現在のページのパスを取得
this.setData({//状態変更
MSG: "母"
}、関数(){
//終了ステータス変更は、このメソッドが呼び出されるが
})
はconsole.log(getCurrentPages()); //現在のページのスタックインスタンスを取得
}
customDataました: {//カスタム属性}
})
ページルーティング

メソッドwx.navigateTo(オブジェクト)は、特定のページにジャンプするとタブバーは、ページにジャンプすることはできません(このページは予約済み)
wx.navigateTo({
URL:「/ページおよび/ログ/ログ言及ID = 1以上?」、//ページロードキング、クエリパラメータを渡すことができます
成功を:関数(){//成功したナビゲート実行
はconsole.log(「成功したジャンプ」);
}、
失敗:関数(){//ナビゲーションに失敗した実行
にconsole.logを(「ジャンプの失敗」) ;
}、
完全:関数(){//ナビゲーションコールが完了
はconsole.log( "ナビゲーション終了");
}
})
ページ方法wx.navigateBack(オブジェクト)前に戻り
wx.navigateBack({
デルタ:// 2戻りますステップ2
})
現在のページの方法wx.redirectTo(オブジェクト)の破壊、特定のページへのジャンプ、ページは、タブバーのにジャンプすることができない
ように使用及びnavigateTo
全ページの方法wx.reLaunch(オブジェクト)の破壊、任意の指定へのジャンプページ
同じ方法及びnavigateTo使用
ページ方法wx.switchTab(オブジェクト)タブバージャンプ
同じ方法およびnavigateTo使用
モジュラー

JS module.exportsは、エクスポートファイルは、インターフェイスの公開ができる
輸出をの基準module.exportsは
()関数fn {
にconsole.log(「導入の方法を実行する」);
}
exports.fn =のFnと、
メソッドファイル
VAR =コモンが必要な(」../ common.js');
common.fn();
WXMLファイルの詳細

結合状態

括弧を囲む二重変数は、<表示> {{MSG}} </ビュー>
プロパティタブダブルクォートラッピング<ビューid =「項目」> </ビュー>
WXコンテンツ二重引用符は、文字列に変換しますしたがって真、偽二重括弧ラップする必要表現することを意図
<テンプレートは=「MyTemplateに」データオブジェクトをバインドし、オブジェクトは、括弧を必要としない =「{:1、B:2} {}」> </テンプレート>
リストトラバーサル

<表示WX:=は、 "{{[1,2,3,4,5]}}" WX:キー= "アイテム{} {}">
{{}}指標:項目{} {}
</表示>
インデックス項目にエイリアスと
見る<WX:=は、 "{{[1,2,3,4,5]}}" WX:のための項目= "MYITEM":= "myIndex" WX-インデックスの>
{{ myIndex}}:{{MYITEM}}
</表示>
マルチノード・ブロックレンダリング
<ブロックWX:= "{{[1、2 ,. 3]}}"の>
<表示> {{索引}} </ビュー>
<表示>アイテム{} {} </表示>
</ブロック>
トラバース列
<表示WX:= "アレイ">用の
{{アイテム}}
</表示>
IDアセンブリに基づいて再配置バインディングキーコンポーネントの状態は、多重化構成要素もよい
<WXブロック鍵= ":= "{[1、2 ,. 3] {}}" WXため、この">アイテムは、文字列または数値である場合、//使用することができ、この項目は、キーの代表として
、<表示>インデックス{} {} </表示>
<表示>アイテム{} {} </表示>
</ブロック>
条件は、レンダリング

<ビューWX:IF = "{{falseに}}">笑</ビュー>
<ビューWX:elifの= "{{trueに}}"> haha1 </ビュー>
<ビューWX:他=「{{falseに}} 「> haha2 </ビュー>
また、マルチノードブロックのコードブロックを制御するために使用することができる
テンプレートを

テンプレートを宣言する
<テンプレート名= "MyTemplateに">
<表示>
{{A}}:{{B}}
</表示>
</テンプレート>
を使用し、このテンプレートOBJ:{A :. 1、B:2}
<テンプレートであります= "MyTemplateに"データ= "{ {... OBJ}}"> </テンプレート>
イベント

使用してイベントを結合Bindtap <ビューbindtap =「FN」のデータが </ビュー> =「222」データ-My>
イベントオブジェクト
myFn:関数(イベント){
にconsole.log(イベント);
カスタム//で使用されるデータで始まります、その後、event.currentTarget.datasetに保存されたプロパティは
}
イベントカテゴリ
イベントバブリング
touchstartが触れるようになった
携帯触れtouchmove
touchcancelタッチが中断
左のタッチtouchend
タップインスタントタッチ
350msのタッチよりもlongpress
transitionend遷移エンド
animationstartアニメーションを開始
アニメーション実行後に再度animationiterationトリガを
animationendアニメーショントリガーの終わり
非バブリングイベントは、上記のイベントに加えて、非バブリングイベントです
バインディングイベントが
バインドバインドとキャッチに使用することができ
、タップはバブリング停止しません:bindtapまたはバインド
タップバブリングを停止する:catchtapやキャッチが
WXMLファイルのインポートに他のファイルWXML

単一のファイルwxml、その後に5月のテンプレートコード上記<輸入SRC =「../ common.wxmlする」 /> インポートは、現在のファイルで、あなたはすぐに使用することができます
。<SRCが含ま= " ../common.wxmlアクションが「/>テンプレートに追加され、コードをWXSの位置に含むコピーされ
、使用WXS(コードがタグWXSに書き込むことができるWXSファイルに別々に書き込むことができます)

モジュール

実際には、役割とWXSのjsファイルの役割は同じですが、書き込みJSに別の方法で提供し
、外部アクセスコードはmodule.exportsは、エクスポートを使用する必要が定義されることがWXS
次のコード定義WXSファイルを作成するために
= "VARメッセージをどのようにあなたをしている? ";
module.exports.message =メッセージ;
wxmlファイルで
最初の使用にタグをWXS <WXS SRC =" ../ common.wxs "モジュール=" wxsData "/>
使用<ビュークラス="デモ"> {{wxsData.message}} < /ビュー>
他の文書WXSに使用
VAR = wxsData必要とする(" ../ common.wxsを「);
WXSSファイル

寸法は、ピクセルは、物理表しRPX、RPXを使用
WXSSが「../common.wxss」@importインポート他のファイル、
カスタムコンポーネント(構成要素とを内部VUEのような)

カスタムコンポーネントを作成するには

最初のステップは、修飾JSON
変更JSONファイル{ "コンポーネント":真}
第二の部分、WXMLファイル書き込み
<ビュークラス= "デモ"> {{テキスト}} </表示>
の<slot> </スロット>
スロットでありますスロット、およびAS VUE
書き込んで第三工程、WXSS
.demo {色:赤;}
使用のみクラスセレクタ
第4のセクション、JSファイル書き込み
成分({
特性を:{
//コンポーネントのプロパティを指定することができます以下のようなタイプ、デフォルト値、および小道具検証VUE
{:テキスト
タイプ:文字列
値: 'デフォルト'、
}
}、
データ:{
//状態アセンブリ
someDataが:{}
}、
メソッド:{
//アセンブリカスタムメソッド
customMethod:関数(){}
}
})
第五工程、使用される部品
このカスタムコンポーネントページを使用するために、彼のJSON、次のフィールドを挿入変更
「usingComponentsを」:{
「マイ・コンポーネント」:「../myComponent/myComponent」
}
<私の成分> </私の使用して -component>のページでは、アセンブリすることができ
、同時に使用する<私の成分テキスト= 『私は転送属性』> </私の成分>属性値は、内部のコンポーネントに渡された
ファイルWXMLの詳細

ライティングと一般WXMLファイル書面による合意が、より多くのスロットより
名前のないスロットを持つだけでは、複数のスロットを使用している場合は、次の手順が動作する必要があり、1を持つことができ
、次の追加、コンポーネントのjsの関数で、最初のステップを
オプション: {
multipleSlots:真へ
}、
WXMLスロットに名前を書いて、複数の第二ステップ、
<Viewクラス= "デモ"> {{テキスト}} </表示>
<スロット名= ""> </スロット>
<スロット名=「B」> < /スロット>
第三のステップは、ページで使用されている
<私の成分テキストは=「私は属性を転送」>
<ビュースロット=「」> I </ビュー>
<見ますスロット= "B"> I B </ビュー>
<私のコンポーネントは、> /
WXSSファイルの詳細を

唯一のクラスセレクタを使用して
スタイル外成分継承できる
スタイル定義ファイルapp.wxssを、無効成分は
、さらに使用することができる:ホストスタイルエレメントタグを定義する
:ホスト{色:黒;}
詳細JSファイル

などのコンポーネントの機能を使用して、
成分({
{//コンポーネントに許容されるの性質:特性
myProperty1:{//属性名
型:文字列、//タイプ(必須)、現在受け入れタイプには、文字列、数値、ブール値、オブジェクト、アレイは、ヌルが(任意の型を表す)
値:「」、//初期値の属性(オプション)の種類に応じて選択される指定されていない場合
、関数関数(newValに、OLDVAL){//属性値変更リスナー:オブザーバー}
}、
myProperty2://文字列定義を簡略化し
}
データ:{}、//ステータスコンポーネント
メソッド:{//セット方法
onMyButtonTap:関数(){
にconsole.log(this.id); //タグアセンブリID
にconsole.log(this.dataset); //データコンポーネントのカスタムプロパティコレクション
にconsole.log(this.data);属性とコンポーネントの状態の//セット
はconsole.log(this.hasBehavior())//アセンブリ挙動属性があるかどうかを
this.setData({})//属性および状態を設定可能
/ *
カスタムイベントは、例えば、手動で組み立てカスタムイベントをバインディングコンポーネントをトリガすることができ
<私の成分bindmyEvent = "myFn "> </私の成分>
手動トリガmyEventに、呼び出す必要
this.triggerEvent( 'myEvent'、{
//イベントパラメータを
}、{
泡:// trueにバブリング場合
なります。イベント見て同じ名前の内部部品に忠実、//親
//キャプチャするかどうかを真:capturePhaseを
}
;)
/
}
}、
関数(){} //アセンブリメモリ実装で作成されます作成
添付:関数(){}、 //アセンブリの前に行わ搭載
準備:関数(){} //後のアセンブリ搭載行わ
取り外さ:関数(){} // アセンブリ行わ除去される
移動:関数(){} // アセンブリ移動したとき実行
の関係を:{
/

ネスト相互成分は、このフィールドを使用する必要が
同じネストされた子ノードが処理
HTMLとして入れ子構造をとる
<カスタムUL>
<カスタムLI>項目1 </カスタムLI>
<カスタム-LI>項目2 </カスタム-LI>
</カスタムUL>
アセンブリ関係の下に定義されたカスタム-LIに必要
「./custom-ul」:{//パスネストされた親要素の
タイプ: 『親』、//関連する親ノードがターゲット・ノードでなければなりません
連結:関数(ターゲット){} 、// カスタムULカスタム-LIに挿入されたときに実行される、ターゲット-ULカスタムある
linkChanged:関数(ターゲット){} //カスタムLiが移動後に行われる、対象は特注でありますUL
除去する際関数(ターゲット){} //カスタム-Liが実行され、ターゲットがカスタム-ULである:UNLINKED
}
このフィールドで定義されたカスタム-UL成分を持っているが、子タイプに変わる
異なるネストされたサブ処理ノード
<カスタムDIV>
<カスタムスパン>項目1 </カスタムスパン>
の<div-カスタム>項目2 </カスタムDIV>
</カスタムDIV>
この場合の動作でカスタムスパンを仮定すると、経路の共通ノードとして使用することが必要であるとのカスタムDIV名前customFormControls挙動有する
カスタムスパン、およびカスタムDIV内部関係はタイプの変更点を除いて、前のように方法を定義先祖に
カスタムのdivを定義します
「customFormControls」:{
タイプ:「子孫」、//宛先ノードに子孫ノードと関連がなければならない
ターゲット:customFormControlsを
}
/
}、
行動:[
/

効果の挙動は、共通コンポーネントJS、全く同じ内部コード、およびコンポーネントを作成するために使用され
動作は({// ...})
主コードと電流成分、現在のメインコンポーネントの同じ名前のプロパティをマージするために使用される
* /
]
})
要求負荷を

次のステップデマンドロード
メインタブバーパッケージには含まれている必要があり
、最初のステップをプロジェクトのルートディレクトリにサブフォルダを作成し、内部に書かれたサブページ
第二段階、app.jsonで以下の設定を追加します
「サブパッケージ」:[
{
「ルート」:「パッケージ1」、フォルダ//サブルート
「ページ」:[ページに含ま//サブパスはapp.jsonに追加することができない
「ページ/デモ/デモ"
]
}
]
タブバーの設定項目には、サブページを適用することができない
第3のステップと、サブファイルの使用
タブバーページに、ページ参照サブ
wx.navigateTo({
「../../package1:URLを/ページ/デモ/デモ'
})




おすすめ

転載: www.cnblogs.com/pp8080/p/11942854.html