0%

微信小游戏接入好友排行榜

前言

对于一个微信小游戏来说,好友排行榜绝对是必不可少的功能,能一定程度上增加玩家的战斗力和活跃度,实实在在地增加小游戏的曝光量。

这篇文章皮皮将讲解如何给小游戏项目加入微信好友排行榜功能~

不吹不黑,这绝对是新手开发者的福音!不接受任何反驳!

前排提示:文章中的 排行榜子域项目 已经上传至我的开源主页,甚至 改都不用改,接上项目就能用 ,链接在底部传送门~


正文

微信开放数据域

  1. 要让小游戏接入微信好友排行榜功能,我们必须先了解下什么是 开放数据域 ,来看看 Cocos 官方文档中的解释:

  2. 也就是说,我们的小游戏项目想要加入好友排行榜功能,就需要 单独再创建一个子项目专门用来展示好友排行榜 ,并且 只有在子项目中才可以调用微信提供的数据操作 API

主域(主项目)

  • 首先我们需要在主项目中 增加一个显示排行榜的按钮搭建排行榜的 UI 框架

    • 我们应该尽可能将 UI 部分放在主域中展示。
    • 必要的细节部分才在子域(子项目)中展示,保证效果的前提下越少越好啦。
  • 注意到 wxSubContextView (叫啥名随你啦)节点了吗?

    • 这个节点上有一个 WXSubContentView 组件,有了它,这个节点就会成为子域的容器。也就是说,子域的内容会显示在这个节点上,所以 子域的大小必须和这个节点一致
    • 另外需要注意的是,容器节点还需要一个空的 Sprite 组件来渲染子域的内容。
  • 然后来写一下排行榜的控制脚本,在主域中我们可以通过 wx.postMessage 函数向子域发送信息,获取排行榜或者设置玩家的分数。
const { ccclass, property } = cc._decorator;

@ccclass
export default class RankPanel extends cc.Component {

@property(cc.Node)
private main: cc.Node = null;

@property(cc.Node)
private closeBtnNode: cc.Node = null;

private static instance: RankPanel = null;

protected onLoad() {
RankPanel.instance = this;

this.closeBtnNode.on('touchend', RankPanel.hide, this);
}

protected onDestroy() {
this.closeBtnNode.off('touchend', RankPanel.hide, this);
}

public static show() {
this.instance.main.active = true;
this.getRank();
}

public static hide() {
this.instance.main.active = false;
}

/**
* 设置用户的分数
* @param value
*/
public static setScore(value: number) {
wx.postMessage({
event: 'setScore',
score: value
});
}

/**
* 获取排行榜
*/
public static getRank() {
wx.postMessage({
event: 'getRank'
});
}

}

子域(子项目)

  • 新建一个项目作为我们的子域,关于子域我们需要 注意 以下两点:

    • 将子域的 Canvas 节点的 Canvas 组件的设计分辨率调整为我们主域的容器节点的大小 ,否则子域内容会被缩放,导致运行效果与预期不一致!
    • 这里还要提一点,子域的 分辨率越低性能越高 ,反之 分辨率越高性能越低但是显示效果更好
  • 将子域的 Main Camera 节点的 Camera 组件的 Background Color 属性的不透明度(Alpha)设为 0 ,否则运行时子域内容就是一片漆黑!
  • 接下来就是和普通场景一样制作我们需要的好友列表 UI:

    • ScrollView 组件来展示我们的排行榜,并制作展示好友信息的预制体 item
    • 编写 RankItem 组件,添加到 item 预制体上,主要用来设置好友头像、昵称和分数。
  • 编写 Rank 组件,包含主要的设置、获取数据和更新好友信息展示的逻辑;在子域中,我们使用 wx.onMessage 来监听主域发来的消息。
  • 点击编辑器左上方工具栏的 [ 项目 –> 项目设置 –> 模块设置 ]取消勾选我们子域中没有用到的组件并保存 ,这一步的目的是 减少子域的包体大小

打包运行

  • 首先是我们的 主域 (主项目):打开 构建发布 面板,设置好参数后填写你的微信小游戏 appid ,然后将下方的 开放数据域目录设置为你的子域项目名 ,然后进行构建。
  • 然后是 子域 (子项目):同样是打开 构建发布 面板,将 发布平台 设置为 微信小游戏开放数据域发布路径 设置为 *我们主项目的导出目录(一般为 ${ 你的项目目录/build/wechatgame/ }) *,然后进行构建。
  • 最后,主项目和子项目都构建完成后,我们用 微信开发者工具运行我们的主项目 ,点击加载排行榜,可以看到我们已经成功加载了好友排行榜啦!

    • 如果你那里没有显示任何东西的话,那说明你还没有上传过分数~
    • 另外如果微信开发者工具报错“[GameOpenDataContext] 子域只支持使用 2D 渲染模式”,不用担心,这是正常情况,你的代码没问题,不必理会。

补充

  • 最后再补充一点,wx 是微信的内置全局变量,而在 Cocos Creator 中不存在 wx 这个全局变量,所以在 VSCode 中调用 wx 的函数会报错。
  • 所以我在主项目和子项目中都添加了一个 wx.d.ts 声明文件,来表明 wx 以及其函数的存在,VSCode 就不会再报错了,而且还有智能提示!
  • 我的开源游戏脚手架 eazax-ccc 就包含此文件,另外我的开源主页中也有单独的 wx.d.ts 仓库,下面是 wx.d.ts 文件的内容:

传送门

开源主页:陈皮皮

Eazax-CCC 游戏开发脚手架

微信好友排行榜通用模板

微信小游戏函数与类型声明(wx.d.ts)


更多分享

多平台通用的屏幕分辨率适配方案

围绕物体旋转的方案以及现成的组件

一个全能的挖孔 Shader

一个开源的自动代码混淆插件


公众号

菜鸟小栈

我是陈皮皮,这是我的个人公众号,专注但不仅限于游戏开发、前端和后端技术记录与分享。

每一篇原创都非常用心,你的关注就是我原创的动力!

Input and output.

欢迎关注我的其它发布渠道