用Egret开发微信小游戏之二
本篇预览
上一篇主要讲了用Egret创建小游戏项目的一些问题，以及开发流程或者是开发过程中可能会出现的，但是Egret文档中没有写清楚的地方。详见 这里
本篇主要讲Egret的类、微信登录、获取用户数据（通过按钮的方式）、纹理集、九宫格等这些内容。
声明周期方法
我们打开Egret项目，打开src目录下的Main.ts文件，从上往下看，有个constructor方法，在这个方法中调用了父类的初始化方法，并添加了一个监听事件。在被添加到主场景的时候，调用 onAddToStage方法。
在 onAddToStage方法中，有几个声明周期方法，分别是addLifecycleListener、onPause、onResume。（不怎么常用，主要是可以在game.js中有官方API可以监听到。）
然后看到runGame方法，假设我们以 Main.ts为核心类，那么我们的所有代码就要在runGame方法里后边执行就可以了。但是这里已经添加了一些东西了，主要内容如下。
private async runGame() {
await this.loadResource()
this.createGameScene();
const result = await RES.getResAsync("description_json");
this.startAnimation(result);
await platform.login();
const userInfo = await platform.getUserInfo();
console.log(userInfo);
}
我们删掉以下两行，
// 删掉的2行
const result = await RES.getResAsync("description_json");
this.startAnimation(result);
并将登录和获取用户数据的方法移到createGameScene方法后，发现有报错，这主要是使用了await关键字而又不是async方法导致的，我们在方法名前加个async关键字就OK看了。
image.png
/**
* 创建游戏场景
* Create a game scene
*/
private async createGameScene() {
let sky = this.createBitmapByName("bg_jpg");
this.addChild(sky);
let stageW = this.stage.stageWidth;
let stageH = this.stage.stageHeight;
sky.width = stageW;
sky.height = stageH;
...
}
微信登录及获取用户数据
微信登录的方法，在官方生成的项目中已经写好了，主要的就是在获取code之后传到服务器获取Openid。这里主要修改微信小游戏项目中的platform.js中的代码就行了。
获取用户数据
Egret默认编译的是用API方式获取用户数据，但是这种方式后面已经调不起授权窗口了。这里我们主要讲的是用button的方式获取用户数据。修改小程序项目中的platform.js中的getUserInfo方法，如下。这样就可以获取到用户数据了。
你还可以在btn.onTap方法中，将用户数据传输到服务器上保存。具体可以看下一份代码。
getUserInfo() {
return new Promise((resolve,reject)=>{
let width = wx.getSystemInfoSync().windowWidth;
let height = wx.getSystemInfoSync().windowHeight;
let left = Math.floor((width - 200) / 2);
let top = Math.floor(height - 120);
var btn = wx.createUserInfoButton({
type: 'image',
image: './resource/assets/start.png',
style: {
left: left,
top: top,
width: 200,
height: 70
}
})
btn.onTap((res) => {
resolve(res);
})
})
}
获取用户数据并保存到服务器中，如下：
// 首次进入游戏触发，获取用户信息
getUserInfo() {
var stageW = wx.getSystemInfoSync().windowWidth;
var stageH = wx.getSystemInfoSync().windowHeight;
var x = (stageW - 200) / 2;
var y = (stageH - 120);
var width = 200;
var height = 70;
//获取微信界面大小
return new Promise((resolve, reject) => {
var button = wx.createUserInfoButton({
type: 'image',
image:'resource/assets/start.png',
text: '',
style: {
left: x,
top: y,
width: width,
height: height,
backgroundColor: '#ff0000',
color: '#000000',
}
});
button.onTap((res) => {
if (res.userInfo) {
var userInfo = res.userInfo;
var session = this.session; // session为登录时存的全局变量
var encryptedData = res.encryptedData;
var iv = res.iv;
var url = this.wxurl;// 存在全局的url
var params = {
"method": 2002,
"data": {
"session_code": session,
"encryptedData": encryptedData,
"iv": iv
}
}
var result = this.postData(url, params, true);
result.then((resu) => {
if (resu.data.code === 0) {
wx.setStorageSync('isAuth', 1); // 本地缓存是否授权,用以判断是否显示登录页
wx.setStorageSync('userInfo', userInfo);// 本地缓存用户数据
button.destroy();
resolve(userInfo)
} else {
wx.showToast({
title: '出错啦',
icon: 'none'
})
}
}).catch((err) => {
})
} else {
wx.showToast({
title: '请先授权!',
icon: 'none',
duration: 1500
})
wx.setStorageSync('isAuth', 0)
}
});
})
}
// 请求数据方法
postData(url, data, isShowTips = true) {
return new Promise((resolve, reject) => {
if (isShowTips) {
wx.showLoading({
title: '加载中',
})
}
wx.request({
url: url,
data: data,
method: 'POST',
header: {
'content-type': 'application/json'
},
success: function (res) {
resolve(res);
},
fail: function (err) {
reject(err);
},
complete: function () {
if (isShowTips) {
wx.hideLoading();
}
}
})
})
}
Egret的类
Egret中的类主要包含了8个类，分别是：
DisplayObject 显示对象基类，所有显示对象均继承自此类
Bitmap 位图，用来显示图片
Shape 用来显示矢量图，可以使用其中的方法绘制矢量图形
TextField 文本类
BitmapText 位图文本类
DisplayObjectContainer 显示对象容器接口，所有显示对象容器均实现此接口
Sprite 带有矢量绘制功能的显示容器
Stage 舞台类
其中，用得最多的应该是Bitmap，TextField，DisPlayObjectContainer，Sprite这4个。
像Main.ts中底部的createBitmapByName方法就是传入一个名字，然后返回一个Bitmap对象给你。
Bitmap中只能显示本地图片，要想显示网络图片，需要用EUI库中的Image类。
Sprite可以普遍用于容器，它自带的绘制功能，可以用来做遮罩。
纹理集
我们在之前修改过的Main.ts文件中的createGameScene方法，在const userInfo = await platform.getUserInfo();语句后（也就是获取到用户数据后，进行跳转），创建新的背景实例，然后销毁之前的背景图片sky。
const userInfo = await platform.getUserInfo();
console.log(userInfo);
// 下方是新增的语句
let back = this.createBitmapByName('mainbg_jpg');
back.x = 0;
back.y = 0;
back.width = stageW;
back.height = stageH;
this.addChild(back);
this.removeChild(sky);
看下效果图。
image.png
再说说纹理集。
其实很简单，比如一个游戏肯定有很多小图片，像菜单，图鉴，以及一些其他的小图标等等。这些东西平时看起来不多，但是整个开发后整理起来，就会发现数量极多。有时候为了方便，或者是为了尽量压缩大小等一些原因，就会把他们都整理到一个大的图片中，然后按照相对于该图片左上角位置的坐标进行定位。
先来看一张普通的纹理集图片。
image.png
将纹理集图片加入资源assets中的时候，还需要加入一个同名的json件，用于标注各个小图标的位置信息，用于保证执行Res.getRes()；读取的时候不会出错，如下：
image.png
使用纹理集
和平时差不多，不过就是名字不一样，原先的，比如说 mainbg.jpg，用Res获取时名字得写成， mainbg_jpg，也就是把 ‘.’ 换成了 ‘_’。
在纹理集中，得这么用。注意名字的变化！
let back = this.createBitmapByName('mainbg_jpg');
back.x = 0;
back.y = 0;
back.width = stageW;
back.height = stageH;
this.addChild(back);
this.removeChild(sky);
// 下方是新增语句
let invite = this.createBitmapByName('menu_json#invite');
invite.x = 20;
invite.y = 20;
invite.width = 50;
invite.height = 50;
this.addChild(invite);
let sign = this.createBitmapByName('menu_json#sign');
sign.x = 90;
sign.y = 20;
sign.width = 50;
sign.height = 50;
this.addChild(sign);
看看实际效果：
image.png
九宫格
Egret设置的9宫格在小程序中无效，此处不多说。
