在使用Cocos Creator制作微信小游戏的时候，基本上都是需要排行榜功能的。
鉴于如果使用Cocos Creator官方提供的WxSubContextView，会增大不少开放域包体。如果本身主域工程的包体已经有点大，并且还不想用分包加载的话，那么可以考虑使用微信提供的API和Canvas渲染来做排行榜系统。这样可以极大的减小开放域包体。一起来试试吧。下面我将分享我自己整理的一份微信原生开放域实现排行榜的工程。其中实现的功能有：
用户授权按钮（位置适配）
上传用户数据
获取好友托管信息、展示好友排行榜（分页展示）
好友互动赠送
工程运行截图如下：
「主域和子域通信」
主域和子域的通信，大家应该都很熟悉，主域和子域的通信是单向的，只能主域向子域发消息，子域不能向主域发消息。在子域（开放域）中，用wx.onMessage进行监听，在主域中发送消息给子域。
在子域中监听
「用户授权按钮（位置适配）」
我看见有很多小游戏的用户授权按钮点击位置并没有做好适配，基本就是在一个UI界面点击任何位置都可以进行授权，有时候用户可能会不理解，或者不知道是怎么回事。那么有一个非常明显提示用户登录的按钮，是有必要的。
这里需要注意的是，微信的单位像素并不是标准的游戏设计中的像素单位。所以要注意单位的转换，把游戏设计中的像素单位转换为微信中的像素单位。
「上传用户数据」
上传用户数据可以直接在主域中调用微信的提供的API，上传用户托管数据
「获取好友托管信息、展示好友排行榜」
主要难点是在子域中，怎么渲染界面。渲染界面用的是Canvas，获取Canvas对象的绘制上下文，进行绘制渲染
「好友互动」
好友互动的话，就要加点击事件了，但是在子域中，怎么添加点击事件。这里是在Canvas上添加点击事件的监听，然后判断点击的点是否在一个图片大小范围内，判断点击是否有效。有效，则调用微信相关的API取修改好友的互动数据。
还有一个注意的一些点：
1.小游戏目录下，新建jsserver目录
2.project.config.json中添加 "jsserverRoot": "jsserver/"
3.game.json中添加 交互模板
完成以上的步骤，在主域中，获取自己的互动数据wx.getUserInteractiveStorage，此处需要解密从微信回传的加密数据。需要云函数调用或者通过服务端处理。
在完成开放数据域代码后，直接将开放数据域代码拷贝一份到build-templates下，如图
完整代码，尽在阅读原文