四、微信小游戏 --- 开放数据域,好友排行榜的实现

相关教程:

微信公众平台-关系链数据使用指南

Egret开放数据域教程

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个测试数据了

 

原文地址:https://www.cnblogs.com/gamedaybyday/p/9060709.html