ユーザーがミニプログラムを開く際、コードパッケージがローカルにダウンロードされ解析されます。まずルートディレクトリにあるapp.jsonが読み込まれ、これによりミニプログラムのすべてのページが特定されます。

このIndexページがホームページであり、クライアント起動時にそのページのコードが読み込まれ、WeChatのメカニズムによってページがレンダリングされます。

App({
  onLaunch() {
    // ミニプログラム起動後に実行される処理
  }
})

ミニプログラムが起動すると、App()で定義されたインスタンスのonLaunchメソッドが最初に実行されます。このメソッドはすべてのページで共有され、他にも多くのコールバックイベントが利用可能です。

Page({
  data: {
    message: '初期データ',
    items: [{text: '項目1'}, {text: '項目2'}]
  }
})

ページが読み込まれると、dataプロパティがページに提供され、JSON形式でフロントエンドに返されます。その後、この値をページ上にレンダリングすることができます。

<view>{{message}}</view>
<view>{{items[0].text}}</view>

ミニプログラムのページには多くのメソッドが用意されています。例えばonReady()は、ページの読み込みが完了し、ユーザーとのインタラクションが可能になったときに実行されます。また、ミニプログラムがバックグラウンドに移行した際のonHide()イベントもあります。これらはアプリケーションレベルのイベントですが、ユーザーとの直接のインタラクションに関連するイベントもあり、公式には「ページイベント処理関数」と呼ばれています。

最も厄介なのは、WeChatミニプログラムに組み込みのプルダウンリフレッシュイベントonPullDownRefresh()がないことです。これは自前で実装する必要がありますが、このアプローチはデカップリングされている点で優れています。以下に実装例を示します。

.jsonファイルで"enablePullDownRefresh": trueを設定することで、ページプルダウンリフレッシュ機能を有効にできます。これは現在のページだけでなく、グローバルにも設定可能です。

{　　//現在のページ設定
    "enablePullDownRefresh": true,
    "backgroundTextStyle": "dark" //上部の三点リーダーを暗色に表示
}

 "window": {  //グローバル設定
    "enablePullDownRefresh": true,
    "backgroundTextStyle": "light" //上部の三点リーダーを明色に表示
  }

次に、特定のページのjsファイルにプルダウンイベントを記述します。

onPullDownRefresh:function(){
    var self = this;
    self.setData({
      currentTab: 0 //ビジネス要件に応じた初期データ
    })<br></br>

wx.startPullDownRefresh();``` self.onLoad(); //onLoad()を再実行 console.log('更新中です....'); }

WeChat開発者ツールのデバッグ機能を使用すれば、ログの記録を簡単に確認できます。setData内には初期データが設定されています。

最後に、onLoadイベントでリフレッシュを停止します。

onLoad: function (params) { wx.stopPullDownRefresh() //リフレッシュ完了後、プルダウンアニメーションを停止 },

ボタンを使用してリフレッシュをトリガーすることも可能です。bindtapを使用すれば、ビューレイヤーからロジックレイヤーに直接リクエストを送信できます。

次にイベントについて説明します。イベントはビューレイヤーからロジックレイヤーへの通信方式です。イベントはDOMにバインドされ、トリガーされると対応するロジックレイヤーの処理が実行されます。これらは基本的な概念です。

イベントにはbindtapとcatchtapの2種類があります。これらの違いは、イベントのバブリングの有無です。バブリングとは何でしょうか？

テストの結果、内側のビューをクリックすると内側と中間のビューのイベントが両方とも実行されますが、中間のビューをクリックするとそのイベントのみ実行され、外側のビューのイベントは実行されません。

デバッグのために、app.jsonのpages配列に新しいページを追加し、以下のコードでページ間の遷移が可能です。

wx.navigateTo({
      url: '../demo/demo',
    })

ミニプログラムではローカルストレージもサポートしています。例えばwx.setStorage()やwx.setStorageSync()などのAPIが利用できます。

また、Vueと同様にjQueryはサポートされていないため、ライブラリ依存の実装はできません。しかし、レスポンシブデザインについては、WeChatミニプログラムがrpx単位をサポートしている点で優れており、これは大きな利点です。

セキュリティ上の理由から、外部サイトへの直接リンクは許可されていません。この機能を使用するには申請が必要です（費用が発生する場合があります）。

問題：DOMを直接操作できないため、input要素の値を取得する方法が分からないという課題がありました。これはWeChatミニプログラムがコンパイルプロセスを持つため、DOMの状態を確実に把握できないためです。Vueとは異なるアプローチが必要です。

解決策：WeChatはinputコンポーネントに対して複数のイベントを提供しています。これらのイベントを使用してinputの値を取得し、data内の値を更新することで、間接的に値の操作を実現します。

これらのフォームイベントを利用することで、inputの値を取得しdata内の値を更新し、目的の動作を実現できます。

見たところ、ミニプログラムはVueよりも洗練された設計になっているようです。