# WxOpenDataProject **Repository Path**: zzhcodes/WxOpenDataProject ## Basic Information - **Project Name**: WxOpenDataProject - **Description**: 实现原生微信开放域，包含有排行榜功能、好友赠送功能。还有微信授权按钮的适配（技巧） - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 6 - **Forks**: 8 - **Created**: 2020-06-27 - **Last Updated**: 2025-08-06 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README 微信原生开放域实现排行榜、好友送礼 在使用Cocos Creator制作微信小游戏的时候，基本上都是需要排行榜功能的。 鉴于如果使用Cocos Creator官方提供的WxSubContextView，会增大不少开放域包体。如果本身主域工程的包体已经有点大，并且还不想用分包加载的话，那么可以考虑使用微信提供的API和Canvas渲染来做排行榜系统。这样可以极大的减小开放域包体。一起来试试吧。下面我将分享我自己整理的一份微信原生开放域实现排行榜的工程。其中实现的功能有： - 用户授权按钮（位置适配） - 上传用户数据 - 获取好友托管信息、展示好友排行榜（分页展示） - 好友互动赠送 工程运行截图如下： ![](https://static01.imgkr.com/temp/5d4115afa9e1483ea572a05cef06926d.png) ![](https://static01.imgkr.com/temp/f5f7316ec2ec48e08a49bb4adc3413e2.png) **主域和子域通信** 主域和子域的通信，大家应该都很熟悉，主域和子域的通信是单向的，只能主域向子域发消息，子域不能向主域发消息。在子域（开放域）中，用wx.onMessage进行监听，在主域中发送消息给子域。 ![](https://static01.imgkr.com/temp/cddd530f43dc4b3cb53f99c10ca57607.png) 在子域中监听 ![](https://static01.imgkr.com/temp/a92871609097487c90d06e508e6ba46d.png) **用户授权按钮（位置适配）** 我看见有很多小游戏的用户授权按钮点击位置并没有做好适配，基本就是在一个UI界面点击任何位置都可以进行授权，有时候用户可能会不理解，或者不知道是怎么回事。那么有一个非常明显提示用户登录的按钮，是有必要的。 这里需要注意的是，微信的单位像素并不是标准的游戏设计中的像素单位。 所以要注意单位的转换，把游戏设计中的像素单位转换为微信中的像素单位。 ![](https://static01.imgkr.com/temp/72c637a6c5ef4a31b63dcfaa50bcbbab.png) **上传用户数据** 上传用户数据可以直接在主域中调用微信的提供的API，上传用户托管数据 ![](https://static01.imgkr.com/temp/8822dc9dc32e48709646c95264fed138.png) **获取好友托管信息、展示好友排行榜** 主要难点是在子域中，怎么渲染界面。渲染界面用的是Canvas，获取Canvas对象的绘制上下文，进行绘制渲染 ![](https://static01.imgkr.com/temp/78bc57a7088a49bfbf8c2118e5c25627.png) **好友互动** 好友互动的话，就要加点击事件了，但是在子域中，怎么添加点击事件。 这里是在Canvas上添加点击事件的监听，然后判断点击的点是否在一个图片大小范围内，判断点击是否有效。有效，则调用微信相关的API取修改好友的互动数据。 ![](https://static01.imgkr.com/temp/3d2cb9ea4c344f12b280a59fd6037f12.png) 还有一个注意的一些点： 1.小游戏目录下，新建jsserver目录 ![](https://static01.imgkr.com/temp/4dbc53f439be4a01b8009fd24b42f6be.png) 2.project.config.json中添加 "jsserverRoot": "jsserver/" 3.game.json中添加 交互模板 ![](https://static01.imgkr.com/temp/67822cf608fa4407b332d0ea9c3e45ff.png) ![](https://static01.imgkr.com/temp/3bd2382305cc4673baf2f18d8ce5d583.png) 完成以上的步骤，在主域中，获取自己的互动数据wx.getUserInteractiveStorage，此处需要解密从微信回传的加密数据。需要云函数调用或者通过服务端处理。 在完成开放数据域代码后，直接该工程目录下，新建build-templates文件夹，并且将开放数据域代码open-data拷贝一份到build-templates/wechatgame下，如图 ![](https://static01.imgkr.com/temp/1c3dc05d0b9a4272bca9669d9b3cb65b.png) 然后构建即可。 完整代码，尽在[https://gitee.com/zzhcodes/WxOpenDataProject](https://gitee.com/zzhcodes/WxOpenDataProject) 参考链接： [微信关系链数据](https://developers.weixin.qq.com/minigame/dev/guide/open-ability/open-data.html) [微信关系链互动数据](https://developers.weixin.qq.com/minigame/dev/guide/open-ability/interactive-data.html)