刚换个新工作,是做微信小游戏的.已经好长时间没有写一些东西了,今天就在这总结一下我这个月的做的事吧,我也是刚使用 cocos creator 时间不长,以前一直用的是 cocos2dx-lua ,写的不好请多多指教,好了废话不多说.

本片文章主要是对微信小游戏开发和总结.
引擎: cocos creator
发布平台: 微信小游戏(微信sdk ver:2.1.1)

本文大纲

  • 使用 cocos creator 引擎发布到微信上
  • 记录调用微信 API 的记录
  • 微信排行榜实现(开放数据域的使用)
  • 在开发过程中遇到的问题

发布

这里首先要准备的东西是:

  • appid
  • 你的游戏工程
  • 微信开发工具

appid:
是你注册微信小程序公众号时候能够得到的,这个是你发布的时候要用的东西,当然你也可以使用 cocos creator 提供的默认的账号,(使用这个账号的弊端是你项目相关人员没办法测试,只有你的微信账号可以做测试)
微信团队注册和接入微信小游戏的教程
在这里注册你的微信公众号账号 微信公众平台在这里选择小程序进行注册,然后按照流程进行注册,你可以是个体,也可以是以企业身份进行注册,(个人注册在后期发布上线的时候要做的事情比较少,企业注册就需要东西比个人多两样,后面详细介绍.)

一般这些东西注册比较简单,这里就仔细叙述了,如果你是管理员的话,你可微信扫码直接登录,如果不是可以让管理员给你直接加一下权限.

你需要配置的信息如下:

这里要注意的就是我第二张图里面指向的地方, 这些你都填写完毕后就可以拿到 appid 了,有了这个id后你可以给其他的项目相关测试人员在微信后台添加 成员并给他们相应的权限,这样他们也可以进行测试你现在开发的小游戏了.

然后在 cocos creator 引擎中去填写,

我这里指向了几个地方,这里你们要是明白的话就更好,要是不明白,先这样做,我只是不想要这篇文章篇幅过长.

至于下面的 开放数据域, 服务器地址, 现在可以先不配置, 到后面我会去介绍的.

在这里再说一下,在点击运行的时候需要先配置,微信开发工具,
微信开发工具 download

那里面有配置的完整路径.^-^

然后引擎会在构建完成之后,点击运行,微信开发者工具启动后,点击预览会生成一个二维码,然后在微信后台,成员管理里面的成员只要有测试权限的都可以通过这个二维码进行游戏测试.

好了到这里你就发布成功了.

这个是 cocos creator 官方团队提供发布微信小游戏的教程

如果运行出现错误可以到这里看看有没有微信小游戏问题总汇

#微信小游戏API

微信小游戏API
微信小游戏文档

这里只是演示 cocos creator 是怎么调用微信小游戏的 api,复杂的调用我就先不说了.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function test(argument) {
    // CC_WECHATGAME 这个是 creator 全局宏用来判断是否在微信小游戏环境下
    if(CC_WECHATGAME){
        wx.login({
            success: ()=> {
                // 调用成功后回调
                wx.getUserInfo({
                    success: res => {
                        console.log(res)
                    }
                })
            },
            fail: ()=> {
                // 调用失败后回调
            },
            complete: ()=> {
                // 成功失败都会调用
            }
        });
    }
}

#微信开放数据域

微信的开放数据域要求,解释起来比较复杂,我先给你提供微信官方的解释,和creator 团队做出的解释和例子.

微信的解释
creator团队的解释

相信你看完这两个解释,会有一些概念了,这里我就开始直接上代码,这个是最直接.

这个是主域渲染的代码
sharedCanvas 是微信提供的全局变量,在微信环境下有用,当然这个是有开放数据域的工程后才行.

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
cc.Class({
    extends: cc.Component,

    properties: {
        rankView: cc.Sprite,
    },
    onLoad() {
        if (CC_WECHATGAME) {
            this.tex = new cc.Texture2D()
            window.sharedCanvas.width = 720
            window.sharedCanvas.height = 1280
        }
    },
    update() {
        this._updateSubDomainCanvas()
    },
    // 刷新子域的纹理
    _updateSubDomainCanvas() {
        if (CC_WECHATGAME) {
            if (window.sharedCanvas != undefined) {
                this.tex.initWithElement(window.sharedCanvas)
                this.tex.handleLoadedTexture()
                this.rankView.spriteFrame = new cc.SpriteFrame(this.tex)
            }
        }
    },
});

发送发送数据的代码

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
// 这个是上传分数的一段代码
/*
* @param score_ 要上传的分数
*/
uploadScore(score_){
    if(!this.checkIsWeChat()) {return;}
    GameTools.sendMessage({
        type: GameTools.msgType.submitScore,
        scoreData: {
            key: cc.TB.GAME.weChatData.keyList[0],
            score: score_,
        },
    });
}

// 这类型和开放数据域那里的类型保持一致就行了.
msgType: {
    clear: 0,
    updateRank: 1,
    submitScore: 2,
    updateSelfRank: 3,
    groupShare: 4,
},

// 这个是调用微信的API 给开放数据域发送数据的 API
sendMessage(data) {
    if(CC_WECHATGAME) {
        console.log('send sub content data');
        let content = window.wx.getOpenDataContext();
        content.postMessage(data);
    }
},

开放数据域的代码

这里我直接放一个文件的链接,我就不接去部分代码了,你可以直接修改然后自己使用.

开放数据域代码

openContentData.txt

这里在你发布开放数据域的工程的时候

好了开放数据域 介绍结束 ^-^

#问题记录

1.游戏包体超过4M

1.将你的资源放置服务器,在微信开放平台后端配置你的服务器地址,这里注意微信是不支持直接填写ip,而且还必须是https协议.

2.最近微信出现个分包加载机制,也可以突破微信不能超过4M的机制,这个我还没有实际实现过就先不写做法了,

2.微信小游戏分享传参问题

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
wx.shareAppMessage({
    title: '跟我一起玩',
    query: 'invite=1&wc=2',
    imageUrl: address + 'share.jpg',
    success: (res) => {
        console.log('分享 成功 ', res);
        if (res.shareTickets != undefined && res.shareTickets.length > 0) {
            
        }
    }
});
// 这里主要是利用 query 这个字段进行参数传递

// **********************************************
// 启动
let option = wx.getLaunchOptionsSync();
console.log('小游戏启动',option);
if(option.shareTicket != undefined) {
    cc.TB.GAME.weChatData.shareTicket = option.shareTicket;
    this.onGroupShareFunc();
}

// 由后台切换到前台是调用的函数
wx.onShow((res)=>{
    // shareTicket
    console.log('切换到前台',res);
    if(res.shareTicket){
        cc.TB.GAME.weChatData.shareTicket = res.shareTicket;
        // 显示群排行
        this.onGroupShareFunc();
    }
});

// 在这里 这个函数的返回值里 wx.getLaunchOptionsSync();
// 和 这个函数 wx.onShow() 回调里面会有刚才传进来的参数

微信分享主要是利用 query 字段,这个字段类型是 string 只要按照这个格式就可以在在通过分享的链接进入游戏是获取相应参数的值.

好了,今天就先到这里了.

最后更新： 2019年08月14日 11:22

原始链接： https://leng521.top/posts/777fe656/