ホームページ > WeChat アプレット > ミニプログラム開発 > WeChat ミニ プログラム開発登録ページの紹介

WeChat ミニ プログラム開発登録ページの紹介

高洛峰
リリース: 2017-03-23 13:50:32
オリジナル
2185 人が閲覧しました

この記事では主にWeChatミニプログラム登録ページの関連情報を紹介します。必要な友達は

WeChatミニプログラム - Page

Page()関数を参照してページを登録します。ページの初期データ、ライフサイクル関数、イベント処理関数などを指定するobjectパラメータを受け入れます。

オブジェクトパラメータの説明:

属性 タイプ 説明
data Object ページ
onLoad 関数 ライフサイクル関数--ページの読み込みをリッスン
onReady Function ライフサイクル関数--ページのレンダリング完了をリッスン
onShow Function ライフサイクル関数--ページの表示をリッスン
onHide Function ライフサイクル関数--ページの非表示をリッスン
onUnload 関数 ライフサイクル関数--ページのアンロードをリッスン
その他 どれでも 開発者 任意の関数を追加したり、データはオブジェクト パラメーターに保存され、これを使用してアクセスできます

サンプルコード:

//index.js
Page({
 data: {
 text: "This is page data."
 },
 onLoad: function(options) {
 // Do some initialize when page load.
 },
 onReady: function() {
 // Do something when page ready.
 },
 onShow: function() {
 // Do something when page show.
 },
 onHide: function() {
 // Do something when page hide.
 },
 onUnload: function() {
 // Do something when page close.
 },
 // Event handler.
 viewTap: function() {
 this.setData({
  text: 'Set some data for updating view.'
 })
 }
})
ログイン後にコピー

初期化データ

初期化データは、ページの最初のレンダリングとして使用されます。データはJSONの形式でロジック層からレンダリング層に送信されるため、データはJSONに変換できる形式である必要があります: 文字列、数値、ブール値、オブジェクト配列

レンダリングレイヤーは、WXMLを通じてデータをバインドできます。

サンプルコード:

<view>{{text}}</view>
<view>{{array[0].msg}}</view>
ログイン後にコピー
Page({
 data: {
 text: &#39;init data&#39;,
 array: [{msg: &#39;1&#39;}, {msg: &#39;2&#39;}]
 }
})
ログイン後にコピー

イベント処理関数

初期化データとライフサイクル関数に加えて、Page はいくつかの特別な関数、つまりイベント処理関数も定義できます。レンダリング層では、コンポーネントにイベント バインディングを追加でき、トリガー イベントに到達すると、ページで定義されたイベント処理関数が実行されます。

サンプルコード:

click me

Page({
 viewTap: function() {
 console.log(&#39;view tap&#39;)
 }
})
ログイン後にコピー

Page.prototype.setData()

setData関数はロジックからデータを送信するために使用されますレイヤービューレイヤーに移動し、同時に this.data の対応する値を変更します。

注:

this.data を直接変更することは無効であり、ページの state を変更することはできません。また、データの不整合も発生します。
一度に設定できるデータは1024kBを超えないようにしてください。

setData() パラメータ形式

は、key, value の形式でオブジェクトを受け取り、this.data のキーに対応する値を value に変更します。
キーは非常に柔軟であり、array[2].message、a.b.c.d などのデータ パスの形式で指定でき、this.data で事前に定義する必要はありません。

サンプルコード:

<!--index.wxml-->
<view>{{text}}</view>
<button bindtap="changeText"> Change normal data </button>
<view>{{array[0].text}}</view>
<button bindtap="changeItemInArray"> Change Array data </button>
<view>{{obj.text}}</view>
<button bindtap="changeItemInObject"> Change Object data </button>
<view>{{newField.text}}</view>
<button bindtap="addNewField"> Add new data </button>
ログイン後にコピー
//index.js
Page({
 data: {
 text: &#39;init data&#39;,
 array: [{text: &#39;init data&#39;}],
 object: {
  text: &#39;init data&#39;
 }
 },
 changeText: function() {
 // this.data.text = &#39;changed data&#39; // bad, it can not work
 this.setData({
  text: &#39;changed data&#39;
 })
 },
 changeItemInArray: function() {
 // you can use this way to modify a danamic data path
 var changedData = {}
 var index = 0
 changedData[&#39;array[&#39; + index + &#39;].text&#39;] = &#39;changed data&#39;
 this.setData(changedData)
 },
 changeItemInObject: function(){
 this.setData({
  &#39;object.text&#39;: &#39;changed data&#39;
 });
 },
 addNewField: function() {
 this.setData({
  &#39;newField.text&#39;: &#39;new data&#39;
 })
 }
})
ログイン後にコピー

以下をすぐに理解する必要はありませんが、後で役立ちます。

ライフサイクル関数

次の図は、ページ インスタンスのライフ サイクルを示しています。

WeChat ミニ プログラム開発登録ページの紹介

ページのルーティング

ミニプログラム内のすべてのページのルーティングは、すべてフレームワークによって管理されます。ルーティングのトリガー方法とページのライフサイクル関数は次のとおりです。 :

onLoad、onShow onUnloadページリターンAPI wx.navigateBackを呼び出すか、ユーザーが押します左上隅の戻るボタンonShowonUnloadタブ切り替えマルチタブモードでユーザーがタブを切り替える 初めて開く場合はonLoad、onshow、それ以外の場合はonShowonHide
ルーティングメソッド トリガータイミング ルーティング後ページ ルーティング前ページ
初期化 アプレットによって開かれた最初のページ onLoad、どうやって
新しいページを開きます APIを呼び出す wx.navigateToまたはコンポーネントを使用します
読んでいただきありがとうございます。皆さんのお役に立てれば幸いです。このサイトのご支援に感謝します。

以上がWeChat ミニ プログラム開発登録ページの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート