今日は小プログラムの一般的な設定を見てみましょう。主な内容は以下の通りです：
- ライフサイクル
- ページ遷移
- パラメータの受け渡し
- 小プログラムの設定
ライフサイクル#
小プログラムが起動すると、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 の設定を上書きします。
最後に、設定されたボトムナビゲーションバーのページの効果図は以下の通りです：