WeChatウィジェットページ間の通信

WeChatウィジェットページ間の通信

クライテリア

1、urlの後ろにパラメータを付加する形式で通信する

.

、キャッシュ通信を利用する

3、グローバル変数通信

を使用する.

、外部導入jsファイル通信

総括

前言
フロントエンド開発では、コンポーネント間の通信はありふれた話題になりがちですが、アプリケーション開発では複数のページ間の通信方式も含まれています.ここでメモをとります.
1、urlの後ろにパラメータを入れて通信する
ページをジャンプするときは、urlの後ろに新しいページに渡すためのパラメータを追加し、新しいページのonlocalライフサイクル関数のoptionsで取得し、set Dataメソッドを呼び出して、伝達されたパラメータをdataに入れます.これは最も一般的なパラメータ伝達である.navigatorコンポーネントを使ってジャンプしますか?それともルートインターフェースを使ってジャンプしますか?ここでは議論しません.

// wxml
<navigator url="/pages/index/index?active=3">
    ...
</navigator>

// js
onLoad: function(options) {
		const vm = this;
		let _activeIndex = +options.active //  options action    
		_activeIndex = _activeIndex || 0
		vm.setData({
			routerActive: _activeIndex
		})
    },
   // +              num

2、キャッシュ通信を利用する
ウィジェットでは、キャッシュアプリを使ってキーペアを設定することでページ通信ができます.

// a.js
setMyStorage:function(){
	wx.setStorageSync('myKey', 'myValue')
}

// b.js
getMyStorage:function(){
	let vm = this
	let myData = ''
	_myData = wx.getStorageSync('myKey')
  	vm.setData({
		myData : _myData
	})
}

3、グローバル変数通信を使用する
WeChatウィジェットには、この例で定義された方法および変数がグローバル変数であり、他のページは、getApp()を介してウィジェットグローバル一意のAppインスタンスを取得することができる唯一のインスタンスオブジェクトap()があります.

// app.js
App({
  globalData: {
  	'keyA':'valueA',
  	'keyB':'valueB'
  }
})

// index.js
	let app = getApp()
	let keyA = app.globalData.keyA
	console.log(keyA)

しかし、この方法は便利ですが、一般的には使用を勧めません.簡単で、全体の空間を汚染します.
4、外部でjsファイル通信を導入する
ページ通信にはもう一つの方法があります.それは外部からjsファイルを導入することです.プロジェクトでは、プロジェクトで使うアプリインターフェースを同じjsファイルに入れて、データ要求が必要な時にrequireを使ってファイルに導入します.これは余計なことではないと言う人がいますか?しかし、フロントエンドをしてもあまり干渉しないでしょう.バックエンドが急にインターフェース名を変えたら、このインターフェースページで修正する必要があります.インターフェースを統一したappi.jsに置くだけで、変数の割り当てを利用して、後はapi.変数名だけを使用してデータ要求を開始します.インターフェースが変わったら、api.jsだけを修正すればいいです.

// api.js
	const HOST = require("../utils/host.js")
	module.exports = {
	    indexData: HOST + "/Api/index/index"                  
	}
	// host.js         ，         

// index.js
	const HOST = require('../../../utils/host.js');
	const api = require('../../../utils/api.js');
	Page({
		ajax({
		// ajax  wx.request   ， request    
                    url: api.indexData,
                    success: function (res) {
                        //   setData  data    
                    },
                    
                })
	})

だから、公衆データを一つのjsファイルに置くだけで、後は他のページも一緒に使うことができます.とりあえずはページの通信方式です.
締め括りをつける
ブログを書き始めたばかりですが、間違いや補足点がありましたら、ご記入ください.