实现微信小游戏好友分享功能
创建节点
编写脚本
构建运行
好友分享/转发功能是游戏传播的一种重要途径,在本节教程中我们就来看下如何在微信小游戏中实现这一功能。
运行效果如下:
Cocos Creator版本:2.2.0
后台回复"好友分享",获取该项目完整文件:
点击该链接前往微信小游戏文档查看与分享相关的API。
创建节点
节点内容非常简单:
1. bg为背景节点,颜色为白色。
2. share是一个按钮节点,我们之后会在上面绑定一个监听函数,在其中调用微信好友分享API。
场景编辑器内容显示如下:
编写脚本
我们在资源管理器中新建一个Share.js脚本,首先编写按钮的activeShare监听函数:
// Share.jsactiveShare() {// 主动分享按钮if (typeof wx === 'undefined') {return;}wx.shareAppMessage({title: '这里写分享卡片的标题', imageUrl: cc.url.raw('img.png'), // 分享图片要放在 wechatgame/res/raw-assers 路径下query: 'shareMsg='+'分享卡片上所带的信息' // query最大长度(length)为2048});},
每当玩家点击该分享按钮时,就相当于发起了一次主动分享(相对的还有被动分享),而我们需要调用wx.shareAppMessage方法来
实现这一主动分享功能。该方法接收一个Object类型参数:
title是分享卡片上的标题。imgeUrl是分享卡片上的图片,比例最佳为5:4。query是分享卡片上附带的参数,需要用键值对的方式发送。当其他玩家从你分享的卡片上点击进入游戏后,程序就可以从query参数中读取相应信息。注意该参数有限定长度,最大为2048。
还有一种是被动分享。所谓的被动分享其实就是用小程序自带的按钮进行分享,请看下图:
代码编写如下:
// Share.jspassiveShare() {// 监听小程序右上角菜单的「转发」按钮if (typeof wx === 'undefined') {return;}// 显示当前页面的转发按钮wx.showShareMenu({success: (res) => {console.log('开启被动转发成功!');},fail: (res) => {console.log(res);console.log('开启被动转发失败!');}});// 获取当前棋局oneChess信息,JSON.stringfy()后传入querywx.onShareAppMessage(() => {return {title: '这里写分享卡片的标题', imageUrl: cc.url.raw('img.png'), // 分享图片要放在 wechatgame/res/raw-assets 路径下query: 'shareMsg='+'分享卡片上所带的信息' // query最大长度(length)为2048}});},
1. 首先我们调用wx.showShareMenu方法来激活当前页面的转发按钮。注意如果要在游戏的其他界面上允许被动转发的话,那就需要在相应游戏界面的脚本中调用wx.showShareMenu()。
2. 接着调用wx.onShareAppMessage方法来编写卡片内容。
3. 在onLoad方法中调用passiveShare();
// Share.jsonLoad () {this.passiveShare();// 监听被动转发},
现在我们再来看下如何从卡片中获取query参数信息:
// Share.jsgetWXQuery() {// 当其他玩家从分享卡片上点击进入时,获取query参数if (typeof wx === 'undefined') {return;}let object = wx.getLaunchOptionsSync();let shareMsg = object.query['shareMsg'];console.log(shareMsg);return shareMsg;},
很简单,就是调用ex.getLaunchOptionsSync(),该方法会在玩家从分享卡片进入游戏时获取query参数。或者我们也可以使用wx.onShow()。
注意:从分享卡片上进入游戏并读取query参数这一操作的前提条件是游戏还未启动,也就是说玩家点击卡片前游戏是处于退出状态,没有在后台运行。
同样我们可以在onLoad方法中调用getWXQuery():
onLoad () {this.passiveShare(); // 监听被动转发this.getWXQuery(); // 获取分享卡片参数},
构建运行
打开构建面板,填写appid,然后点击构建:
接着在build/wechatgame/raw-assets路径中放入分享卡片上要用的图片:
如果要减少包大小,我们也可以使用审核图片,具体请看微信小游戏文档。
如果已将微信开发工具在引擎中配置好,那我们点击运行就行了:
当其他玩家从分享卡片进入时,程序可以获取卡片上附带的参数信息:
好,那么本节教程就到这,希望大家有所收获啦。
如果觉得《《Cocos Creator游戏实战》实现微信小游戏好友分享功能》对你有帮助,请点赞、收藏,并留下你的观点哦!