【教程】cocos creator 3.x 微信小游戏子域

Cocos creator 3.x起的微信子域,和旧版不一样了,当前做微信排行榜教程。

以前是使用creator新建一个子域项目进行操作,详情参考皮神的手把手案例:

微信小游戏接入好友排行榜(开放数据域)微信小游戏接入好友排行榜(开放数据域)

由于这里的编辑器有点不太会操作,github还没用过【狗头】【假程序员】,可能csdn的代码好看一点点。

CSDN链接:【微信小游戏】cocos creator 3.x对接小游戏子域_老豆8的博客-CSDN博客

一、构建
头部菜单栏》项目》构建

1

打开构建页面,点击左上角新建构建任务,或者是原项目点击修改按钮

2

打勾 生成开放数据域,将会在生成的wx项目里多一个openDataContext的文件夹

自动对应在你的项目里生成:build\wechatgame\openDataContext

4

二、openDataContext
里面已经存在案例demo,我开发的时候卡住的主要是在于demo不会操作,耗费了挺多时间,现在给案例大家参考就明白了。

分别对应是index入口,template模板,demodata测试数据

结构为:

具体代码分析
index:`
import { rankStyle } from ‘./render/style’
import { setRankTemplate } from ‘./render/template’
import Layout from ‘./engine’
import {friendRankData, getFriendRankData } from ‘./render/dataDemo’

let __env = GameGlobal.wx || GameGlobal.tt || GameGlobal.swan;
let sharedCanvas = __env.getSharedCanvas();
let sharedContext = sharedCanvas.getContext(‘2d’);
let danmuInterval = 0;

function drawRank() {
Layout.clear();
Layout.init(setRankTemplate(friendRankData), rankStyle);
Layout.layout(sharedContext);
}

function updateViewPort(data) {
Layout.updateViewPort({
x: data.x,
y: data.y,
width: data.width,
height: data.height,
});
}

__env.onMessage(data => {
console.log(“onMessage—”, data);

clearInterval(danmuInterval);
if (data.type === 'engine' && data.event === 'viewport') {
    updateViewPort(data);

} else if (data.key == "RankData") {
    getFriendRankData("RankData", drawRank)
}

});
`

dataDemo:
`let testData = {
data: [
/*
{
rankScore: 0,
avatarUrl: ‘’,
nickname: ‘’,
},
*/
],
};

const maxCount = 30;
for (let i = 0; i < maxCount; ++i) {
let item = {};
item.rankScore = Math.floor((Math.random() * 500));
item.avatarUrl = ‘openDataContext/render/avatar.png’;
item.nickname = ‘Player_’ + i;
testData.data.push(item);
}
testData.data.sort((a, b) => b.rankScore - a.rankScore);

export let friendRankData = {
data: [
/*
{
rankScore: 0,
avatarUrl: ‘’,
nickname: ‘’,
},
*/
],
itemBg: “”,
};

/**

  • 获取好友排行榜列表
    */
    export function getFriendRankData(key, callback) {
    wx.getFriendCloudStorage({
    keyList: [key],
    success: res => {
    // console.log(“getFriendData success--------”, res);
    friendRankData.data = res.data;
    friendRankData.data.sort((a, b) => b.KVDataList[0].value - a.KVDataList[0].value);
    friendRankData.itemBg = ‘openDataContext/render/itemBg.png’;
    for (let i = 0; i < friendRankData.data.length; i++) {
    friendRankData.data[i].rankImg = ‘openDataContext/render/Rank_’ + (i + 1) + ‘.png’;
    }

         callback && callback();
     },
     fail: res => {
         console.log("getFriendData fail--------", res);
         callback && callback(res.data);
     },
    

    });
    }
    `

