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