资讯专栏INFORMATION COLUMN

微信二次分享

Betta / 1259人阅读

摘要:接下来通过详细的步骤介绍如何接入微信二次分享操作。不要尝试在中使用异步请求修改本次分享的内容,因为客户端分享操作是一个同步操作,这时候使用的回包会还没有返回用户点击分享到朋友圈已分享已取消此时微信二次分享就已经大功告成了。

微信二次分享 效果演示

如何运行项目

</>复制代码

  1. // 克隆代码到本地
  2. git clone https://github.com/Jameswain/WeiXinSDK.git
  3. // 安装依赖
  4. npm i
  5. // 运行项目
  6. npm run dev

通过charles配置代理,配置如下:

charles配置如下,你可以直接导入到你charles的Map remote,记住把IP地址换成你的IP地址。

</>复制代码

  1. true
  2. http
  3. m.ximalaya.com
  4. 80
  5. /49265909/album/11501536/
  6. http
  7. 192.168.1.103
  8. 8080
  9. /
  10. false
  11. true
  12. http
  13. m.ximalaya.com
  14. 80
  15. /49265909/album/11501536/static/lib/jweixin-1.4.0.js
  16. http
  17. 192.168.1.103
  18. 8080
  19. /static/lib/jweixin-1.4.0.js
  20. false
  21. true
  22. http
  23. m.ximalaya.com
  24. 80
  25. /app.js
  26. http
  27. 192.168.1.103
  28. 8080
  29. /app.js
  30. false
  31. true

配置好代理以后,在微信里打开 m.ximalaya.com/49265909/album/11501536/ 这个网址,看到以下效果,表示代理配置成功,然后你就可以进行二次分享的测试了。

接下来通过详细的步骤介绍如何接入微信二次分享操作。

官方接入文档:https://mp.weixin.qq.com/wiki...

1、配置JS接口安全域名

1、做二次分享首先需要申请一个微信服务号。

2、登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名

注意:这里的JS接口安全域名就是你需要进行二次分享页面的域名。

注意:配置JS接口安全域名时,首先需要MP_verify_576FDJKHHJK29XXTpb.txt 文件放置在域名根目录下;然后才能保存成功,如果配置的域名下没有MP_verify_576FDJKHHJK29XXTpb.txt 文件是无法保存成功的。

2、引入js文件

在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/...

如需进一步提升服务稳定性,当上述资源不可访问时,可改访问:http://res2.wx.qq.com/open/js... (支持https)。

以上是官方的原文提供的js文件地址,我们一般都会把jweixin-1.4.0.js文件下载下来放在我们域名的静态文件中进行引入。

https://h5.jameswain.com/static/lib/jweixin-1.4.0.js // 发布到线上的地址

在index.html页面中加入以下代码:

3、访问服务端接口获取配置信息

​ 这里需要通过服务端提供的获取配置信息接口,获取权限验证的相关配置,例如我获取配置信息的接口是:http://m.ximalaya.com/x-third... 返回结果如下:

</>复制代码

  1. {
  2. "appId": "wx3a4b4454f28a932b",
  3. "timestamp": 1541226502,
  4. "nonceStr": "705a85bb-1e66-4a54-85a8-ebef769faee6",
  5. "signature": "3b4e00872606b69438c168c13fad772327b1d1b3"
  6. }

编写配置微信分享公共代码

