マイクロチャネルアプレットの研究ノート-1

学習住所：https://www.w3cschool.cn/weixinapp/9wou1q8j.html

2.開発ツールダウンロード：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

プロジェクトを作成します3。

4.生成されたコード

左側のナビゲーション開発ツール「編集」をクリックして、我々はこのプロジェクトが初期化され、いくつかの簡単なコードファイルが含まれているされていることがわかります。キーは、も不可欠であるapp.js、app.json、app.wxss 3です。どこ.jsサフィックスはスクリプトファイルである.jsonサフィックスファイルの設定ファイルである、.wxss接尾辞は、スタイルシートファイルです。小型マイクロチャネル・プログラムは、これらのファイルを読み込み、生成するアプレットのインスタンスを。

app.jsスクリプトコードは、小さなプログラムです。私たちは、グローバル変数を宣言し、ために耳を傾け、このファイル内のアプレットのライフサイクル機能を処理することができます。呼び出しフレームワークは豊富なAPIを提供し、本実施形態の同期および同期ストレージは、ローカルデータを読み出します。

//app.js 
アプリ（{ 
  onLaunch：関数（）{ 
    //调用API从本地缓存中获取数据
    VARログ= wx.getStorageSync（ 'ログ'）|| [] 
    logs.unshift（Date.now（））
    WX .setStorageSync（ 'ログ'、ログ）
  }、
  getUserInfo：機能（CB）{ 
    = VARこの; 
    IF（this.globalData.userInfo）{ 
      typeof演算CB == "機能" && CB（this.globalData.userInfo）
    }さもなければ{ 
      //调用登录接口
      wx.login（{ 
        成功：関数（）{ 
          wx.getUserInfo（{ 
            成功：関数（RES）{ 
              that.globalData.userInfo = res.userInfo; 
              typeof演算CB == "機能" && CB（すなわち.globalData。ユーザー情報） 
            } 
          }）
        } 
      }）。
    } 
  }、
  グローバルデータ：{ 
    ユーザー情報：ヌル
  } 
}）

app.jsonは、全体のグローバルアプレットの設定です。私たちは、ページで構成され、このファイル小さなプログラムで設定することができ、アプレットの設定ウィンドウの背景色は、ナビゲーションバーのスタイルは、configureデフォルトのタイトルを設定します。ファイルには、任意のコメントを追加できないことに注意してください。

{ 
  "ページ"：
    "ページ/インデックス/インデックス"、
    "ページ/ログ/ログ" 
  ]、
  "ウィンドウ"：{ 
    "backgroundTextStyle"： "光"、
    "navigationBarBackgroundColor"： "#FFF"、
    "navigationBarTitleText"： "微信」、
    "navigationBarTextStyle"： ""黒
  } 
}

app.wxss公共スタイルシート全体アプレット。私たちは、app.wxssは、クラスのプロパティページの構成要素に直接宣言スタイルルールを使用することができます。

/**app.wxss**/ 
.container { 
  高さ：100％。
  表示：フレックス。
  フレックス方向：カラム; 
  ALIGN-アイテム：センター; 
  正当化-コンテンツ：スペースの間; 
  パディング：200rpx 0; 
  ボックスサイズ：ボーダーボックス; 
}

ページを作成します。5.

我々は、彼らがページディレクトリにある、2つのページ、インデックス・ページとログのページは、そのページを持っていると、小さな起動ログの表示ページを歓迎します。ページ名] +の各ページにおけるマイクロ手紙アプレット[パスは、ページのapp.jsonに記述する必要がありますし、最初のページのページはホームアプレットです。

各アプレットページは index.js、index.wxml、index.wxss、index.json：のような、同じパスで同じ名前の四つの異なるファイル拡張子で構成されています。.jsファイルには、スクリプトファイルの接尾辞で、.jsonサフィックスファイルは、設定ファイルである、.wxss接尾辞は、スタイルシートファイルのある.wxmlファイルの拡張子ページ構造ファイルです。

index.wxmlページファイル構造：

<！ - index.wxml - > 
<ビュークラス= "コンテナ"> 
  <ビューbindtap = "bindViewTap"クラス= "ユーザー情報"> 
    <画像クラス= "ユーザー情報、アバター" SRC = "{{}} userInfo.avatarUrl "バックグラウンド・サイズ="カバー"> </画像> 
    <テキストクラス="ユーザー情報、ニックネーム"> {{userInfo.nickName}} </テキスト> 
  </ビュー> 
  <ビュークラス=" usermotto "> 
    <テキストクラス= "ユーザモットー"> {{モットー}} </テキスト> 
  </ビュー> 
</ビュー>

このファイルには、我々が監視することができ、ページ機能のライフサイクルとの契約、アクセスアプレットインスタンス、表現し、プロセスデータスクリプトファイルのindex.jsページ、ページ応答対話イベント。

//index.js 
//取得応用例
VARのApp = getApp（）
ページ（{ 
  データ：{ 
    モットー： 'Hello Worldの' 
    のUserInfo：{} 
  }、
  //イベントハンドラ
  bindViewTap：機能（）{ 
    wx.navigateTo（ { 
      URL：」../logs/logs' 
    }）
  } 
  のonLoad：関数（）{ 
    にconsole.log（ 'のonLoad'）
    VAR =、この
    //グローバルデータを取得するための方法の応用例を呼び出す
    ユーザー情報app.getUserInfo（関数（ ）{ 
      //更新データ
      that.setData（{ 
        ユーザー情報：ユーザー情報
      }）
    }）
  } 
}）

index.wxssは、ページのスタイルシートです。

/**index.wxss**/ 
.userinfo { 
  ディスプレイ：フレックス。
  フレックス方向：カラム; 
  ALIGN-アイテム：センター; 
} 

.userinfo-アバター{ 
  幅：128rpx。
  高さ：128rpx。
  マージン：20rpx。
  境界半径：50％。
} 

.userinfo-ニックネーム{ 
  色：#aaa。
} 

.usermotto { 
  マージントップ：200pxの。
}

ページのスタイルシート非必須です。スタイルシートのページにページスタイルシート、スタイル規則は、スタイルのルールをカバーするスタックされた場合にapp.wxss。ページのスタイルシートを指定しない場合は、直接ページに設定ファイルで指定されたapp.wxssスタイル規則を使用することができます。

index.jsonは、ページのプロフィールです。

ページプロファイルは必要ありません。ページの設定ファイルは、このページの設定項目がウィンドウにapp.json同じ設定項目を上書きしますとき。あなたは、ページ上で直接、デフォルトの設定app.jsonをページの設定ファイルを指定しない場合。

ページ構造のログ

<！ - logs.wxml - > 
<ビュークラス= "コンテナログリスト"> 
  <ブロックWX：=は、 "{{ログ}}" WX：アイテムのため= "ログ"> 
    <テキストクラス= "ログ-item "> {{インデックス+ 1}}。{{ログ}} </テキスト> 
  </ブロック> 
</ビュー>

ログページは使用中に、タグを整理する制御コードを使用する結合データを、及びデータノード、ループ展開。<block/><block/>wx:forlogslogs

//logs.js 
VARのutil =必要とする（」../../ utilsの/ util.js'）
ページ（{ 
  データ：{ 
    ログ：[] 
  }、
  のonLoad：関数（）{ 
    this.setData（{ 
      ログ：（ wx.getStorageSync（ 'ログ'）|| []）。マップ（関数（ログ）{ 
        リターンutil.formatTime（新日（ログ））
      }）
    }）
  } 
}）

結果は以下の通りであります：

マイクロチャネルアプレットの研究ノート-1

おすすめ