cocos creator 部署微信云开发

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46，售后保障稳定

（这仅为小弟的学习笔记，不作为教程，如有错误请大佬指出）

cocos creator中通过调用微信的接口去获取用户授权的信息，之后云函数把用户数据保存至云数据库，再从数据库回调到cocos端处理。比如把用户头像和名称通过远程加载到cocos小游戏中使用。

一.登录游戏，授权用户信息：

在微信开发者中进入游戏，用户点击任意位置的时候，获取用户的授权信息。

//main.js
 onLoad() { 
   
    this.authorizationBox()
  }
  //微信授权按钮的创建,点击屏幕任意位置弹出授权框
  authorizationBox() { 
   
    if (sys.Platform.WECHAT_GAME) { 
   //如果是微信平台
      window['wx'].login({ 
   //登录游戏
        success: function (res) { 
   
          if (res.code) { 
   
            console.log('登陆成功');
          }
          //创建一个全屏的授权按钮
          let button = window['wx'].createUserInfoButton({ 
   //创建一个获取用户信息的按钮
            type: 'text',
            text: '',
            style: { 
   
              height: window['wx'].getSystemInfoSync().screenHeight,//获取屏幕的宽高
              width: window['wx'].getSystemInfoSync().screenWidth,
              backgroundColor: '#00000000',//最后两位为透明度
              color: '#ffffff',
              textAlign: 'center',
            }
          })
          button.show()    //把按钮显示出来
          button.onTap((res) => { 
             //监听按钮的点击
            if (res.errMsg === 'getUserInfo:ok') { 
   
              console.log('授权成功');
              button.destroy()
            } else { 
   
              console.log('授权失败');
            }
          })
        }
      })
    }
  }

Jetbrains全家桶1年46，售后保障稳定

效果：弹出两次授权框

二.初始化云环境：

把刚刚授权好的用户信息通过微信云函数保存到微信云数据库中。所以这里需要一个数据库和一个云函数。

1.初始化“cloud”云环境

2.创建一个微信云数据库“data”

3.创建“login”云函数

4.编写”login”云函数的index.js

//login云函数的index.js脚本
// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()
const db = cloud.database()//引用云数据库
const userinfo = db.collection("data")//引用data数据表（刚创建的那个数据表名称）

// 云函数入口函数
exports.main = async (event, context) => { 
   
  const wxContext = cloud.getWXContext()

  //查询数据库是否已经注册
  let isHas =await userinfo.where({ 
   
    openid:wxContext.OPENID
  }).get()

  //如果没有注册
  if(isHas.data.length==0){ 
   
    let isAdd = null
    let addData = { 
   
      openid:wxContext.OPENID,
      userinfo:event.userinfo,
      due:new Date()
    }
    //把获取的数据添加到数据库
    isAdd = userinfo.add({ 
   
      data:addData,
    })
    return{ 
   
      code:'save',
      res:isAdd,
      data:addData
    }
  }
else{ 
   
  //已经注册
  return{ 
   
    code:'get',
    res:isHas.data
  }
}
  
}

5.上传部署

上传部署成功

三.处理用户授权信息：

在cocos中创建一个变量存储云函数回调的用户信息，再创建一个全局函数调用云函数。

1.创建全局变量，用于保存从云端回调的用户信息

//GlobaData.js
export { 
    }
window['Globa'] = { 
   
  userInfo: null
}

2.创建全局云函数调用login

//GlobalWechat.js
export { 
    }
//调用云函数处理注册信息
window['onReisterUser'] = function (_userInfo) { 
   
  window['wx'].cloud.callFunction({ 
   
    name: "login",//云函数名字
    data: { 
   
      userinfo: _userInfo,
    },
    success(res) { 
   
      console.log('处理注册信息成功', res);
     window['Globa'].userInfo = res.result.res[0].userinfo
      console.log('获取到回调的用户信息：', window['Globa'].userInfo);
    },
    fail: console.error()
  })

}

3.在main.js授权脚本调用全局函数，对用户授权的注册信息进行处理

4.打包发布，在微信云开发上运行，并设置云环境（每一次构建打包都需要重新设置云环境）

5.上传用户数据成功，这样子在cocos中就可以获取到用户数据了，也能把用户数据存到云数据库中。

四.分享转发

分享有两种，一种是主动分享(wx.shareAppMessage)，l另一种是右上角的被动分享（wx.showShareMenu）。

这里主动分享我用微信云来存储要分享的信息，而被动分享的话把分享信息直接存在本地，存在本地比存在微信云方便，就是想练练手。

被动分享

 //share.js,被动分享（右上角分享按钮）
  passiveShare() { 
   
    if (sys.Platform.WECHAT_GAME) { 
   
      //显示当前页面转发按钮
      window['wx'].showShareMenu({ 
   
        success: (result) => { 
   
          console.log('开启被动转发成功');
        },
        fail: (res) => { 
   
          console.log('开启被动转发失败', res);
        },
      });
      //分享
      window['wx'].onShareAppMessage(() => { 
   
        let title = [//分享时候显示的标题
          '来锻炼一下左右脑协调能力吧！跟着我左脑右脑一个慢动作！',
          '你是左脑快还是右脑快呢，快来试试看把！',
          '冰墩墩邀请你一起玩钢架雪车！',
          '听说你也想拥有一个冰墩墩！',
        ]
        let rand = Math.floor(Math.random() * 4)
        return { 
   
          title: title[rand],
          imageUrl: '', //分享时候显示的图片，如果没有图片就是默认的Canvas，这里我没有添加图片
          query: '成功分享游戏'
        }
      })
    }
  }

主动分享

1.上传分享需要需要用到的图片到云存储中，这里上传两张。

图一：

图二：

2.在数据库创建两个集合保存需要分享的标题和图片

集合一：保存分享标题

集合二：保存分享图片

3.在cocos中创建一个按钮，并且调用onClickButton函数

//share.js
 onClickButton() { 
   
   //主动分享页面,调用getShareInfo云函数
   window['wx'].cloud.callFunction({ 
   
     name: 'getShareInfo',//调用云函数，下面步骤会写这个函数
     success(res) { 
   
       console.log('主动分享成功',res);
       let _title = res.result.title.title //由数据表传过来的数据
       let _pic = res.result.picture.url
       window['wx'].shareAppMessage({ 
   
         title: _title,
         imageUrl: _pic,
       })
     },
     fail: console.error
   })

 }

4.在微信写getShareInfo云函数，然后上传部署。

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()

//链接数据库
let db = cloud.database()
let _pic = db.collection('share_pic')
let _title = db.collection('share_title')

// 云函数入口函数
exports.main = async (event, context) => { 
   
  const wxContext = cloud.getWXContext()

  //获取数据表数据
let promise_pic = await _pic.get()
let promise_title = await _title.get()

  //把数据随机返回给调用者
return({ 
   
  title:promise_title.data[Math.floor(Math.random()*promise_title.data.length)],
  picture:promise_pic.data[Math.floor(Math.random()*promise_pic.data.length)],
  errMsg:promise_title.errMsg,
})
}

5.构建打包，点击分享按钮就可以成功！