CocosCreator微信小遊戲開發 之 開放資料域設定微信好友排行榜布局自适應高度和寬度

前奏：

微信好友排行榜基于微信小遊戲開放資料域，是以需要建立一個排行榜cocos工程，專門用來顯示排行榜内容，然後建構釋出為“微信小遊戲開放資料域”，然後在主項目中用一個cc.WXSubContextView元件來渲染這個開放資料域項目所顯示的内容；

問題：

既然是用一個cc.WXSubContextView元件來渲染開放資料域項目所所展示的内容，就存在一個顯示區域大小适配問題，必須確定cc.WXSubContextView渲染區域和開放資料域内容區域大小一緻，否則均會出現縮放變形。然而我們在做頁面布局的時候，如果希望排行全屏顯示，那麼排行榜的寬度或高度就會随螢幕尺寸變化，那麼開放資料域的尺寸該怎麼跟随變化呢？

重點：

這裡面有4個尺寸需要統一，分别是：

1.顯示排行榜的node尺寸，希望根據頁面布局設定大小；

2.用于渲染排行榜内容的cc.WXSubContextView元件的渲染尺寸；

3.排行榜工程Canvas尺寸；

4.排行榜所在ScrollView尺寸；

第一個尺寸沒啥好說的，可以用Widget元件進行控制，我們先說一下cc.WXSubContextView元件的渲染尺寸該怎麼調整

https://docs.cocos.com/creator/api/zh/classes/WXSubContextView.html#reset

cc.WXSubContextView.reset 方法可以重置開放資料域渲染區域大小為所挂載節點的尺寸，是以需要在挂載節點尺寸發生變化的時候調用一下；

再說一下排行榜工程Canvas尺寸的更新

https://docs.cocos.com/creator/api/zh/classes/Canvas.html#designresolution

可以設定cc.Canvas.designResolution屬性來設定Canvas的尺寸，尺寸大小可以通過wx.postMessage接口發送到開放資料域

最後是排行榜所在ScrollView尺寸，這個也可以用Widget元件，不過為了節約最終釋出包大小，我在引擎裁切的手并沒有用Widget元件，代碼控制一下大小和位置就好了

代碼公布如下：

主項目控制cc.WXSubContextView渲染區域大小，以及發送資料到開放資料域

updateWxFriendsRank(){
	// 調整節點大小
	const widget = this.FriendsView.getComponent(cc.Widget);
	widget.updateAlignment();

	// 調整cc.WXSubContextView渲染區域大小
	const subView = this.FriendsView.getComponent(cc.WXSubContextView);
	subView.reset();

	// 發送資料到開放資料域
	const openDataContext = wx.getOpenDataContext();
	openDataContext.postMessage({
		command:'rank',
		width:this.FriendsView.width,
		height:this.FriendsView.height,
	})
}
           

開放資料域接受主項目發送過來的資料，并更新自身Canvas尺寸

wx.onMessage(data=>{
	if(!this.isValid)return;
	console.log('openData.onMessage', data);
	switch(data.command){
		case 'rank':
			// 調整Canvas大小
			const canvas = this.getComponent(cc.Canvas);
			canvas.designResolution = cc.size(data.width, data.height);

			// 調整ScrollView尺寸及位置
			this.RankView.height = data.height;
			this.RankView.y = data.height/2;
			this.RankView.children[0].height = data.height;
			
			// 加載好友排行榜資料
			this.loadRank();
			break;
		default:
			break;
	}
});