</>复制代码

  1. // src/common/wxsdk.js
  2. import axios from "axios"
  3. /**
  4. * 获取微信分享配置接口地址
  5. * 换项目的时候,直接拷贝该文件,修改这个接口地址即可直接使用微信分享
  6. */
  7. const GET_SHARE_CONFIG_URL = "/x-thirdparty-web/weixinJssdk/config?signatureUrl=http%3A%2F%2Fm.ximalaya.com%2F49265909%2Falbum%2F11501536%2F&thirdpartyId=17&_=1541230577945";
  8. let wxconfig = null;
  9. /**
  10. * 初始化微信分享配置
  11. */
  12. async function initWeiXinConfig() {
  13. try {
  14. const { data } = await axios.get(GET_SHARE_CONFIG_URL);
  15. wxconfig = data;
  16. wx.config({
  17. debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
  18. appId: wxconfig.appId, // 必填,公众号的唯一标识
  19. timestamp: wxconfig.timestamp, // 必填,生成签名的时间戳
  20. nonceStr: wxconfig.nonceStr, // 必填,生成签名的随机串
  21. signature: wxconfig.signature, // 必填,签名
  22. jsApiList: [ // 必填,需要使用的JS接口列表
  23. "checkJsApi", // 判断当前客户端是否支持指定JS接口
  24. "onMenuShareTimeline", // 获取“分享到朋友圈”按钮点击状态及自定义分享内容接口
  25. "onMenuShareAppMessage", // 获取“分享给朋友”按钮点击状态及自定义分享内容接口
  26. "onMenuShareQQ", // 获取“分享到QQ”按钮点击状态及自定义分享内容接口
  27. "onMenuShareWeibo", // 获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口
  28. "onMenuShareQZone", // 获取“分享到QZone”按钮点击状态及自定义分享内容接口
  29. "hideMenuItems", // 批量隐藏功能按钮接口
  30. "showMenuItems", // 批量显示功能按钮接口
  31. "hideAllNonBaseMenuItem", // 隐藏所有非基础按钮接口
  32. "showAllNonBaseMenuItem", // 显示所有功能按钮接口
  33. "translateVoice", // 识别音频并返回识别结果接口
  34. "startRecord", // 开始录音接口
  35. "stopRecord", // 停止录音接口
  36. "onVoiceRecordEnd",
  37. "playVoice", // 播放语音接口
  38. "onVoicePlayEnd",
  39. "pauseVoice", // 暂停播放接口
  40. "stopVoice", // 停止播放接口
  41. "uploadVoice", // 上传语音接口
  42. "downloadVoice", // 下载语音接口
  43. "chooseImage", // 拍照或从手机相册中选图接口
  44. "previewImage", // 预览图片接口
  45. "uploadImage", // 上传图片接口
  46. "downloadImage", // 下载图片接口
  47. "getNetworkType", // 获取网络状态接口
  48. "openLocation", // 使用微信内置地图查看位置接口
  49. "getLocation", // 获取地理位置接口
  50. "hideOptionMenu", // 隐藏右上角菜单接口
  51. "showOptionMenu", // 显示右上角菜单接口
  52. "closeWindow", // 关闭当前网页窗口接口
  53. "scanQRCode", // 调起微信扫一扫接口
  54. "chooseWXPay", // 发起一个微信支付请求
  55. "openProductSpecificView", // 跳转微信商品页接口
  56. "addCard", // 批量添加卡券接口
  57. "chooseCard", // 调起适用于门店的卡券列表并获取用户选择列表
  58. "openCard" // 查看微信卡包中的卡券接口
  59. ]
  60. });
  61. } catch (e) {
  62. console.error(e);
  63. }
  64. };
  65. export default {
  66. /**
  67. * 设置微信分享
  68. * @param opts
  69. */
  70. share(opts) {
  71. if (wx) {
  72. if (!wxconfig) {
  73. initWeiXinConfig();
  74. }
  75. // 默认配置
  76. const defaultOpts = {
  77. title: "互联网之子",
  78. desc: "在长大的过程中,我才慢慢发现,我身边的所有事,别人跟我说的所有事,那些所谓本来如此,注定如此的事,它们其实没有非得如此,事情是可以改变的。更重要的是,有些事既然错了,那就该做出改变。",
  79. link: window.location.href,
  80. imgUrl: "http:// demo.open.weixin.qq.com/jssdk/images/p2166127561.jpg",
  81. trigger: function (res) {
  82. // 不要尝试在trigger中使用ajax异步请求修改本次分享的内容,因为客户端分享操作是一个同步操作,这时候使用ajax的回包会还没有返回
  83. console.log("用户点击分享到朋友圈", res);
  84. },
  85. success: function (res) {
  86. console.log("已分享");
  87. },
  88. cancel: function (res) {
  89. console.log("已取消");
  90. },
  91. fail: function (res) {
  92. console.log(JSON.stringify(res));
  93. }
  94. }
  95. wx.ready(function () {
  96. // 分享到朋友圈
  97. wx.onMenuShareTimeline({...defaultOpts, ...opts, ...{title: opts.desc, desc: opts.title}});
  98. // 分享给朋友
  99. wx.onMenuShareAppMessage({...defaultOpts, ...opts});
  100. // 分享到QQ
  101. wx.onMenuShareQQ({...defaultOpts, ...opts});
  102. // 分享到腾讯微博
  103. wx.onMenuShareWeibo({...defaultOpts, ...opts})
  104. // 分享到QZone
  105. wx.onMenuShareQZone({...defaultOpts, ...opts});
  106. });
  107. wx.error(function (res) {
  108. console.log("error=>", res);
  109. });
  110. } else {
  111. console.log("当前不是微信环境");
  112. }
  113. }
  114. }
