demo地址：https://github.com/wechat-miniprogram/minigame-unity-webgl-transform/tree/main/Demo/Ranking
官方说明： https://github.com/wechat-miniprogram/minigame-unity-webgl-transform/blob/main/Design/OpenData.md

1. 准备一个Canvas，保证其渲染模式为：Overlay
   

2. Canvas中创建一个RawImage，用于确定开放数据域渲染的范围。rotation x = 180
   

3. 初始化数据域

   private static WeChatWASM.WXOpenDataContext _openDataContext = null;
   public static void InitOpenDataContext()
   {// 初始化开放数据域openDataContext??= WeChatWASM.WX.GetOpenDataContext(new WeChatWASM.OpenDataContextOption{sharedCanvasMode = WeChatWASM.CanvasType.ScreenCanvas});
   }
   

4. 打开数据域渲染

   void ShowOpenData()
   {RankMask.SetActive(true);RankingBox.SetActive(true);// // 注意这里传x,y,width,height是为了点击区域能正确点击，x,y 是距离屏幕左上角的距离，宽度传 (int)RankBody.rectTransform.rect.width是在canvas的UI Scale Mode为 Constant Pixel Size的情况下设置的。/*** 如果父元素占满整个窗口的话，pivot 设置为（0，0），rotation设置为180，则左上角就是离屏幕的距离* 注意这里传x,y,width,height是为了点击区域能正确点击，因为开放数据域并不是使用 Unity 进行渲染而是可以选择任意第三方渲染引擎* 所以开放数据域名要正确处理好事件处理，就需要明确告诉开放数据域，排行榜所在的纹理绘制在屏幕中的物理坐标系* 比如 iPhone Xs Max 的物理尺寸是 414 * 896，如果排行榜被绘制在屏幕中央且物理尺寸为 200 * 200，那么这里的 x,y,width,height应当是 107,348,200,200* x,y 是距离屏幕左上角的距离，宽度传 (int)RankBody.rectTransform.rect.width是在canvas的UI Scale Mode为 Constant Pixel Size的情况下设置的* 如果是Scale With Screen Size，且设置为以宽度作为缩放，则要这要做一下换算，比如canavs宽度为960，rawImage设置为200 则需要根据 referenceResolution 做一些换算* 不过不管是什么屏幕适配模式，这里的目的就是为了算出 RawImage 在屏幕中绝对的位置和尺寸*/CanvasScaler scaler = gameObject.GetComponent<CanvasScaler>();var referenceResolution = scaler.referenceResolution;var p = RankBody.transform.position;WX.ShowOpenData(RankBody.texture, (int)p.x, Screen.height - (int)p.y, (int)((Screen.width / referenceResolution.x) * RankBody.rectTransform.rect.width), (int)((Screen.width / referenceResolution.x) * RankBody.rectTransform.rect.height));
   }
   

5. 向数据域发送消息

   OpenDataMessage msgData = new OpenDataMessage();
   msgData.type = "showFriendsRank";string msg = JsonUtility.ToJson(msgData);
   openDataContext.PostMessage(msg);
   

6. 开放数据域解析并处理消息

   	function main() {wx.onMessage((data) => {console.log('[WX OpenData] onMessage', data);if (typeof data === 'string') {try {// eslint-disable-next-line no-param-reassigndata = JSON.parse(data);}catch (e) {console.error('[WX OpenData] onMessage data is not a object');return;}}switch (data.type) {// 来自 WX Unity SDK 的信息case 'WXRender':initOpenDataCanvas(data);break;// 来自 WX Unity SDK 的信息case 'WXDestroy':Layout.clearAll();break;// 下面为业务自定义消息case 'showFriendsRank':renderFriendsRank(data.rankKey, data.strTag);break;case 'showGroupFriendsRank':renderGroupFriendsRank(data.shareTicket, data.rankKey, data.strTag);break;default:console.error(`[WX OpenData] onMessage type 「${data.type}」 is not supported`);break;}});
   }
   

7. 修改HTML格式，渲染开放数据域UI