『ウィジェット、巧みな応用』ノートと統計を読む

購読番号、サービス番号、企業番号、ウィジェットは、いずれも微信公衆プラットフォームサービスであり、ユーザーとサービスを接続する方法である.
統計データによると、キャプチャされたデータのうち、上架と未上架のウィジェットの総数は1153個である.
キャプチャ元ダウンロードキャプチャ整理したTxtデータアドレスキャプチャツール:QueryList
ウィジェットのサンプルプロジェクトコード、ディレクトリ構造:3つのappで始まるファイル(app.js、app.json、app.wxss)、pagesディレクトリとutilsディレクトリを含む.ここでpagesディレクトリには2ページ(indexとlogs)の構成ファイルが格納されている.
各ページはディレクトリであり、ディレクトリ名は唯一のページ名です.

- .js  

- .wxss  

- .wxml  

- .json  

- .js   .wxml  。

app.js, app.json, app.wxssはルートディレクトリの下に置く必要があります.
app.jsは、ウィジェットのライフサイクル関数を傍受して処理し、グローバル変数を宣言するためのウィジェットのスクリプトコードです.
app.jsonは、ウィジェット全体のグローバル構成、コンフィギュレーションウィジェットがどのページから構成されているか、ウィジェットのウィンドウ背景色などを構成します.
app.wxssは、ウィジェット全体の共通スタイルシートです.
app.jsとapp.jsonは必要です.
ページプロファイルがある場合、ファイル内のプロファイル項目はそのページ上でappを上書きする.jsonのwindowで同じ構成項目です.ページを作成するファイルがなければ、そのページでappをそのまま使用する.jsonのデフォルト構成項目.

    
        {{index + 1}}. {{log}}
    

logsページは制御ラベルを使用してコードを整理し、上で制御属性wx:forを使用してlogsデータをバインドし、logsデータをループしてノードを展開します.
tip:コンポーネントではなく、パッケージ要素だけで、ページ内でレンダリングされず、制御プロパティのみが受け入れられます(wx:forまたはwx:ifなど).
require()を用いるモジュール化を導入する.jsスクリプトファイル:
var util = require('../../utils/util.js');
各ウィジェットには、全体プログラムを記述するappインスタンスと、複数の記述ページを記述するpageが含まれる.ここでappは3つのファイルからなる、appを共通に配置する.json、パブリックスタイルapp.wxss、主体論理app.js. 各pageは最大4つのファイルから構成する:ページ構成page.json、ページ構造page.wxml、ページスタイルpage.wxss、ページ本体論理page.js.
必要に応じてapp.jsとpage.jsにプログラムがライフサイクルの各段階に対応するイベントを追加します.たとえば、ページonloadではデータのロード、onShowではデータの更新を行います.
典型的なapp.jsコード構造は以下の通りである.

App({
    onLaunch: function() {
        // initialize ...
        //  
    },
    onShow: function() {
        //  ， 
    },
    onHide: function() {
        //  ， 
    },
    globalConf: function() {
        indexDate: '',
        matchDate: ''
    },
    dataCache: {},
    globalData: 'I am global data'
})

典型的なページpage.jsコード構造:

Page({
    Data: {Text: 'This is page data.'},
    onLoad: function(options) {
        //  
    },
    onReady: function() {
        //  
    },
    onShow: function() {
        //  ， 
    },
    onHide: function() {
        //  ， 
    },
    onUnLoad: function() {
        //  
    },
    //Event handler
    viewTap: function() {
        this.setData({
            text: "set ssome data for updating view."
        })
    },
})

ウィジェットのライフサイクル:

app.onLaunch -> app.onShow -> page1.onLoad -> page1.onShow -> page1.onReady
( ，  page1  
)
-> page1.onHide -> page2.onLoad -> page2.onShow -> page2.onReady
(  page2)
-> page2.onUnload -> page1.onShow -> ... -> app.onUnload
(  page2，  page1 ...  )