Style:
`
//-----------------------------------rankStyle-------------------------------------------
export let rankStyle = {
container: {
width: 750,
height: 1334,
borderRadius: 12,
backgroundColor: ‘rgba(0, 0, 0, 0)’,
alignItems: ‘center’,
},

rankList: {
    width: 750,
    height: 595,
    marginTop: 430,
    backgroundColor: 'rgba(0, 0, 0, 0)',
},

list: {
    width: 750,
    height: 500,
    backgroundColor: 'rgba(0, 0, 0, 0)',
    alignItems: 'center',
},

listItem: {
    backgroundColor: 'rgba(0, 0, 0, 0)',
    width: 600,
    height: 120,
    flexDirection: 'row',
    alignItems: 'center',
},
listItemNumImg: {
    marginLeft: 28,
    marginRight: 18,
    borderRadius: 6,
    width: 54,
    height: 70,
},

listItemNum: {
    marginLeft: 20,
    width: 80,
    height: 80,
    fontSize: 30,
    fontWeight: 'bold',
    color: '#452E27',
    lineHeight: 90,
    textAlign: 'center',
},

listHeadBg: {
    position: 'absolute',
    borderRadius: 6,
    width: 600,
    height: 120,
},

listHeadImg: {
    borderRadius: 6,
    width: 70,
    height: 70,
},

listItemScore: {
    fontSize: 40,
    fontWeight: 'bold',
    marginLeft: 10,
    height: 80,
    lineHeight: 80,
    width: 100,
    textAlign: 'right',
},

listItemName: {
    fontSize: 40,
    height: 80,
    lineHeight: 80,
    width: 200,
    marginLeft: 30,
},

listScoreUnit: {
    opacity: 0.5,
    color: '#000000',
    fontSize: 40,
    height: 80,
    lineHeight: 80,
    marginLeft: 8,
},

}
`

模板经过模板引擎编译成版本函数,可通过 [doT.js - the fastest and concise javascript template engine for Node.js and browsers](http:// doT.js - the fastest and concise javascript template engine for Node.js and browsers ) 在线获得
Template:
`//-----------------------------------rankTemplate-------------------------------------------
/*



{{~it.data :item:index}}

              <image class="listHeadBg" src="{{= it.itemBg }}"></image>
            {{? index <= 2 }}
            <image class="listItemNumImg" src="{{= item.rankImg}}"></image>
            {{?}}
            {{? index > 2 }}
            <text class="listItemNum" value="{{= index + 1}}"></text>
            {{?}}
                <image class="listHeadImg" src="{{= item.avatarUrl }}"></image>
              <text class="listItemName" value="{{= item.nickname}}"></text>
              <text class="listItemScore" value="{{= item.KVDataList[0].value}}"></text>
              <text class="listScoreUnit" value="关"></text>
            </view>
        {{~}}
    </scrollview>
</view>
*/

// 上述模板经过模板引擎编译成版本函数,可通过 doT.js - the fastest and concise javascript template engine for Node.js and browsers 在线获得
export function setRankTemplate(it) {
var out = ’ ';
var arr1 = it.data;
if (arr1) {
var item, index = -1,
l1 = arr1.length - 1;
while (index < l1) {
item = arr1[index += 1];
out += ’ ';
if (index <= 2) {
out += ’ ';
}
out += ’ ';
if (index > 2) {
out += ’ ';
}
out += ’ ';
}
}
out += ’ ';
return out;
}

`

三、生成模板
还支持一个模板的生成,点击头部主菜单》项目》创建模板》微信小游戏
5

自动对应在你的项目里生成:build-templates\ wechatgame 以后修改这里,对应微信项目那边的子域也会变成和这里一样。
6

1赞

学习了谢谢

收藏一下,学习学习

你好,麻烦问下一个按钮点击后隐藏,对元素隐藏怎么做

谢谢楼主的劳动成果。我有一个疑问,这些代码是模板的罗列吗?我仔细比对了一下,是多了个拉取数据的方法。
当我把数据拉取过来替换掉模板的假数据的时候,会报错。
接入微信排行榜遇到问题,饱受折磨,求教各位大神 - Creator 3.x - Cocos中文社区

mark!!!