相關教程：
Head First
這里以排行榜的實現為例子...
為了保護關系鏈數據，小游戲增加了開發數據域。
因為你在主項目調用獲取好友數據的API是用不了的。只有子項目，也就是開放數據域項目能獲取。
當要顯示好友排行榜的時候，將子項目當做Bitmap繪制到主項目上。
所以總結起來就是：一個白鷺項目放游戲，一個白鷺項目專門放排行榜。
所以本節我們會有4個項目：
Egret主項目
主項目發布的小游戲項目
Egret開放數據域項目
開放數據域項目發布的小游戲項目
一、創建主項目
1.1 創建主項目
主項目的創建同第一節一樣。
1.2 小游戲項目中設置開放數據域項目路徑
小游戲項目game.json設置開放數據域配置。
稍后我們創建開放數據域項目后，發布到openDataContext中。
1.3 在主項目中保存用戶積分
保存數據，是在主項目和開發數據域都能調用的，我們在Main.ts里保存用戶數據，使用接口wx.setUserCloudStorage。
假如用戶玩游戲得分16，游戲結束時間是1513080573ms，用戶耗時36500ms。
主項目Main.ts：
//Test 保存用戶數據
let KVDataList = [{
key:"",
value:""
}];
KVDataList[0].key = "test";
KVDataList[0].value = JSON.stringify({
"wxgame": {
"score": 16,
"update_time": 1513080573
},
"cost_ms": 36500
});
platform.setUserCloudStorage(KVDataList);
platform.ts中增加setUsercloudStorage接口
主項目platform.ts：
declare interface Platform {
getUserInfo(): Promise<any>;
login(): Promise<any>;
setUserCloudStorage(KVDataList:any):Promise<any>;
}
並在發布的小游戲項目platform.js中實現setUserCloudStorage接口
小游戲項目platform.js：
//保存用戶數據
setUserCloudStorage(KVDataList){
return new Promise((resolve, reject) => {
console.log("platform.js => 開始保存用戶數據",KVDataList);
wx.setUserCloudStorage({
KVDataList: KVDataList,
success: function (res) {
console.log("platform.js => 保存用戶數據成功");
resolve();
}
})
})
}
這樣在Egret項目Man.ts中調用platform.ts的setUserCloudStorage，最終會調用發布的小游戲項目中的platfrom.js的setUserCloudStorage。
這種寫法比較蛋疼，因為你每一個wx接口的實現都得寫在小游戲項目platform.js中，兩頭都要寫代碼。
運行后在微信開發者工具中輸出：
二、創建開放數據域項目
2.1 創建一個Egret項目
同主項目一樣創建
2.2 下載官方Demo
Demo地址
沒demo你壓根沒法實現，因為教程壓根沒寫清楚...
2.3 根據Demo修改項目
1. 刪除egretProperties.json多余的庫
2. 刪除resource （因為子項目能使用主項目的資源，所以子項目的resource沒用了，圖片都放主項目里）
3. 修改發布路徑
4. 復制粘貼demo中的wx_mini_game.d.ts，不然你在子項目調用微信的API會沒有提示
5. 復制粘貼demo中的wxgame.ts
6. 修改index.html的webgl為canvas模式，fps為60
7. 總結，就是自己項目跑不了的時候，就去復制粘貼demo的！！！
2.4 根據Demo修改子小游戲項目
到這里，我們的子項目已經改造完畢了，將子項目發布成小游戲項目。
你創建的項目發布成小游戲后，子小游戲項目會發布到主小游戲項目的openDataContext路徑中。
只需發布一次小游戲，然后每次編譯子項目，都會自動同步更新openDataContext路徑下的代碼，相對方便。
值得注意的是，發布的子小游戲項目會缺文件！！！！！比如index.js什么的都沒有！！！你得復制demo中的到openDataContext中....缺什么復制什么。
2.5 子項目中獲取好友數據
子項目Main.ts：
class Main extends egret.DisplayObjectContainer{
constructor(){
super();
//創建一個點擊按鈕
let btn:egret.Sprite = new egret.Sprite();
btn.graphics.beginFill(0xff0000);
btn.graphics.drawRect(100,100,100,100);
btn.graphics.endFill();
btn.touchEnabled = true;
this.addChild(btn);
//點擊按鈕，獲取好友數據
btn.addEventListener(egret.TouchEvent.TOUCH_TAP, ()=>{
//獲取朋友數據
wx.getFriendCloudStorage({
keyList:["test"],
success:res=>{
console.log("獲取好友數據:",res);
},
fail: err => {
console.log(err);
},
complete: () => {
}
});
},this);
}
}
2.6 主項目中顯示子項目
注意子項目的Bitmap要顯示在最上層
主項目Main.ts：
//繪制離屏canvas
//主要示例代碼開始
const bitmapdata = new egret.BitmapData(window["sharedCanvas"]);
bitmapdata.$deleteSource = false;
let bitmap:egret.Bitmap;
const texture = new egret.Texture();
texture._setBitmapData(bitmapdata);
bitmap = new egret.Bitmap(texture);
bitmap.width = this.stage.stageWidth;
bitmap.height = this.stage.stageHeight;
this.addChild(bitmap);
egret.startTick((timeStarmp: number) => {
egret.WebGLUtils.deleteWebGLTexture(bitmapdata.webGLTexture);
bitmapdata.webGLTexture = null;
return false;
}, this);
//主要示例代碼結束
2.7 運行效果
運行后，會出現一個按鈕，點擊后獲取到好友數據列表。
到此，在開放數據域獲取好友數據列表已實現
下圖將排行榜數據顯示出來，因為只有我一個人，所以數據只有一條...
坑總結：
1. 發布開放數據域項目會缺失文件。
必須下載Demo，復制粘貼Demo內的文件。
2. 發布的小游戲項目，js文件沒有自動壓縮。體積很大2.25M。
必須進行發布一次HTML5游戲的操作，小游戲項目下的引擎文件才會壓縮到457kb。
或者修改config.wxgame.ts的下面這行
new CompilePlugin({ libraryType: "debug", defines: { DEBUG: true, RELEASE: false } })
為
new CompilePlugin({ libraryType: "release", defines: { DEBUG: false, RELEASE: true } }),
3.子項目能不能使用eui呢？
能使用eui。只不過子項目庫會變大。其實感覺可以接受eui.min.js的205kb。這樣制作排行榜的UI時比較方便。
4.子項目的排行榜圖片如何獲取呢？
子項目的圖片可以直接使用主項目的。
下面代碼是子項目的排行榜背景圖片，使用主項目resource/assets/rank_bg.png路徑下的圖片例子。
/**
* 排行榜面板
* @author chenkai 2018/5/22
*/
class RankPanel extends eui.Component{
private rankBg:eui.Image; //排行榜背景
private rankList:eui.List; //排行榜列表
public constructor(data) {
super();
this.skinName = "RankPanelSkin";
this.rankBg.source = "resource/assets/rank_bg.png";
//初始化排行榜列表
this.rankList.itemRenderer = RankListItem;
this.rankList.dataProvider = new eui.ArrayCollection(data.data);
}
}
5. 主項目如何通知子項目顯示排行榜和關閉排行榜？
主項目向子項目發送消息：
//向開放數據域發送消息
console.log("向開放數據域發送消息");
let openDataContext = wx.getOpenDataContext();
openDataContext.postMessage({
text: 'hello',
year: (new Date()).getFullYear()
});
子項目接收主項目的消息
//監聽主域發送的消息
wx.onMessage(data=>{
console.log("主域發送來的消息：",data);
});
注意子項目是沒法向主項目發送消息的，因為微信沒提供這個接口。
所以排行榜關閉按鈕必須做在主項目中，主項目中點擊關閉排行榜，通知開放域關閉排行榜。
6. 如何在測試時，添加多個微信用戶來體驗游戲？
登陸公眾平台，在用戶身份->編輯->添加成員。可以添加你的微信分身，並配置權限。
這樣在未發布小游戲時，才能使用其他賬號來開發和體驗游戲。
在getFriendCloudStorage時，就可以獲取到2個測試數據了
