使用laya2.4的H5游戏引擎开发

  • laya里调用微信api的前缀Laya.Browser.window.
    *比如调用云函数接口的：Laya.Browser.window.wx.cloud.callFunction（）……

游戏中使用到了云开发中的云函数和云数据库

  • 云开发：打开微信开发工具后在左上角有一栏云开发可以开启云开发服务

  • 云函数：由于用户进来后的openId属于玩家的私密信息，前端里面要获取的话只能在微信公开域或者使用云函数查询获取，所以编写了一个云函数来获取

  • 在微信项目根目录下的：project.config.json 中配置：”cloudfunctionRoot”: “functions/“,，指定云函数的目录，然后在目录下编写云函数，测试后上传即可。

  • 云数据库：是一个JSON 数据库，在云数据库后台建立了一个user集合，这样便能在前端中调用相关增删改查的接口写入数据

  • 云数据库权限设置：所有人可读仅创建者可写入（仅针对此游戏），在云开发后台进行设置

  • 初始化在打开游戏的时候进行

    • 云开发初始化：

      1
      2
      3
      wx.cloud.init({
           env: 'lcy-xhwgt'（）
      })

    • 云数据库初始化：

      1
      2
      3
      wx.cloud.database({
                          env: 'lcy-xhwgt'
                      });

    • 云数据库User的定义：

      • _id：固有的，代表数据属于哪一个玩家的

      • _openid:自定义的，用户数据库where语句的查询

      • avatarUrl：存储用户头像

      • nickName：用户昵称

      • score:用户最高分数

  • 云数据库查询:

    1
    2
    3
    4
    5
    6
    7
     db.collection('user').where({
              _openid: gameData.player.id, //查询条件
            })
            .get().then(res => {
              // res.data 包含该记录的数据
              // console.log(res.data.length);
    }

  • 云数据库插入：

    • 新玩家登陆时在数据库创建用户（创建用户前，先查询确保玩家在数据库中没有数据，然后再插入数据）
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      db.collection('user').add({
                        // data 字段表示需新增的 JSON 数据
                        data: {
                          _id:gameData.player.id,
                          avatarUrl:gameData.player.avatarUrl,
                          nickName:gameData.player.nickName,
                        }
                      })
                      .then(res => {
                        // console.log(res)
                      })

  • 云数据库更新：

    • 在玩家打完一局后更新玩家在数据库中记录的最佳分数
      1
      2
      3
      4
      5
      6
      7
      db.collection('user').doc(id).update({
                  // data 字段表示需更新的 JSON 数据
                  data:content,
                  success: function(res) {}.bind(this),

                  fail: function(res) {}.bind(this),
                })

  • 云函数调用：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    wx.cloud.callFunction({
                // 云函数名称
                name: funcName,
                // 传给云函数的参数
                data: {
                  desc:"get UID"
                },
                success: function(res) {}.bind(this),

                fail: function(res) {}.bind(this),
              })

  • 使用的云函数定义:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    // 云函数入口函数
    exports.main = async (event, context) => {
      const wxContext = cloud.getWXContext()
    //return 返回数据，自定义的
      return {
        type:"getUID",
        openid: wxContext.OPENID,
        appid: wxContext.APPID,
        unionid: wxContext.UNIONID,
      }
    }

游戏模式两种：

  • 单机模式，玩家打地鼠，打中正确的加分；打中错误的扣分；
  • 异步挑战模式：玩家从朋友发起的挑战链接进入游戏，挑战朋友在云数据库里存储的最高分数；打中朋友头像加分，打中自己头像减分

进入游戏，先初始化云开发（云开发和云数据库）

然后调用微信小游戏端的接口获取用户信息：（如果能直接获取到用户信息，那么不需要用户再次授权，没获取到用户信息说明需要绘制授权按钮，向玩家请求授权），然后调用云函数获取用户的openid

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
                wx.getUserInfo({
                    success: 
                        function(res) {
                            //获取到用户信息
                        }.bind(this),
                    fail: 
                        function(res) {
                           console.log(res)
                            //绘制授权按钮
                        }.bind(this),
                });

//绘制授权按钮
                    wx.createUserInfoButton({
                        type: 'image',
                        image:"res/btn_souquan.png",
                        style: {
                        left:width,
                        top: height,
                        width: 178,
                        height: 59,
                        }
                    });
//用户授权监听
                    this.wxbutton.onTap((res) => {
                         res.userInfo.avatarUrl //头像
                         res.userInfo.nickName  //昵称
                    })

如果玩家是通过分享链接进来的，那么打开游戏时还需要挂起微信的onshow监听，能够获取到玩家进入时携带的参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
wx.onShow(res => {	
                      // shareTicket可用来获取进入时的群信息
                    let m_shareTicket = res.shareTicket;
                    //query里包含分享链接携带参数
                    let query = res.query;

						//游戏内使用的
//query: `action=challenge&userId=${id}`
                    if(query != null)
                    {
                        if(query.action == "challenge")
                        {
                            console.log(query.userId);
                            this.challengeId = query.userId;           
                        }
                    }
                });

分享接口

1
2
3
4
5
6
7
const shareInfo =  {
                title: str,
                imageUrl: “分享图片的url地址”,
                query: `action=challenge&userId=${gameData.player.id}`
            };

            wx.shareAppMessage(shareInfo);

如果玩家从朋友分享的挑战链接进入，那么将会获取到链接携带的玩家openid，然后根据openid从云数据库查询到对应的玩家分数，昵称，头像数据

如果要在小游戏中显示出玩家头像，需要在小游戏后台设置

+ downloadFile合法域名：https://wx.qlogo.cn