实现微信内置欣赏器分享功能（前期预备+VUE前端部分代码+调试+坑记录） ...

一、基础预备

1、登录微信公众号(需已认证)，找到[【设置与开发】>[【公众号设置】>【功能设置】>【js接口安全域名]，在下面填写你的域名。

2、在【设置与开发】>【基本配置】中拿到 appid&开发者暗码 appSecret ，给后端用天生签名时用到。
二、前端代码部分

1、下载微信sdk

1. npm i weixin-js-sdk

复制代码

2、在必要用的地方引入sdk

1. import wx from 'weixin-js-sdk'

复制代码

3、获取微信公众号配置，提供appid和密钥给后端开发
4、获取当前页面的地点传给后端天生配置信息

1.   let shareUrl = sessionStorage.getItem('firstHref') ? sessionStorage.getItem('firstHref')
2.     : location.href.split('#')[0]

复制代码

• 地点必须是当前页面的完备地点，如果用的是hash模式必要去除‘#’部分之后的信息，只保存前面的部分。
  

这里划重点：针对ios必要存储首次进入页面的时的地点作为参数传给后端（否则后续IOS端分享将会失效），安卓则不必要特殊处置惩罚，可以在每个页面都调用一下location.href.split(‘#’)[0]。重要缘故原由如下：
   IOS：每次切换路由，SPA的url是不会改变，发起签名哀求的url参数必须是当前页面的url(就是第一次进入页面时的url)
  Android：每次切换路由，SPA的url是会变，发起签名哀求的url参数必须是当前页面的url(所以安卓端无需处置惩罚)
  5、调用后端接口后将配置信息传给微信，wx的api必要写在wx.ready内里

1. getWxConfig({ shareUrl }).then((res) => {
2.     wx.config({
3.       debug: true, // 开启调试模式
4.       appId: res.appId, // 必填，公众号的唯一标识
5.       timestamp: res.timestamp, // 必填，生成签名的时间戳，由开发者生成的当前时间戳
6.       nonceStr: res.nonceStr, // 必填，生成签名的随机串，由开发者随机生成
7.       signature: res.signature, // 必填，签名
8.       // 必填，需要使用的JS接口列表
9.       jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'],
10.     })
11.     wx.ready(function () {
12.        // 微信分享的数据
13.         var shareData = {
14.           imgUrl: 分享图片,
15.           link: 分享url,
16.           desc: 分享副标题,
17.           title:分享标题,
18.           success: function () {},
19.         }
20.       // 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容
21.       wx.updateTimelineShareData(shareData)
22.       // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容
23.       wx.updateAppMessageShareData(shareData)
24.     })
25.   })
26. }

复制代码

三、调试

本地调试无法看到结果，必要部署到实际环境中，可以用微信开发者工具中的公众号网页项目看到分享的数据是否乐成。

四、标题

1、微信内置欣赏器点击链接分享为什么不是卡片结果而是链接？
重要缘故原由是微信自界说分享不能直接从外部链接进入分享。简朴来说，从卡片进入链接后二次分享可以呈现卡片结果，直接点击链接二次分享还是链接。经过我个人的测试是从链接进入网址后分享出来还是网址，从卡片进入后二次分享则是卡片，如果是外包欣赏器卡片在微信欣赏器二次分享也是卡片结果。
解决方式：

• 将链接添加至公众号的自界说菜单中，从公众号菜单进入分享
  
• 扫描二维码分享
  
• 将链接生存至微信收藏中，从我的收藏进入分享
  
• 其余其他地方进入分享都是链接情势
  

详见微信开放社区的疑难解答：https://developers.weixin.qq.com/community/develop/doc/0002e662950fe06e7c8d8c39f51400
附：官方解释：https://mp.weixin.qq.com/s/7zxqex8DuuWj8cFfDhz2bw
2、IOS端侧分享失效标题？
这个标题上面有解释过，不再赘叙。
3、提示"config:fail,invalid signature"怎么处置惩罚？

• 先按照微信开发者文档自查调取分享接口的url有没有堕落。
  
• 关于需不必要 encodeURIComponent ，我这里是没做这个处置惩罚，因为传输到后端一般有对这个进行处置惩罚操纵，你也可以test是不是必要加这个。（PS：我就是因为加上这个导致报错了）
  
  
  
  

4、提示‘the permission value is offline verifying’是什么缘故原由？

• 按照文档先查抄有没有写错；
  
• 查抄公众号js安全域名中是否包罗被分享的网址域名
  
• 
  
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。