egret微信小游戏相关

文章目录

官方文档
开放数据域
微信登录授权登录,获取微信用户信息,分享小游戏
微信排行榜
- 微信排行榜数据获取
- 微信好友排行榜绘制
- 主域名发送消息,共享域接受消息
其他注意事项

官方文档

微信小游戏快速上手
egret微信小游戏开发指南
菜鸟|Egret微信小游戏好友排行榜教程
小程序与小游戏获取用户信息接口调整，请开发者注意升级

整体的效果如下

开放数据域

开放数据域的绘制文件中已经拥有一个通过Canvas API绘制的排行榜，SharedCanvas 是主域和开放数据域都可以访问的一个离屏画布，原理如下所示。
egret中的ts类文件是在主域,编译生成微信小游戏文件中会有一个openDataContext文件夹里面有一个index.js文件,这个文件中可以绑定上传积分等信息到微信后台,从微信后台获取用户信息和积分数据,清除微信后台积分数据,以及微信后台获取微信好友排行榜数据;(这个文件中可以获取微信相关数据)
index.js文件还有一个SharedCanvas,是主域和开放数据域都可以访问的一个离屏画布;主域和开放数据域的分工不同,在主域中创建离屏画布并添加到显示容器中,主域通知共享域去获取微信好友列表信息,然后根据这些信息去绘制排行榜;(主域中创建添加移除销毁离屏画板,并传递分数时间等信息给共享域;共享域接受到信息后经过一系列的数据判断处理后去绘制排行榜);
总而言之就微信不会将一些信息给你随便用(主要是好友列表信息),所以只能在该共享域中获取微信好友列表信息;共享域是可以收到主域的信息的,但主域是不可以是收到共享域的信息;所以这个好友排行榜会的绘制只能放在共享域了.

微信登录授权登录,获取微信用户信息,分享小游戏

在egret中有一个Platform.ts类,对应编译后微信小游戏中的platform.js文件;主要用于获取平台数据接口的,包括微信授权登录获取用户信息,分享小游戏给好友,分享小游戏到群;

Platform.ts中全部代码

   //正式版中只有方法声明declare interface Platform {//获取用户信息getUserInfo(): Promise<any>;//微信授权登录login(): Promise<any>;//分享转发,主要用于被动转发showSharemMenu():Promise<any>//主动转发shareAppMessage():Promise<any>openDataContext:any}//测试版class DebugPlatform implements Platform {async getUserInfo() {return { nickName: "username" }}async login() {}async showSharemMenu() {}async shareAppMessage() {}openDataContext}//设置为全局if (!window.platform) {window.platform = new DebugPlatform();}declare let platform: Platform;declare interface Window {platform: Platform}

platform.js中全部代码

class WxgamePlatform {name = 'wxgame'//登录login() {return new Promise((resolve, reject) => {wx.login({success: (res) => {resolve(res)}})})}//获取用户信息getUserInfo() {let windowWidth = wx.getSystemInfoSync().windowWidth;let  windowHeight = wx.getSystemInfoSync().windowHeight;return new Promise((resolve, reject) => {let button = wx.createUserInfoButton({type: 'text',text: '获取用户信息',style: {left: windowWidth/2 - 100,top: windowHeight/2 - 20,width: 200,height: 40,lineHeight: 40,backgroundColor: '#008888',color: '#ffffff',textAlign: 'center',fontSize: 16,borderRadius: 4}});//允许按钮button.onTap((res) => {// button.hide();var userInfo = res.userInfo;resolve(userInfo);    console.log(res);button.destroy();});//关闭按钮button.offTap((res) => {resolve(res);button.destroy();});});}//被动分享showSharemMenu(){console.log("微信分享");return new Promise((resolve,reject) => {//显示当前页面的转发按钮wx.showShareMenu({withShareTicket:true,success:(res)=>{console.log("success", res);},fail:(res)=>{console.log("fail", res);},complete:(res)=>{console.log("complete",res);}});//被动转发wx.onShareAppMessage(() => {return {title: '捷达小飞车',imageUrl: 'openDataContext/assets/icon_first.png' // 图片 URL}});});}//主动转发  shareAppMessage() {return new Promise((resolve, reject) => {wx.shareAppMessage({title: '捷达小飞车',imageUrl: 'openDataContext/assets/icon_first.png' // 图片 URL  })})}
openDataContext = new WxgameOpenDataContext();}
//下面代码自动生成不要动
class WxgameOpenDataContext {createDisplayObject(type, width, height) {const bitmapdata = new egret.BitmapData(sharedCanvas);bitmapdata.$deleteSource = false;const texture = new egret.Texture();texture._setBitmapData(bitmapdata);const bitmap = new egret.Bitmap(texture);bitmap.width = width;bitmap.height = height;if (egret.Capabilities.renderMode == "webgl") {const renderContext = egret.wxgame.WebGLRenderContext.getInstance();const context = renderContext.context;需要用到最新的微信版本调用其接口WebGLRenderingContext.wxBindCanvasTexture(number texture, Canvas canvas)如果没有该接口，会进行如下处理，保证画面渲染正确，但会占用内存。if (!context.wxBindCanvasTexture) {egret.startTick((timeStarmp) => {egret.WebGLUtils.deleteWebGLTexture(bitmapdata.webGLTexture);bitmapdata.webGLTexture = null;return false;}, this);}}return bitmap;}postMessage(data) {const openDataContext = wx.getOpenDataContext();openDataContext.postMessage(data);}
}
window.platform = new WxgamePlatform();

