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;
	}
});