1.1アプレットフレームワークの構成の概要

1.1.1新しいページを作成する

新しいページを作成する手順：

ページディレクトリで、右クリックして[新しいフォルダ]を選択します。例：カートフォルダを作成します
カートフォルダで、右クリックして[新しいページ]を選択し、ページのフレーム（4つのファイルで構成）を生成します
app.jsonファイル内の対応するディレクトリが自動的に生成され、ページフィールドに配置されます。特定のページが表示される順序を手動で調整する必要があります。調整が不要な場合。デフォルトで問題ありません。

2.1.2設定ページトップ

app.jsonファイルのwindowsフィールドに設定します。

    "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "Weixin",
        "navigationBarTextStyle": "black"
    },

属性	の種類	デフォルト	説明
backgroundTextStyle	ストリング	暗い	ドロップダウンロードスタイル、`dark`/のみをサポート`light`
NavigationBarBackgroundColor	HexColor	＃000000	ナビゲーションバーの背景色など`#000000`
NavigationBarTitleText	ストリング		ナビゲーションバーのタイトルテキストコンテンツ
NavigationBarTextStyle	ストリング	白	`black`ナビゲーションバーのタイトルの色、 /のみをサポート`white`

アプレットの構成/ページの構成/構成項目の詳細については、アプレットの公式Webサイトを参照してください。

ページ構成|WeChatオープンドキュメント

2.1.3tabBarの下部ナビゲーションを設定します

アプレットがマルチタブアプリケーションの場合（クライアントウィンドウの下部または上部にページを切り替えるためのタブバーがあります）、タブを切り替えたときに表示されるタブバーと対応するページのパフォーマンスを指定できます。 tabBar構成アイテム。

app.jsonファイルのtabBarフィールドで設定します。

 "tabBar": {
        "backgroundColor": "#181E2C",
        "color" : "#fff",
        "selectedColor" : "#de3120",
        "list": [
            {
                "pagePath": "pages/index/index",
                "text" : "点餐",
                "iconPath" : "/images/footer_btn_1.png",
                "selectedIconPath" : "/images/footer_btn_1_active.png"
            },
            {
                "pagePath": "pages/cart/cart",
                "text" : "购物车",
                "iconPath" : "/images/footer_btn_2.png",
                "selectedIconPath" : "/images/footer_btn_2_active.png"
            },
            {
                "pagePath": "pages/user/user",
                "text" : "我的",
                "iconPath" : "/images/footer_btn_3.png",
                "selectedIconPath" : "/images/footer_btn_3_active.png"
            }
        ]

    },

プレビュー：

フレームワーク-ページ構成-グローバル構成ドキュメント--tabBar、参加、アプレットの公式Webサイト：

グローバル構成|WeChatオープンドキュメント

1.2アプレットのライフサイクルとページのライフサイクルの説明

アプレットのライフサイクル機能：

アプレットのライフサイクル関数はapp.jsで呼び出され、App（Object）関数はアプレットを登録するために使用されます。

アプレットのライフサイクルコールバックを指定するObjectパラメータを受け入れます

一般に、onLaunch監視アプレットの初期化、onShow監視アプレットの表示、onHide監視アプレットの非表示などのライフサイクルコールバック関数があります。

アプレットが起動したら、最初にonLaunch> onshowを実行してから、ページonload>onshow>onreadyを実行します。

2.2.1ミニプログラムライフサイクル

onLaunchモニターアプレットの初期化
onShowモニターアプレットディスプレイ
onHideはアプレットの非表示を監視します

// app.js
App({
  // 监听小程序初始化
  onLaunch() {
    console.log('onLaunch 监听小程序初始化')
  },
  onShow(){
    console.log('onShow 监听小程序显示')
    //你可以在生命周期函数中，去做一些 你想做的事情，例如：输出当前系统年份
    let date = new Date()
    console.log(date.getFullYear())
  },
  onHide(){
    console.log('onHide 监听小程序隐藏')
  },

  globalData: {
    userInfo: null
  }
})

「デバッガー」を表示-「コンソールコンソール」、プレビュー：

上記のデモンストレーションから、アプレットのライフサイクル関数の呼び出しシーケンスはonLaunch>onShow>onHideであることがわかります。

2.2.2ページのライフサイクル

各ページのライフサイクルは、対応するページのxxx.jsファイルで設定されます。ページのインデックスフォルダのindex.jsで現在のホームページのページライフサイクルを設定すると、次のようになります。

このページでは、以下のライフサイクル関数を記述します。

オンロード
オンショー
オンレディ
オンハイド
onunload

index.jsファイル：

