CocosCreator与微信小游戏

CocosCreator与微信小游戏

基础系统

判断环境的宏定义

1
cc.sys.platform == cc.sys.WECHAT_GAME

获取当前设置,用于获取是否授权等

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/**
* 获取当前的设置
*
* @memberof WxManager
*/
getSetting(cb) {
if (cc.sys.platform != cc.sys.WECHAT_GAME) {
return
}
wx.getSetting({
success(res) {
cb(null, res)
},
fail(res) {
cb('getSetting fail', res)
}

})
}

获取用户授权

  • 传入一个透明按钮对象(设置全屏即可)
  • 用户第一次点击屏幕的时候先走授权,之后会自动调用
  • 如果授权成功就回调成功,需要移除透明按钮
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
/**
* 获取当前用户信息
*
* @memberof WxManager
*/
getUserInfo(btnNode, cb) {
if (cc.sys.platform != cc.sys.WECHAT_GAME) {
return
}
wx.getSetting({
success(res) {
if(!res.authSetting['scope.userInfo']) {

let btnSize = cc.size(btnNode.width+10,btnNode.height+10);
let frameSize = cc.view.getFrameSize();
let winSize = cc.director.getWinSize();
// console.log("winSize: ",winSize);
// console.log("frameSize: ",frameSize);
//适配不同机型来创建微信授权按钮
let left = (winSize.width*0.5+btnNode.x-btnSize.width*0.5)/winSize.width*frameSize.width;
let top = (winSize.height*0.5-btnNode.y-btnSize.height*0.5)/winSize.height*frameSize.height;
let width = btnSize.width/winSize.width*frameSize.width;
let height = btnSize.height/winSize.height*frameSize.height;

const button = 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
}
})
button.onTap((res) => {
// 此处可以获取到用户信息
if (cb) {
if(res.userInfo) {
cb(null, res)
button.hide()
} else {
cb('没有允许获取用户权限')
}
}
})
} else {
wx.getUserInfo({
success(res) {
if (cb) {
cb(null, res)
}
}
})
}
}
})
}
  • 使用方法
1
2
3
4
5
6
xx.getUserInfo(this.userButton,(err, res) => {
if (err) return
GameDataManager.getInstance().wxUserInfo = res.userInfo
this.userButton.active = false
console.log('授权成功')
})

分享

设置被动分享(点击三点图标显示的分享)

  • 分享是否带ticket
  • 被动分享的传参是个函数
1
2
3
4
5
6
7
8
9
10
11
wx.showShareMenu({
withShareTicket: false
})
wx.onShareAppMessage(function () {
// 用户点击了“转发”按钮
return {
title: '分享的title',
imageUrlId: 'imageUrlId',
imageUrl: 'imageUrl',
}
})

设置主动分享

  • 主动分享的传参是个对象
1
2
3
4
5
6
7
wx.shareAppMessage(
{
title: 'title',
imageUrlId: 'imageUrlId',
imageUrl: 'imageUrl'
}
)

使用截图分享

  • getSystemInfoSync用来获取当前真是的像素数据
  • 当前是预定义开始的截取高度,安装宽比高 5:4的比例截取
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const info = wx.getSystemInfoSync()
let screenWidth = info.pixelRatio * info.windowWidth
let screenHeight = info.pixelRatio * info.windowHeight
wx.shareAppMessage(
{
title: 'title',
imageUrl: window['canvas'].toTempFilePathSync({
x: 0,
y: screenHeight * .6,
width: screenWidth,
height: screenWidth * .8,
destWidth: 500,
destHeight: 400
})
}
)

使用固定图片加Canvas画图的分享

  • 使用图片的规格为 375 X 300
  • 放置在ccc的模板目录内
  • 画图使用的值为rpx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
let canvas1 = wx.createCanvas()
let ctx = canvas1.getContext('2d') // 创建一个 2d context
let image = wx.createImage()
image.onload = () => {
ctx.drawImage(image, 0, 0)
ctx.fillStyle = '#333333'
ctx.font = "18px bold 微软雅黑";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText('哈哈', 190, 37)
wx.shareAppMessage(
{
title: str,
imageUrl: canvas1.toTempFilePathSync({
x: 0,
y: 0,
width: 375,
height: 300,
destWidth: 500,
destHeight: 400
})
}
)
}
image.src = 'img/share1.png'

排行榜

发送数据到子域(主域)

  • 发送对象到子域
  • 用于传递相关数据
1
2
let openDataContext = wx.getOpenDataContext()
openDataContext.postMessage({hello: 'hello'})

子域接收主域发送数据

  • obj是获取的对象
  • 可以定义固定的格式内容,用于判断传递的数据类型和内容
1
2
3
window["wx"].onMessage((obj: any) => {

})

子域中获取用户信息(子域)

  • 子域中获取信息,传入openId
  • 传入selfOpenId为获取自己的信息
  • data数组对应openIdList
1
2
3
4
5
6
7
8
window["wx"].getUserInfo({
openIdList: ['selfOpenId'],
success: (res) => {
// console.log('res<<<<<<==>>>>>>>', res)
this.selfNickName = res.data[0].nickName
this.selfAvatarUrl = res.data[0].avatarUrl
}
})

获取当前用户的数据

  • 保存的数据都为字符串模式, 使用数据的时候需要转换
  • 第一次获取数据的时候可能为空
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 获取当前用户的数据
window["wx"].getUserCloudStorage({
keyList: ["score", "timestamp"],
success: res => {
// console.log('res=--==--=>', res)
let arr: Array<{ key: string,value: string }> = res.KVDataList
if (typeof(arr[0]) !== 'undefined') {

}
if (typeof(arr[1]) !== 'undefined') {

}
}
})

请求所有好友的的数据

  • 获取当前所有好友的信息
  • UserGameData为获取的数据结构
  • 获取数据有可能为空(没有好友玩,包括自己都没上传成绩)
  • 使用函数方法进行数据过滤和排序
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
interface UserGameData {
avatarUrl: string
nickname: string
openid: string
KVDataList: Array<{
key: string,
value: string
}>
}

// 请求当前所有的用户数据
window["wx"].getFriendCloudStorage({
keyList: ["score", "timestamp"],
success: res => {
let ranking = 0
let hasSelf: boolean = false
let data: Array<UserGameData> = res.data
data.map(Function).sort(Function).forEach(Function)
}
})

用户登录

代理

  • 将小程序的appid和key存储在服务器
  • 安装superagent用于代理访问

api.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import superagent from 'superagent'

export class Api {
/**
* 通过登录的code 获取用户的session
*
* @export
* @param {string} appid
* @param {string} secret
* @param {string} js_code
* @param {string} [grant_type='authorization_code']
* @returns
*/
static code2Session(appid: string, secret: string, js_code: string, grant_type = 'authorization_code') {
return new Promise<string>((resolve, reject) => {
let url = `https://api.weixin.qq.com/sns/jscode2session?appid=${appid}&secret=${secret}&js_code=${js_code}&grant_type=${grant_type}`
superagent.get(url).end((err, res) => {
// console.log(err)
// console.log(res)
if (err) {
resolve('{}')
} else {
// console.log('res: ', res)
// console.log('res.text: ', res.text)
resolve(res.text)
}
})
})
}
}

获取code

1
2
3
4
5
6
7
8
9
wx.login({
success (res) {
if (res.code) {
// 此处将获得的code发送给自己的服务器获取openId,实现登录
} else {
console.log('登录失败!' + res.errMsg)
}
}
})