失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > 《Cocos Creator游戏实战》实现微信小游戏好友分享功能

《Cocos Creator游戏实战》实现微信小游戏好友分享功能

时间:2020-11-29 01:27:59

相关推荐

《Cocos Creator游戏实战》实现微信小游戏好友分享功能

实现微信小游戏好友分享功能

创建节点

编写脚本

构建运行

好友分享/转发功能是游戏传播的一种重要途径,在本节教程中我们就来看下如何在微信小游戏中实现这一功能。

运行效果如下:

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游戏实战》实现微信小游戏好友分享功能》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。