cocos creator将子域打包到主域方法 微信小游戏为了保护其社交关系链数据，增加了 开放数据域 的概念，这是一个单独的游戏执行环境。开放数据域中的资源、引擎、程序，都和主游戏完全隔离，开发者只有在开放数据域中才能访问微信提供的 wx.getFriendCloudStorage() 和 wx.getGroupCloudStorage()两个 API，用于实现一些例如排行榜的功能。由于开放数据域是一个封闭、独立的 JavaScript 作用域，所以开发者需要创建两个项目：主域项目工程（正常的游戏项目）开放数据域项目工程（通过微信 API 获取用户数据来做排行榜等功能的项目）一、实现主域和子域发送接收消息主域代码：加入到onload(){}方法下// game.js let openDataContext = wx.getOpenDataContext() openDataContext.postMessage({ text: 'hello', year: (new Date()).getFullYear() })子域项目代码：cc.Class({ extends: cc.Component, properties: { }, onLoad () { // src/myOpenDataContext/index.js wx.onMessage(data => { console.log(data) /* { text: 'hello', year: 2018 } */ }) }, start () { }, // update (dt) {}, });二、主域执行构建-发布：正常发布，默认，增加开放数据域代码目录点击构建即可。三、子域构建这里上图发布路径选择的是主域下的发布路径，执行构建之后会生成wx-open-data-peoject文件夹。四、运行主域项目到微信开发者工具可以看到上面主域和子域实现了互通

解决微信setUserCloudStorage:fail invalid KVData item问题 牢记：KVData的key和value的值都必须是string类型wx.setUserCloudStorage()可以将当前用户的游戏数据托管在微信后台。实现提交托管数据代码如下。可以看到都用了String()对数据进行可转换let arr = new Array(); arr.push({ key: "missionId", value: String(rec.misssionId) }); arr.push({ key: "wxscore", value: String(topScore) }); wx.setUserCloudStorage({ KVDataList: arr, success: function (res) { console.log("存储记录成功\n", res); }, fail: function (res) { console.error(res); }, complete(res) { } })

解决cocos creator子域黑屏问题 做好cocos creator游戏之后，显示子域发现是黑色透明的，如下图：解决方法就是把主域用于显示子域空节点改成白色即可

js实现数组按照某个字段排序，cocos creator数组排序 在做玩家分数排行的时候需要对数据经常排序，这里实现得是对数组中的某个字段进行排序// 排序 compare:function(property,desc) { return function (a, b) { var value1 = a[property]; var value2 = b[property]; if(desc==true){ // 升序排列 return value1 - value2; }else{ // 降序排列 return value2 - value1; } } },使用方法this.allInfoList.sort(this.compare("wxscore",false)) console.log(this.allInfoList)

