CocosCreator | 微信小游戏排行榜微信开放域

更多笔记和源码请关注：【微信公众号】 CocosCreator笔记

演示

技术摘要

主域工程

微信授权

创建子域节点

向子域发送消息

子域工程

读写用户云托管数据

接收主域发送的消息

构建运行

实现

1微信授权

只实现微信小游戏排行榜的话可以不用添加微信授权

但多记录点，以备不时之需

微信授权按钮代码：

//创建一个透明按钮在登录按钮的node节点上
createAuthorizeButton(nodeAuthorize: cc.Node) {let nodeSize = cc.size(nodeAuthorize.width, nodeAuthorize.height);let frameSize = cc.view.getFrameSize();let winSize = cc.winSize;let left = (winSize.width * 0.5 + nodeAuthorize.x - nodeSize.width * 0.5) / winSize.width * frameSize.width;let top = (winSize.height * 0.5 - nodeAuthorize.y - nodeSize.height * 0.5) / winSize.height * frameSize.height;let width = nodeSize.width / winSize.width * frameSize.width;let height = nodeSize.height / winSize.height * frameSize.height;let btnAuthorize = wx.createUserInfoButton({type: 'text',text: '',style: {left: left,top: top,width: width,height: height,lineHeight: 0,backgroundColor: '',color: '#ffffff',textAlign: 'center',fontSize: 16,borderRadius: 4}})btnAuthorize.onTap((res) => {if (res.userInfo) {console.log("wx authorize success");//wx.showToast({title:"授权成功"});} else {console.log("wx authorize fail");//wx.showToast({title:"授权失败"});}btnAuthorize.destroy();});
}

2创建子域节点

具体方法文档写的已经很详尽，请参考文档：

https://docs.cocos.com/creator/2.2/manual/zh/publish/publish-wechatgame-sub-domain.html

在场景中新建节点

添加组件->其他组件->WXSubContextView

设置节点的size为排行榜的size

此节点就是显示微信开放数据域的容器

3创建子域工程

新建项目：wx-open-data-project

或者直接使用官方GitHub上的项目

记得一定要精简项目模块，不然包体会是双倍大小

开放数据域项目的Canvas尺寸需要和主域项目中WXSubContextView组件的尺寸保持一致

勾选 Fit Height 和 Fit Width

在场景里添加scrollview或者你需要的组件

这里我就简单的在content组件上挂载了一个layout

如果需要大量数据的话，需要优化scrollview

创建预制件并填写对应的预制件代码

4相关代码

主域：

向开放域发送消息（用户最高分数）

wx.getOpenDataContext().postMessage({score: score
});

子域：

监听主域发送的消息(用户最高分数)并提交至云托管

//监听主域发送的消息
wx.onMessage((data) => {if (data.score) {//存储最高分//注意value类型必须为stringlet kvScore = { key: "score", value: String(data.score) };let kvList = [];kvList.push(kvScore);//对用户托管数据进行写数据操作wx.setUserCloudStorage({KVDataList: kvList,success: (res) => {console.log(res);this.initFriendInfo();},fail: (res) => {console.error(res);}});}
});

无需用户授权，获取用户信息

//在无须用户授权的情况下，批量获取用户信息
//要获取信息的用户的 openId 数组，如果要获取当前用户信息，则将数组中的一个元素设为 'selfOpenId'
wx.getUserInfo({openIdList: ['selfOpenId'],lang: 'zh_CN',success: (res) => {},fail: (res) => {console.error(res);}
});

获取好友数据

//拉取当前用户所有同玩好友的托管数据
let self = this;
wx.getFriendCloudStorage({keyList: ['score'],success: (res) => {console.log(res);self._listRank = res.data;self.initList();},fail: (res) => {console.error(res);}
});

获取当前用户托管数据

//获取当前用户托管数
wx.getUserCloudStorage({keyList: ['score'],success: (res) => {console.log(res.KVDataList);},fail: (res) => {console.error(res);}
})

将好友信息按分数降序排序，并显示

compare(property) {return (x, y) => {return Number(y[property]) - Number(x[property]);}
}initList() {this._listRank.sort(this.compare("score"));this.nodeContent.removeAllChildren();for (let i = 0; i < this._listRank.length; ++i) {this.createItem(this._listRank[i], i);}
}createItem(info, rank) {let node = cc.instantiate(this.prefabItem);node.parent = this.nodeContent;node.getComponent(PrefabItem).init(info, rank);
}

5
构建运行

借用官方文档的两张图片

构建游戏项目：

打开主域项目，在菜单栏 -> 项目中打开构建发布面板，选择微信小游戏，填入开放数据域代码目录。该目录是开放数据域构建后所在的路径，并且这个路径需要放在主域构建目录下。然后点击构建

构建开放域项目：

发布路径指定到主域项目工程的发布包目录即 build 目录下。然后点击构建。

游戏名称必须和主域项目中设置的开放数据域代码目录名称一致

运行结果：

CocosCreator | 微信小游戏排行榜微信开放域相关推荐

CocosCreator微信小游戏排行榜及开放数据域的理解与使用
微信小游戏开放数据域及排行榜的使用好久没有写博客了,距离上一次博客,已经有了近半年之久,这段时间发生了太多的事,当然,这些不是今天的主题,接下来我们主要讲一讲微信小游戏开放数据域的使用,以及如果制作 ...
CocosCreator微信小游戏排行榜开发
CocosCreator微信小游戏排行榜开发开发前言步骤1 开发前言第一次接触微信小游戏开发的小伙伴,可以看看排行榜的开发和注意事项: 一.开发微信排行榜的话,用户的信息需要从微信提供的API获 ...
基于Laya游戏引擎实现微信小游戏排行榜
我们都知道,微信小游戏和小程序目前风头十足,很多公司都逐渐增加了相关业务线来迅速推广自己的产品和抢占用户群.说到微信小游戏,就不得不提到排行榜这个功能,就目前游戏行业,似乎都离不开排行榜这个重要功能, ...
CocosCreator微信小游戏接入微信登录获取微信名、头像、经纬度等信息
前言微信小游戏接入微信登录还是很简单的,不像原生平台开发,还需要提供appid,appsecret等信息,并有一系列的和微信平台的交互,才能最终授权成功. 下面TS代码演示了,老的接入流程. exp ...
微信小游戏和微信小程序的区别与共同
微信小游戏小游戏的运行环境在 iOS 上是 JavaScriptCore,在 Android 上是 V8,都是没有 BOM 和 DOM 的运行环境,没有全局的 document 和 window 对 ...
LayaAirIDE实现微信小游戏排行榜绘制（开放数据域）
看这篇文章的前提是你 1.已经在微信Web开发者平台里使用wx.setUserCloudStorage接口把自己的数据存储到微信提供的服务器上, 2.并且已经通过wx.getFriendCloudSt ...
pixijs微信小游戏排行榜开放域开发
关于微信小游戏开放域的基本概念本文不作介绍请去微信官文文档阅读: 主域: 在这你有几件事要作,第一准备好给离屏canvas用的容器:第二作好离屏canvas事件交互,比如切换菜单/关闭窗口:第三循环里 ...
微信小游戏排行榜：Cocos Creator
上一篇文章介绍了主域和子域的概念,微信小游戏:主域子域,这一篇介绍一下怎样在微信小游戏中制作好友排行榜创建工程由于开放数据域是一个封闭.独立的 JavaScript 作用域,所以开发者需要创建两个 ...
微信小游戏排行榜页滚动查看排行榜（canvas指定区域溢出滚动，懒渲染）
在微信小游戏中,好友排名数据是能在关系数据域操作,整个关系数据域只会返回一个最终的sharedCanvas,并且这个canvas不能调用toDataURL()方法,所以要展示好友排行榜的话只能在关系数 ...

CocosCreator | 微信小游戏排行榜微信开放域

CocosCreator | 微信小游戏排行榜微信开放域相关推荐

最新文章

热门文章

CocosCreator | 微信小游戏排行榜 微信开放域

CocosCreator | 微信小游戏排行榜 微信开放域相关推荐

最新文章

热门文章

CocosCreator | 微信小游戏排行榜微信开放域

CocosCreator | 微信小游戏排行榜微信开放域相关推荐