小游戏启动时要微信授权登录获取用户信息,以及被动分享,在Main.ts中runGame方法中添加:

 private async runGame() {//微信授权登录await platform.login()//如果已经授权登录就跳过授权登录步骤if(!egret.localStorage.getItem("nickName")||!egret.localStorage.getItem("avatarUrl")){await this.loginAndGetUserInfo();}await this.loadResource();this.createGameScene();//游戏页面都加载完成后展示分享按钮await platform.showSharemMenu();const result = await RES.getResAsync("description_json")this.startAnimation(result);}//授权登录获取用户信息private async loginAndGetUserInfo() {const userInfo = await platform.getUserInfo();//微信授权登录console.log("userInfo",userInfo);if(userInfo){//名称和图片保存在本地egret.localStorage.setItem("nickName",userInfo.nickName);egret.localStorage.setItem("avatarUrl",userInfo.avatarUrl);}}

微信登录授权获取用户信息效果如下:

微信被动分享需要注意的是platform.showSharemMenu()必须在创建游戏场景后调用,否则会卡住;添加后会模拟器出现转发和取消选项效果如下:

微信主动转发分享:即我们自己添加一个分享按钮点击后分享给好友,代码如下

//转发按钮点击事件
this.forwardBtn.addEventListener(egret.TouchEvent.TOUCH_TAP,()=>{//主动转发事件platform.shareAppMessage();
},this);

微信排行榜

在共享获取微信相关信息和绘制排行榜,即在openDataContext文件夹的index.js文件中进行操作

微信排行榜数据获取

获取和写入用户托管数据到微信后台:即游戏结束时上传分数到微信后台,但要先判断是最大分数时才上传;wx.getUserCloudStorage方法获取用户托管信息,wx.setUserCloudStorage写入用户信息,相关代码,

    //获取当前用户托管数据当中对应 key 的数据。该接口只可在开放数据域下使用,比较当前分数是否比存储的分数大,如果大就更新数据function getUserCloudData(data) {nickName = data.nickName;myCurrentScore = data.wxgame.score;console.log("当前分数", myCurrentScore);wx.getUserCloudStorage({keyList: ["gameScoreData"],success: (re) => {console.log("[wx]success", re);let userData = re.KVDataList;console.log("userData", userData);myShowRank = ShowRanking.ShowLite;if (userData.length > 0) {let value = userData[0].value;let json = JSON.parse(value);console.log("json", json);maxScore = json.wxgame.score ? json.wxgame.score : 0;console.log("maxScore", maxScore);console.log("最大分数", maxScore);if (maxScore < myCurrentScore) {//如果当前分数大于最大分数则更新最大分数updateUserDataToCloud(data);}else {if(totalGroup.length <= 0){preloadFriendData();} else {console.log("有数据并且不用更新数据,就直接绘制");renderDirty = true;//重绘标记requestAnimationFrameID = requestAnimationFrame(loop);//每一帧绘制}}} else { //第一次为空updateUserDataToCloud(data);}}, fail: (re) => {console.log("[wx]fail", re);}, complete: (re) => {console.log("[wx]complete", re);}})}//对用户托管数据进行写数据操作。允许同时写多组 KV 数据。上传分数等信息到微信云function updateUserDataToCloud(data) {console.log("上传分数", data);let userKVData = {key: "gameScoreData",value: JSON.stringify(data)}console.log(userKVData);wx.setUserCloudStorage({KVDataList: [userKVData],success: (re) => {console.log("[wx]success", re);preloadFriendData();}, fail: (re) => {console.log("[wx]fail", re);}, complete: (re) => {console.log("[wx]complete", re);}});}

获取好友列表信息wx.getFriendCloudStorage;下面是获取用户信息,并对用户图像进行预加载,然后根据分数排序相关代码

//获取好友排行榜数据信息
function preloadFriendData() {wx.getFriendCloudStorage({keyList: ["gameScoreData"],success: (re) => {console.log("[wx]success", re);let dataArr = re.data;var tempArr = [];let imagUrl = [];console.log("dataArr", dataArr);for (var i = 0; i < dataArr.length; i++) {let objc = dataArr[i];let oj = {};oj.key = i;oj.name = objc.nickname;oj.url = objc.avatarUrloj.score = 0;if (objc.KVDataList.length > 0) {let userSetData = objc.KVDataList[0];let score = JSON.parse(userSetData.value).wxgame.score;console.log("分数", score);oj.score = score;}imagUrl.push(objc.avatarUrl);tempArr.push(oj);}console.log("tempArr", tempArr);totalGroup = null;totalGroup = tempArr;console.log("totalGroup1", totalGroup);if (imagUrl.length > 0) {preloadAvatarUrl(imagUrl);}}, fail: (re) => {console.log("[wx]fail", re);}, complete: (re) => {console.log("[wx]complete", re);}});
}//先预加载图片资源
function preloadAvatarUrl(avatarUrlList) {console.log("imgs", avatarUrlList);let preloaded = 0;let assetsAvatar = [];for (var j = 0; j < avatarUrlList.length; j++) {const img = wx.createImage();img.onload = () => {preloaded++;if (preloaded == avatarUrlList.length) {console.log("所有头像加载完成");console.log("图片", assetsAvatar);for (var i = 0; i < totalGroup.length; i++) {let objc = totalGroup[i];objc.img = assetsAvatar[i];}let data = totalGroup.sort(createComprisonFunction("score", false));for (var i = 0; i < totalGroup.length; i++) {let objc = totalGroup[i];objc.key = i + 1;}totalGroup = data;console.log("totalGroup2", totalGroup);renderDirty = true;//重绘标记requestAnimationFrameID = requestAnimationFrame(loop);//每一帧绘制      }}img.src = avatarUrlList[j];assetsAvatar.push(img);}
}//对象数组,根据对象的key进行排序
function createComprisonFunction(propertyName, isSequence) { //true为顺序,false为逆序return function (object1, object2) {var value1 = object1[propertyName];var value2 = object2[propertyName];if (isSequence == true) { //顺序排序if (value1 < value2) {return -1;} else if (value1 > value2) {return 1;} else {return 0;}} else {if (value1 < value2) {return 1;} else if (value1 > value2) {return -1;} else {return 0;}}}
}

微信好友排行榜绘制

游戏结束主域创建离屏画布,并添加显示;官方示例该画布占满整个舞台,但其实可以是自定义一个group,添加到group中;但这group的必须是舞台的宽高的等比例缩放,不然在共响域绘制就没法计算出正确的位置;

可以看出在exml文件中,虽然我只需要在白色背景处绘制排行榜,但是由于会变形,真正要添加离屏画布的group比较长;
在响应的ts文件中创建和添加离屏画布
```
this.gameOverBitmap = platform.openDataContext.createDisplayObject(null, this.gameOverGroup.width, this.gameOverGroup.height);
this.gameOverGroup.addChild(this.gameOverBitmap);
```

主域名发送消息,共享域接受消息

游戏结束主域发送分数等信息给共享域;共享域监听接受到消息后进行一系列的数据处理,排行榜绘制工作;

游戏结束够主域创建添加离屏画布,发送分数给子域;

//游戏结束绘制分数等信息private gameOverGroup: eui.Group;// private gameOVerMask: egret.Shape;private gameOverBitmap: egret.Bitmap;//上传分数到微信private upLoadMyScore() {egret.log("gameOverGroup",this.gameOverGroup);egret.log("gameOverGroup.width",this.gameOverGroup.width);if(this.gameOverGroup){//gameOverBitmap 宽高比必须是stage的宽高比,否则变形this.gameOverBitmap = platform.openDataContext.createDisplayObject(null, this.gameOverGroup.width, this.gameOverGroup.height);this.gameOverGroup.addChild(this.gameOverBitmap);}//发送消息给子域platform.openDataContext.postMessage({wxgame: {score:this.score,update_time:new Date().getTime(),},nickName: egret.localStorage.getItem("nickName"),width:this.gameOverBitmap.width,height:this.gameOverBitmap.height,command: "updateMyScore"});}

共享域名监听接受消息

/*** 增加来自主域的监听函数*/
function addOpenDataContextListener() {console.log('增加监听函数')wx.onMessage((data) => {console.log(data);if (data.command == 'open') {//打开微信好友排行榜if (!createScene()) return;myShowRank = ShowRanking.ShowAll;if (totalGroup.length > 0) {renderDirty = true;//重绘标记// requestAnimationFrameID = requestAnimationFrame(loop);//每一帧绘制  } else {preloadFriendData();}} else if (data.command == 'goBack' && requestAnimationFrameID) {console.log("goBack");//返回时重新绘制简易排行榜myShowRank = ShowRanking.ShowLite;renderDirty = true;//重绘标记} else if (data.command == 'loadRes' && !hasLoadRes) {/*** 加载资源函数* 只需要加载一次*/// console.log('加载资源')preloadAssets();} else if (data.command == "updateMyScore") {//更新用户信息if (!createScene()) return;console.log("data", data);getUserCloudData(data);} else if (data.command == "loadLastPage") {//加载上一页if (page > 0) {buttonClick(0);}} else if (data.command == "loadNextPage") {//加载下一页//在next按钮的范围内if ((page + 1) * perPageMaxNum < totalGroup.length) {buttonClick(1);}} else if (data.command == "startPlayGame"){console.log("startPlayGame");//开始游戏,停止进行循环绘图cancelAnimationFrame(requestAnimationFrameID);requestAnimationFrameID = null}});
}

效果如下:

其他注意事项

展示排行榜时报错

gameSubContextThirdScriptError Cannot read property 'width' of undefined;at requestAnimationFrame callback function TypeError: Cannot read property 'width' of undefined

时必须在Main.ts加载资源时通知共享域预加载图片资源,及调用platform.openDataContext.postMessage({command:'loadRes'});.

private async loadResource() {try {const loadingView = new LoadingUI();this.stage.addChild(loadingView);await RES.loadConfig("resource/default.res.json", "resource/");await this.loadTheme();await RES.loadGroup("preload", 0, loadingView);//第三个参数只要实现RES.PromiseTaskReporter协议的onProgress方法既可以this.stage.removeChild(loadingView);//添加一行代码：加载排行榜资源,否则在展示排行榜时报错gameSubContextThirdScriptError Cannot read property 'width' of undefined;at requestAnimationFrame callback function TypeError: Cannot read property 'width' of undefinedplatform.openDataContext.postMessage({command:'loadRes'});}catch (e) {console.error(e);}}

canvas画布的大小是舞台大小,但实际上是有所缩放,所以我们需要通过比例系数计算真实的大小以方便绘制;

  //500x888 //画板区域//500x604 //绘制区域//500 x 255 蓝色图片// let scale = 500/640;let topBackGroundHeight = 255/888*sharedCanvas.height;//设置图尺寸乘以下面宽度放大的倍数就是真实尺寸let widthScale = sharedCanvas.width / 640;fontScale = sharedCanvas.height/1136;

loop方法是一个递归调用,开启会一直循环调用,只要renderDirty设置为true就会绘制图像

/*** 循环函数* 每帧判断一下是否需要渲染* 如果被标脏，则重新渲染*/
function loop() {if (renderDirty) {context.setTransform(1, 0, 0, 1, 0, 0);context.clearRect(0, 0, sharedCanvas.width, sharedCanvas.height);if (myShowRank == ShowRanking.ShowLite) {console.log("绘制精简版排行榜");drawLiteRankPanel();} else if (myShowRank == ShowRanking.ShowAll) {console.log("绘制全部排行榜");drawRankPanel();}renderDirty = false;}// console.log("递归死循环调用");requestAnimationFrameID = requestAnimationFrame(loop);
}

所以在退出排行榜重新开始游戏时就停止循环绘制调用

//开始游戏,停止进行循环绘图cancelAnimationFrame(requestAnimationFrameID);requestAnimationFrameID = null

开始绘制调用requestAnimationFrame(loop)调用一次即可,renderDirty设置为true就会安装canvas去绘制,所以在涉及到绘制界面刷新改变时就将renderDirty设置为true即可.

不管是本地图片资源还是网络图片资源在显示之前需要预加载,否则无法显示;微信提供了相关方法

//创建图片容器
const img = wx.createImage();
//图片加载完成时回调
img.onload = () => {}
//本地图片资源通过图片传入图片路径,网络图片资源传入图片url
img.src = assetsUrl[asset];

相关源码已经上传
egret游戏源码
转换为微信小游戏源码
其他参考
用Egret开发微信小游戏之二
第一次使用Egret开发微信小游戏经验总结（包括排行榜排序，每周一数据清零，超越好友等处理）
微信好友排行榜 - 白鹭对接
KVData到底应该怎么定义啊？
微信小游戏如何调用关系链Api