前奏：
微信好友排行榜基于微信小游戏开放数据域，所以需要新建一个排行榜cocos工程，专门用来显示排行榜内容，然后构建发布为“微信小游戏开放数据域”，然后在主项目中用一个cc.WXSubContextView组件来渲染这个开放数据域项目所显示的内容；
问题：
既然是用一个cc.WXSubContextView组件来渲染开放数据域项目所所展示的内容，就存在一个显示区域大小适配问题，必须确保cc.WXSubContextView渲染区域和开放数据域内容区域大小一致，否则均会出现缩放变形。然而我们在做页面布局的时候，如果希望排行全屏显示，那么排行榜的宽度或高度就会随屏幕尺寸变化，那么开放数据域的尺寸该怎么跟随变化呢？
重点：
这里面有4个尺寸需要统一，分别是：
1.显示排行榜的node尺寸，希望根据页面布局设置大小；
2.用于渲染排行榜内容的cc.WXSubContextView组件的渲染尺寸；
3.排行榜工程Canvas尺寸；
4.排行榜所在ScrollView尺寸；
第一个尺寸没啥好说的，可以用Widget组件进行控制，我们先说一下cc.WXSubContextView组件的渲染尺寸该怎么调整
/creator/api/zh/classes/WXSubContextView.html#reset
cc.WXSubContextView.reset 方法可以重置开放数据域渲染区域大小为所挂载节点的尺寸，所以需要在挂载节点尺寸发生变化的时候调用一下；
再说一下排行榜工程Canvas尺寸的更新
/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(mand){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;}});
