cocos creator升级到 3.x以后,开放数据域的使用方式发生了重大变化。在
官方开放数据域github示例项目 中,提到了最重大的变更:
Cocos Creator 3.x 无需依赖 Cocos Creator 2.x 导出子域工程,可以直接通过构建面板勾选 生成开放数据域工程模版 直接构建出开放数据域工程。
本人在使用时,感觉确实比2.x版本在生成开放数据域工程方面更加方便。
但是,在默认示例工程基础上进行二次开发时,仍然遇到问题。
开发环境:
- PC win10
- cocos creator 3.4.1
- 微信开发者工具stable 1.05.2102010
问题描述:
对默认生成的开放数据域模板工程进行二次开发改造,
主要是在dataDemo.js文件中,将默认示例数据改为通过wx.getFriendCloudStorage(Object object)方法获取,并将获取到的数据添加到 dataDemo.data 对象数组中,用于在排行榜页面展示。
本人初步的实现如下:
wx.getFriendCloudStorage({
keyList:['week_rank'],
success:(res) => {
let item = {};
for (let i = 0; i < res.data.length; i++) {
item.avatarUrl = res.data[i].avatarUrl;
item.nickname = res.data[i].nickname;
item.rankScore = Number(res.data[i].KVDataList[0].value);
console.log("item is %o", item);
dataDemo.data.push(item);
}
dataDemo.data.sort((a, b) => a.rankScore - b.rankScore);
console.log("push over dataDemo.data : %o", dataDemo.data);
},
fail:(res) => {
console.log("fail, res is %o ", res);
}
});
从控制台输出结果看,数据是获取并添加成功的
然而排行榜页面显示为空。
但是,如果将前一步获取的数据硬编码添加到目标数组
let item = {};
item.avatarUrl = "https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTLebniaI51eIuuFTwdDsc2Y0hk2888sQvhzgKulJGpkicOicRsl5TJnaOxeTPtftEsGIqp4E6So3RzNg/132";
item.nickname = "有微信没有威信1";
item.rankScore = "64.2";
dataDemo.data.push(item);
console.log("dataDemo.data : %o", dataDemo.data);
则排行榜页面正常显示:
综上,问题的关键在于,由于wx.getFriendCloudStorage方法是异步执行的,当wx.getFriendCloudStorage方法尚未执行完时,排行榜页面已经加载完成了,导致获取到的数据未显示在排行榜页面。因此,希望在方法执行完成、dataDemo.data的数据也添加完毕后,再加载排行榜页面。请问,如何能较好地实现这一需求?
另,本人对3.x版本开放数据域使用的doT.js模板引擎不够了解,官方文档及其他资料也比较缺失。实在不知如何入手,甚至不知道是否应该将wx.getFriendCloudStorage的方法直接放在dataDemo.js中。
首次发帖求助,期望得到解答!
最好希望官方能提供3.x版本关于开发数据域的相对完整的示例工程。
谢谢!