cocosCreator微信小游戏 之 分享好友和朋友圈(四)

creator版本: 3.8.0

语言: TypeScript

环境: Mac

简介


微信小游戏的分享分为两种:

  1. 被动分享 通过右上角的**...**打开,需要手动设置显示菜单才能分享好友或朋友圈
  2. 主动分享 调用指定的 wx API接口即可进行分享好友

他们都是通过回调监听进行自定义参数来实现标题,图片的显示等。

被动分享


被动分享需要首先调用wx.showShareMenu用来显示指定的菜单,主要菜单有:

  • shareAppMessage 发送给朋友的按钮显示
  • shareTimeline 分享到朋友圈的按钮显示

通过menus进行设置,默认为shareAppMessage

注意:

  • 有"分享朋友圈"的按钮显示,一定要有"发送给朋友"的按钮显示
  • 只有"发送给朋友",可以没有"分享朋友圈"的显示

使用主要接口:

typescript 复制代码
public passivityShare(callBack?: any) {
	const wx = window['wx'];

	// 授权显示菜单
  wx.showShareMenu({
    withShareTicket: false,
    // 显示菜单
    menus: ['shareAppMessage', 'shareTimeline'],
    success: (res) => {
      console.log("开始被动转发shareMenu成功");
    },
    fail: () => {
      console.log("开始被动转发shareMenu失败");
    }
  });

  // 好友点击回调
  wx.onShareAppMessage(() => {
    return {
      // 转发标题, 没有则默认使用小游戏的昵称
      title: "转发标题",
      // 图片链接,
      //imageUrl: "",
    };
  });  
	// 朋友圈点击回调
	wx.onShareTimeline(() => {
    return {
      title: '转发标题',
    };
  });
}

主动分享


主动分享与被动分享有些类似,区别是:

  • 不需要调用wx.showShareMenu的菜单接口
  • 只能分享给好友,没有朋友圈的说法

使用的主要接口是: wx.shareAppMessage

typescript 复制代码
// 主动分享
// 在cocosCreator中增加一个UI按钮,设置点击事件即可,不再赘述
public initativeShare(callBack?: any) {
	const wx = window['wx'];
  // 主动拉起转发,进入选择通讯录界面
  wx.shareAppMessage({
    // 转发标题, 没有则默认使用小游戏的昵称
    title: "转发标题",
  });
}

设置分享的的图片参数


被动分享主动分享 关于回调参数的设定都是类似的,它们均支持对图片等参数的自定义设置。

图片的设置参数主要是:

  • imageUrl 图片链接,支持本地或网络图片路径
  • imageUrlId 微信后台配置审核通过的图片ID

一般情况下使用imageUrl较多,如果没有设定,则默认当前页面的图片存储。

针对于图片的设置主要有如下几种方式:

  • 使用本地存储图片,通过resources.load进行加载显示
  • 使用远程图片

使用本地存储的图片

在cocosCreator的 resources 目录,新增文件夹texture ,并添加一张任意图片,假设名为logo.png

主要是通过resources.load加载图片数据后,获取图片数据的nativeUrl

typescript 复制代码
// nativeUrl 返回该资源对应的目标平台资源的 URL, 示例:
assets/resources/native/c9/c94dd0cf-5efb-4321-acc9-644460a34fca.png

被动分享的主要逻辑:

typescript 复制代码
resources.load("texture/logo", (err, data) => {
  let url = (data && data.nativeUrl) || "";
  console.log("------ 主动分享url:", url);
  wx.onShareAppMessage(() => {
    return {
      title: "分享本地图片",
      imageUrl: url,
    };
  });
});

// 监听朋友圈点击
resources.load("texture/logo", (err, data) => {
  let url = (data && data.nativeUrl) || "";
  wx.onShareTimeline(() => {
    return {
      title: "分享本地图片",
      imageUrl: url,
    };
  });
});

朋友圈示例:

主动分享的主要逻辑:

typescript 复制代码
resources.load("texture/logo", (err, data) => {
  let url = (data && data.nativeUrl) || "";
  console.log("------ 主动分享url:", url);
  wx.shareAppMessage({
    title: "分享本地图片",
    imageUrl: url,
  });
});

使用远程图片

使用远程图片,图片来源于微信后台提供的素材:

https://res.wx.qq.com/wxdoc/dist/assets/img/demo.ef5c5bef.jpg

以主动分享为例,主要替换imgeUrl即可,推荐此种方式

typescript 复制代码
 wx.shareAppMessage({
   title: "分享远程图片",
   imageUrl: "https://res.wx.qq.com/wxdoc/dist/assets/img/demo.ef5c5bef.jpg",
 });

分享自定义图片


自定义图片分享支持发送给朋友、收藏和保存到相册的能力。

使用的主要接口是: wx.showShareImageMenu

支持:

  • 使用本地图片进行自定义分享
  • 使用远程图片进行分享

在UI界面上增加一个按钮接口,添加事件即可

本地分享示例:

typescript 复制代码
resources.load("texture/logo", (err, data) => {
  let url = (data && data.nativeUrl) || "";
  console.log("---- nativeUrl:", url);
  wx.showShareImageMenu({
    path: url,
    success: () => {
      console.log("showShareImageMenu sucess");
    },
    fail: () => {
      console.log("showShareImageMenu fail"); 
    },
  });
});

远程图片分享示例

typescript 复制代码
// 图片来源于微信平台
wx.downloadFile({
  url: 'https://res.wx.qq.com/wxdoc/dist/assets/img/demo.ef5c5bef.jpg',
  success: (res) => {
    wx.showShareImageMenu({
      path: res.tempFilePath
    })
  }
});

更多说明可参考: 微信文档-转发

后续内容会进行逐渐补充,如果您觉得可以,请为我的文章点赞。

祝您学习生活愉快!

相关推荐
/**书香门第*/4 小时前
Cocos creator 3.8 支持的动画 7
学习·游戏·游戏引擎·游戏程序·cocos2d
/**书香门第*/2 天前
cocos creator 3.8 一些简单的操作技巧,材质的创建 1
深度学习·游戏·cocos2d
尘浮生3 天前
Java项目实战II基于微信小程序的新闻资讯平台(开发文档+数据库+源码)
java·开发语言·数据库·spring boot·微信·微信小程序·小程序
liulanba4 天前
Kotlin的data class
前端·微信·kotlin
尘浮生5 天前
Java项目实战II基于Spring Boot的工作流程管理系统设计与实现(开发文档+数据库+源码)
java·开发语言·数据库·spring boot·微信·微信小程序·小程序
尘浮生5 天前
Java项目实战II基于微信小程序的课堂助手(开发文档+数据库+源码)
java·开发语言·数据库·微信·微信小程序·小程序·maven
CHEtuzki6 天前
不用来回切换,一个界面管理多个微信
微信
尘浮生6 天前
Java项目实战II基于微信阅读网站小程序的设计与实现(开发文档+数据库+源码)
java·开发语言·数据库·spring boot·微信·微信小程序·小程序
2401_8441379510 天前
PHP中小学优校管理系统小程序源码
微信·微信小程序·小程序·微信公众平台·微信开放平台
真鬼12310 天前
植物大战僵尸杂交版v2.6.1最新版本(附下载链接)
微信·游戏程序