Cocos creator游戏接入微信开放数据域，实现好友排行榜功能 微信小游戏加入排行榜功能，可以增加游戏微信好友参与，增加分数竞争氛围，官方的说明文档不怎么详细，也有坑。本文实战以cocos creator v2.2版本为例，供大家参考。结果显示：前提：1、创建主域：用于显示子域画布2、创建子域：子域界面步骤及说明1、主域创建空节点：用于显示子域内容，设置宽高背景颜色设置为白色。注意此处不要设置黑色，不然会出现透明黑问题。添加WXSubContextView组件，新增了 FPS 属性, 用户可以通过设置 FPS 直接控制开放数据域的帧率。步骤：属性检查器里面-》添加组件-》其他组件-》WXSubContextView创建成功显示如下至此，主域界面代码已经完成了。2、主域数据提交到微信托管数据，这里传递用户游戏得分给子域let openDataContext = wx.getOpenDataContext() openDataContext.postMessage({ wxscore: topScore, })3、编写向子域发送数据方法，博主这里采用按钮形式，用户点击按钮即向子域发送请求数据 // 好友榜 frendRank(){ if (typeof wx === 'undefined') { return; } let wxrank = cc.find("Canvas/bghome_Sprite/wxrank"); wxrank.active = true; let openDataContext = wx.getOpenDataContext() openDataContext.postMessage({ showwx: 2, }) },以上是好友榜单代码，向子域发送请求4、子域界面搭建子域采用Node空节点,和ScrollView 组件，实现排行榜界面，用于显示数据使用预制资源（prefab），对数据进行遍历5、子域接收主域传过来的消息，进行判断，执行相应的方法子域wxrank.js代码如下cc.Class({ extends: cc.Component, properties: { itemParent: cc.Node, pre_item: cc.Prefab, }, onLoad () { // let wxrankbg = cc.find("Canvas/bg_rank"); // wxrankbg.active = false; if (typeof wx === 'undefined') { return; } // src/myOpenDataContext/index.js this.allInfoList = []; wx.onMessage(data => { if(data.wxscore){ this.wxscore = data.wxscore; let arr = new Array(); arr.push({ key: "wxscore", value:String(this.wxscore) }); let newKVData = arr this.setNewCloudScore(newKVData); //调用写入分数 }else if(data.showwx){ // 如果是微信榜单 this.getFriendInfo(); } }) }, getResult: function(numss, data){ var item = cc.instantiate(this.pre_item); var itemH = item.height; this.itemParent.height = itemH * numss for(let i = 0;i < numss; i++){ var item = cc.instantiate(this.pre_item); item.parent = this.itemParent; var js = item.getComponent('item'); if(js){ var name = data[i].nickName var score =data[i].wxscore var actar = data[i].avatarUrl js.init(i+1, name, score, actar); } item.y = -50 - i * itemH } }, // 排序 compare:function(property,desc) { return function (a, b) { var value1 = a[property]; var value2 = b[property]; if(desc==true){ // 升序排列 return value1 - value2; }else{ // 降序排列 return value2 - value1; } } }, addItem:function(){ this.allInfoList.sort(this.compare("wxscore",false)) var datass = this.allInfoList; var dataLength = datass.length this.getResult(dataLength, datass); }, getFriendInfo () { // 获取同城好友信息(包括自身) wx.getFriendCloudStorage({ keyList: ['wxscore'], success: (res) => { this.allInfoList=[]; // console.log(res) for (let i = 0; i < res.data.length; i++) { // 获取玩家微信名，头像url和分数 let nickName = res.data[i].nickname; let avatarUrl = res.data[i].avatarUrl; let wxscore = 0; if (res.data[i].KVDataList.length) wxscore = res.data[i].KVDataList[0]['value']; // 加入到数组中 this.allInfoList.push({ nickName: nickName, avatarUrl: avatarUrl, wxscore: wxscore }); } this.addItem(); }, fail: (res) => { console.log(res); } }); // console.log(this.allInfoList) }, // 存储记录 setNewCloudScore(newKVData){ wx.setUserCloudStorage({ KVDataList: newKVData, success: function (res) { console.log("存储记录成功\n", res); }, fail: function (res) { console.error(res); }, complete(res) { } }) }, start () { }, // update (dt) {}, // });6、子域item.js代码如下：对数据进行处理和显示cc.Class({ extends: cc.Component, properties: { lab_num: cc.Label, lab_avtar: cc.Sprite, lab_name: cc.Label, lab_score: cc.Label }, onLoad () { }, init:function(num,name,score,actar){ this.lab_num.string = num this.lab_name.string = name this.lab_score.string = score // 加载远程网络图片 var that =this cc.loader.load({url: actar, type: "png"},function(err,text){ // console.log('报错信息：'+err+'图片地址：'+text) that.lab_avtar.spriteFrame=new cc.SpriteFrame(text); }); }, start () { }, // update (dt) {}, });6、构建和发布（主域和子域）：6.1、主域发布，填写微信开放数据子域目录名称，这里要和子域项目名称一致6.2、子域项目发布：这里发放平台选择微信开放数据域，发布路径选择主域build\发布的文件夹下点击构建即可，运行到微信开发者工具下，即可同步显示用户数据。