微信小プログラムの設定の詳細

今日は、小プログラムの一般的な設定を見てみましょう。主な内容は以下の通りです。

ライフサイクル
ページ遷移
パラメータの受け渡し
小プログラムの設定

ライフサイクル#

小プログラムは起動後、順番に onLaunch、onShow メソッドを呼び出します。バックグラウンドにある場合は onHide メソッドが呼び出され、エラーが発生した場合は onError メソッドが呼び出されます。以下に小プログラムのライフサイクルメソッドがあります。

App({

  /**
   * 小プログラムが初期化されたときに onLaunch がトリガーされます（グローバルで一度だけトリガーされます）
   */
  onLaunch: function () {
    console.log("---App-------onLaunch---");
  },

  /**
   * 小プログラムが起動またはバックグラウンドからフォアグラウンドに表示されるときに onShow がトリガーされます
   */
  onShow: function (options) {
    console.log("---App-------onShow---");
  },

  /**
   * 小プログラムがフォアグラウンドからバックグラウンドに移動するときに onHide がトリガーされます
   */
  onHide: function () {
    console.log("---App-------onHide---");
  },

  /**
   * スクリプトエラーまたは API 呼び出しの失敗時に onError がトリガーされ、エラーメッセージが付属します
   */
  onError: function (msg) {
    console.log("---App-------onError---");
  }
})

上記は小プログラムのライフサイクルですが、他にもページのライフサイクルがあります。小プログラムが起動した後、ページの onLaunch、onShow、onReady メソッドが順番に呼び出されます。このページから他のページに遷移する場合は、このページの onHide メソッドが呼び出されます。以下に小プログラムのページのライフサイクルメソッドがあります。

Page({

  /**
   * ページの読み込み時に呼び出されるライフサイクルメソッド
   */
  onLoad: function (options) {
    console.log("---index-------onLaunch---");
  },

  /**
   * ページの初回のレンダリングが完了したときに呼び出されるライフサイクルメソッド
   */
  onReady: function () {
    console.log("---index-------onReady---");
  },

  /**
   * ページが表示されるときに呼び出されるライフサイクルメソッド
   */
  onShow: function () {
    console.log("---index-------onShow---");
  },

  /**
   * ページが非表示になるときに呼び出されるライフサイクルメソッド
   */
  onHide: function () {
    console.log("---index-------onHide---");
  },

  /**
   * ページがアンロードされるときに呼び出されるライフサイクルメソッド
   */
  onUnload: function () {
    console.log("---index-------onUnload---");
  }
    
  // その他のイベントリスナー、ページのスクロール、プルダウン、共有など
  // ...
})

ページ遷移#

WeChat 小プログラムでは、以下のようなページ遷移方法がよく使われます：

API の navigateTo と redirectTo を使用してページ間の遷移を実現する方法；

// ページ遷移
click:function(){
    // ページ遷移：現在のページを破棄せずに別のページに遷移する
    wx.navigateTo({
      url: '../detail/detail',
    })
    // ページ遷移：現在のページを破棄して別のページに遷移する
    wx.redirectTo({
      url: '../detail/detail',
    })
}

wxml ファイルで navigator コンポーネントを使用してページ間の遷移を実現する方法。


<!--navigateTo に対応する-->
<navigator url='../detail/detail'  >
    <view class='title'>記事のタイトル2...</view>
</navigator>

<!--redirectTo に対応する-->
<navigator url='../detail/detail' redirect >
    <view class='title'>記事のタイトル2...</view>
</navigator>

その他にも、ページ遷移に関連するいくつかのメソッドがあります。以下を参照してください。

// 現在のページを閉じて、前のページまたは複数の前のページに戻る
wx.navigateBack(Object object)
// tabBar ページに遷移し、他の非 tabBar ページをすべて閉じる
wx.switchTab(Object object)
// すべてのページを閉じて、アプリ内の特定のページを開く
wx.reLaunch(Object object)

注記: tabBar ページ以外から tabBar ページに遷移する場合、navigateTo と redirectTo は使用できません。最初はドキュメントを注意深く読まず、switchTab というメソッドがあることを知りませんでした。

パラメータの受け渡し#

WeChat 小プログラムのページ間のパラメータの受け渡しは、Web URL と似ています。パラメータは直接ページのパスに？と & を使用して結合し、目的のページの onLoad メソッドで options からパラメータを取得します。ここでは navigateTo を使用してページ間のパラメータの受け渡しを説明します。具体的な例は以下の通りです：

// ページ遷移
click:function(){
    // 目的のページの URL にパラメータを結合する
    wx.navigateTo({
      url: '../detail/detail/?param=1',
    })
}

そして、目的のページの onLoad メソッドでパラメータを取得します：

/**
* ページの読み込み時に呼び出されるライフサイクルメソッド
*/
onLoad: function (options) {
    // ページのパラメータを取得
    var value = options.param;
    // 取得したページのパラメータを変数 param に代入する
    this.setData({param:value});
},

これで、ページのパラメータを簡単に取得できます。もちろん、他のページ遷移方法でも同様です。

小プログラムの設定#

小プログラムの設定は基本的に app.json ファイルにあります。よく使われる設定は以下の通りです：

{
  // App ページの設定で、pages 配列の最初のページがホームページです
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  
  // ウィンドウの設定
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  },
 
  // tabBar の設定
  "tabBar": {
    "color": "#999999",
    "selectedColor": "#000000",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "images/home.png",
        "selectedIconPath": "images/homeH.png",
        "text": "ホーム"
      },
      {
        "pagePath": "pages/logs/logs",
        "iconPath": "images/log.png",
        "selectedIconPath": "images/logH.png",
        "text": "ログ"
      }
    ]
  },

  // ネットワークのタイムアウト設定
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },

  // デバッグの有効化
  "debug": true
  
  // その他の設定や詳細については公式ウェブサイトを参照してください：https://developers.weixin.qq.com/miniprogram/dev/framework/config.html
}

また、小プログラムの app.json ファイルの設定は、特定のページの個別の json 設定で上書きすることもできます。これにより、小プログラムのページをよりカスタマイズすることができます。また、個々のページのスタイルファイルの設定も app.wxss の設定を上書きします。

最後に、下記のようにボトムナビゲーションバーが設定されたページの効果図をご覧ください：