2.2.2.1データの役割

データの役割：ページの初期データ

データ内のデータはページにレンダリングできます

2.2.2.2ページライフサイクル機能の役割

ページライフサイクル関数の特定の使用法：

/**
   * 生命周期函数--监听页面加载
   */
onLoad: function (options) {
console.log('onLoad监听页面加载')
},

/**
   * 生命周期函数--监听页面初次渲染完成
   */
onReady: function () {
console.log('onReady监听页面初次渲染完成')
},

/**
   * 生命周期函数--监听页面显示
   */
onShow: function () {
console.log('onShow监听页面显示')
},

/**
   * 生命周期函数--监听页面隐藏
   */
onHide: function () {
console.log('onHide监听页面隐藏')
},

2.3ミニプログラム適応サイズ単位rpxとスタイル

2.3.1rpxユニット

rpx単位は、WeChatアプレットのcssのサイズ単位であり、rpxは画面の幅に応じて調整できます。指定された画面幅は750rpxです。たとえば、iPhone6では、画面の幅は375ピクセルで、750物理ピクセルがあるため、750rpx = 375px = 750物理ピクセル、1rpx = 0.5px=1物理ピクセルです。

装置	rpxからpx（画面幅/ 750）	pxからrpx（750 /画面幅）
iPhone 5	1rpx = 0.42px	1px = 2.34rpx
iphone 6	1rpx = 0.5px	1px = 2rpx
iPhone6s	1rpx = 0.552px	1px = 1.81rpx

WeChatアプレットは、remサイズの単位もサポートしており、remとrpxの変換関係は次のとおりです。rem：画面幅が20rem、1rem =（750/20）rpxであることを指定します。注：デザイナーは、WeChatミニプログラムを開発するときに、ビジュアルドラフト（デザインドラフト）の標準としてiPhone6を使用できます。提案：設計ドラフトでデバイス幅が750ピクセルを使用している場合、750ピクセル、1rpx = 1ピクセルを計算する方が簡単です。この場合、設計図で測定されるサイズは、rpxの数と同じ数のピクセルです。レムの数は実際には別のデバイスで変換する必要があります。自分で変換するには、アプレットに任せてください。

2.3.2ミニプログラムのスタイルインポート

@importステートメントを使用して、外部スタイルシートをインポートします。@ importの後には、インポートする必要のある外部スタイルシートの相対パスが続きます。;を使用して、ステートメントの終わりを示します。

（1）外部スタイルシートをページにインポートします

common.wxssアウトラインスタイルシート

/ ** common.wxss ** /
.red { color：red; }

index.wxssページスタイルシート

@import '../../common.wxss';
/**index.wxss**/
.userinfo{
  font-size: 30px;
  text-align: center;
  width: 30%;
  padding: 16px;
}

（2）パブリックスタイルのインポートも同じ方法です

2.3.3アプレットのグローバルスタイルとローカルスタイル

app.wxssで定義されているスタイルは、すべてのページに適用されるグローバルスタイルです。ページのwxssファイルで定義されているスタイルはローカルスタイルであり、対応するページにのみ適用され、app.wxssの同じセレクターをオーバーライドします。

2.3.4ミニプログラムインラインスタイル

アプレットフレームワークコンポーネントは、コンポーネントのスタイルを制御するためのスタイルおよびクラス属性の使用をサポートします。

style：styleは動的スタイルを受け取り、実行時に解析されます。レンダリング速度に影響を与えないように、静的スタイルをstyleに書き込まないようにしてください。

class：静的スタイルはクラスに均一に書き込まれます。スタイルルールを指定するために使用されます。その属性値は、スタイルルール内のクラスセレクター名（スタイルクラス名）のコレクションです。スタイルクラス名は。で囲む必要はなく、複数のスタイルクラス名はで区切られます。スペース。

2.3.5アプレットでサポートされているCSSセレクター

現在WeChatミニプログラムでサポートされているセレクターは次のとおりです。

セレクタ	サンプル	サンプル概要
。クラス	.intro	class="intro"ですべてのコンポーネントを選択します
#id	＃ファーストネーム	id="firstname"のコンポーネントを選択します
エレメント	見る	すべてのビューコンポーネントを選択します
要素、要素	チェックボックスを表示	すべてのドキュメントビューコンポーネントとすべてのチェックボックスコンポーネントを選択します
：：後	ビュー::後	ビューコンポーネントの後にコンテンツを挿入する
：：前	ビュー::前	ビューコンポーネントの前にコンテンツを挿入します

アプレットフレームワークの概要、ライフサイクル、サイズ