4、在入口文件中进行分享配置

​  在Vue的入口文件中进行微信二次分享的配置,分享文案可以根据你的业务进行调整。
注意:二次分享必须要把代码部署到你配置的JS接口安全域名下才能看到效果。

</>复制代码

  1. // src/main.js
  2. import wxsdk from "./common/wxsdk"
  3. // 配置微信分享
  4. wxsdk.share({
  5. title: "互联网之子",
  6. desc: "长大的过程中,我才慢慢发现,我身边的所有事,别人跟我说的所有事,那些所谓本来如此,注定如此的事,它们其实没有非得如此,事情是可以改变的。更重要的是,有些事既然错了,那就该做出改变。",
  7. imgUrl: "https://gss0.bdstatic.com/94o3dSag_xI4khGkpoWK1HF6hhy/baike/crop%3D0%2C25%2C550%2C363%3Bc0%3Dbaike80%2C5%2C5%2C80%2C26/sign=afce76f80055b31988b6d8357e99ae14/267f9e2f070828381f3de6edb299a9014c08f112.jpg",
  8. trigger: function (res) {
  9. // 不要尝试在trigger中使用ajax异步请求修改本次分享的内容,因为客户端分享操作是一个同步操作,这时候使用ajax的回包会还没有返回
  10. console.log("用户点击分享到朋友圈", res);
  11. },
  12. success: function (res) {
  13. console.log("已分享");
  14. },
  15. cancel: function (res) {
  16. console.log("已取消");
  17. },
  18. fail: function (res) {
  19. console.log(JSON.stringify(res));
  20. }
  21. });

此时微信二次分享就已经大功告成了。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/53197.html

相关文章

  • 微信二次分享

    摘要:接下来通过详细的步骤介绍如何接入微信二次分享操作。不要尝试在中使用异步请求修改本次分享的内容,因为客户端分享操作是一个同步操作,这时候使用的回包会还没有返回用户点击分享到朋友圈已分享已取消此时微信二次分享就已经大功告成了。 微信二次分享 效果演示 showImg(https://segmentfault.com/img/remote/1460000016895951); 如何运行项目 ...

    NusterCache 评论0 收藏0
  • 微信二次分享

    摘要:接下来通过详细的步骤介绍如何接入微信二次分享操作。不要尝试在中使用异步请求修改本次分享的内容,因为客户端分享操作是一个同步操作,这时候使用的回包会还没有返回用户点击分享到朋友圈已分享已取消此时微信二次分享就已经大功告成了。 微信二次分享 效果演示 showImg(https://segmentfault.com/img/remote/1460000016895951); 如何运行项目 ...

    Kahn 评论0 收藏0
  • 解决微信二次分享bug

    摘要:对于用户触发时才调用的接口,则可以直接调用,不需要放在函数中。 微信分享网页后,再次点击微信分享的内部会自动在网址后拼接&from=来源,导致二次分享的图案文案失效,解决办法: function getQueryString(name) {//根据字段看网址是否拼接&字符串 var reg = new RegExp((^|&) + name + =(...

    adie 评论0 收藏0
  • vue + 微信二次分享/自定义分享

    摘要:但是在本次开发中,我只使用了,,个别微信版本分享出来的还是没有图片和文案,的是没有问题,所以又加上了弃用的,之后,安卓机也可以正常分享。 微信二次分享/自定义分享 从App中使用App分享(一次分享) showImg(https://segmentfault.com/img/bVbp83T?w=593&h=278); 使用微信导航栏的分享(二次分享) --已做处理 showImg(...

    diabloneo 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<