微信ウィジェットの学習(2)-論理層

3627 ワード
マイクロ信ウィジェット開発
本人はAndroid開発者なので、Android Nativeアプリケーション開発と比較したアイデアでWeChatウィジェットの開発を学び、このような学習はWeChatウィジェットをよりよく理解することができます.
アプレット開発フレームワークの論理層はJavaScriptによって記述される.論理層のコードはすべて書いてある.jsファイルでは、その名の通り、ビジネスロジックの処理であり、表示する必要があるデータを処理し、処理が完了するとビューレイヤに送信し、ビューレンダリングを行う.同時に,論理層もビューレイヤのイベントフィードバックを受け入れ,対応する論理処理を行う必要がある.
例を挙げると、ログイン後のインタフェースにユーザーの顔と名前を表示したいです.
では、論理層に必要な処理は、ログインに成功した後にページを起動する際に、ユーザーの顔情報、名前を取得して保存する必要がある.データの取得に成功すると、レンダリングのためにビューレイヤに送信されます.
JavaScriptの基礎の上で、小さいプログラムの開発の枠組みはいくつか修正して、便利に小さいプログラムを開発します.
*AppとPageメソッドを追加し、プログラムとページの登録を行います.これはAndroid開発におけるApplicationとActivityに似ており、AndroidにおけるApplicationはアプリケーションを表し、このオブジェクトはアプリケーションの起動時に作成され、アプリケーションの最初の起動時に作成されるだけで、このオブジェクトはグローバルで、単一の例である.Activityはユーザーに示すインタフェースです.小さなプログラムの中のAppはAndroidのApplicationに似ていて、微信の小さなプログラムを代表しています.PageはAndroidのActivityのように、ユーザーにデータを表示するためのページです.
*豊富なAPIを提供し、例えば、微信ユーザーデータの取得、スキャン、支払いなどの微信特有の能力を提供する.この小さなプログラムは微信に依存して存在するため、いくつかの微信の基本的な機能はすべてあって、実はこれは1種の微信系の軽い応用です.
待って...
1)App()
App()関数は、ウィジェットを登録するために使用されます.ウィジェットのライフサイクル関数などを指定するobjectパラメータを受け入れます.そのライフサイクル関数はonLaunch,onShow,onHideである.
ウィジェット開発フレームワークは、ウィジェットインスタンスを取得できるグローバルgetApp()関数を提供します.
したがって、ウィジェットを開発するときに、グローバル呼び出しが必要な関数をAppに定義したり、グローバルで使用される変数をAppに定義したりすることができます.onLaunch関数で呼び出す初期化操作もあります.
2)Page
PageはAndroidのActivityに似ており、ユーザーにデータを表示するページです.Page()関数は、ページを登録するために使用されます.ページの初期データ、ライフサイクル関数、イベント処理関数などを指定するobjectパラメータを受け入れます.
サンプルコード:
//index.js
Page({
  data: {
    text: "This is page data."
  },
  onLoad: function(options) {
    // Do some initialize when page load.
  },
  onReady: function() {
    // Do something when page ready.
  },
  onShow: function() {
    // Do something when page show.
  },
  onHide: function() {
    // Do something when page hide.
  },
  onUnload: function() {
    // Do something when page close.
  },
  onPullDownRefresh: function() {
    // Do something when pull down.
  },
  onReachBottom: function() {
    // Do something when page reach bottom.
  },
  // Event handler.
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    })
  },
  customData: {
    hi: 'MINA'
  }
})

イニシャルデータ
dataデータはページとしての最初のレンダリングであり、dataはJSONの形式で論理層からレンダリング層に伝達されるので、そのデータはJSONに変換できる形式でなければならない:文字列、数字、ブール値、オブジェクト、配列.
レンダーレイヤは、WXMLでデータをバインドできます.
インスタンスコード:
{{text}}
{{array[0].msg}}
Page({
  data: {
    text: 'init data',
    array: [{msg: '1'}, {msg: '2'}]
  }
})

データの更新
setData関数は、論理層からビューレイヤにデータを送信、対応するthisを変更するために用いる.dataの値.注意:thisを直接手動で変更します.dataは無効で、ページの状態を変えることができず、ページに表示されるデータとthisも発生します.dataが保存したデータが一致しない問題.
setData()関数のパラメータフォーマット
オブジェクトを受け入れてkey,valueの形式でthisを表す.dataのkeyに対応する値はvalueに変更されます.
一度に設定したデータは1024 kbを超えてはいけません.一度に設定しすぎないようにしてください.(ただし、this.dataに対応するkey値が存在しない場合、このkeyプロパティはthis.dataに追加されます.一般的には使用しません)

{{text}}


//index.js
Page({
  data: {
    text: 'init data',
    array: [{text: 'init data'}],
    object: {
      text: 'init data'
    }
  },
  changeText: function() {
    // this.data.text = 'changed data'  // bad, it can not work
    this.setData({
      text: 'changed data'
    })
  },
})

PS:微信小プログラム開発において、論理層の処理が最も重要である.開発フレームワークの論理層の原理を深く理解することは,優雅なコードを書くのに役立つ.ここでは、論理層の重要な知識点、より詳細な知識が必要なのか、それとも小さなプログラムの公式開発サイトに行く必要があるのかをリストしただけです.https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/page.html?t=20161122
ES 6 Classクラス
F# リストを使ってみる