更多筆記和源碼請關注：【微信公衆號】 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類型必須爲string
let 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 目錄下。然後點擊 構建。
遊戲名稱 必須和主域項目中設置的 開放數據域代碼目錄 名稱一致
運行結果：
