自定义微信分享链接(使用JS-SDK) + 实现预览pdf

需求：外部网页在微信中被分享时，会出现一个小卡片，包含title，image和url。

这个分享链接的内容不够直观，故需自定义小卡片的内容。

1. 准备公众号
   在公众号中设置js安全域名（即需要分享链接的网页的域名）
   
   js安全域名

服务端获取签名（客户端不安全，且存在跨域问题）

可参考：微信JS-SDK说明文档 >

2. 获取access_token
   首先 从公众号中获取APPID和SECRET
   
   appid和appsecret

请求地址: 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=' + APPID + '&secret=' + SECRET,
请求方法：'get'
返回：access_token

此时可能出现白名单错误（忘截图了），需要在微信公众号中设置错误中的IP

白名单设置

3. 获取ticket

//  ACCESS_TOKEN为上一步中得到的access_token
请求地址：'https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi'
请求方法：'get'
返回：'ticket'

注意：access_token和ticket都需要缓存

4.获取签名signature

const nonceStr = 'string'  // 一个随机的字符串即可
const jsapi_ticket = ticket  // 上一步中的ticket
const timestamp = Date.now() // 当前时间戳
const url = location.href.spilt('#')[0]  // 该网页当前地址不要`#`后面的内容（由后续前端当做参数传递过来）

将以上内容以键值对形式拼接，类似如下

jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW×tamp=1414587457&url=http://mp.weixin.qq.com?params=value

本地引入sha1算法（需网上查找）
将上述拼接的字符串以参数的形式传递到sha1中得到signature
signature = sha1(拼接完的字符串)
验证signature是否正确 >
将appId，nonceStr，timestamp和signature返回给前端

前端处理

5. 通过config接口注入权限验证配置

// CDN引入

wx.config({
    debug: true, // 开启调试模式，可以在电脑端打印消息，也可以在真机上弹出框提示错误消息
    appId: '', // 必填，公众号的唯一标识
    timestamp: , // 必填，生成签名的时间戳
    nonceStr: '', // 必填，生成签名的随机串
    signature: '',// 必填，签名
    jsApiList: ['updateAppMessageShareData'] // 必填，需要使用的JS接口列表 === 根据JS-SDK附录二获取，此处只是加了一个分享给朋友的api
});

后续整理发现了一个很怪的bug。我使用的是安卓，微信版本是6.7.3，调试的时候发现config: ok并且updateAppMessageShareData: ok但是实际上分享的链接并不会起到自定义内容的效果。经过很多尝试后，发现需要更改jsApiList里的内容。如下：

官网上是这样描述的：

即将废弃的分享的api

但是实际上在使用updateAppMessageShareData的时候没有作用，必须在jsApiList中增加相应的废弃的接口才能生效。

jsApiList: ['updateAppMessageShareData', 'onMenuShareAppMessage', 'updateTimelineShareData', 'onMenuShareTimeline']

这时候调用updateAppMessageShareData，updateTimelineShareData的时候就可以生效了，具体原理不清楚。。

分享给朋友

朋友圈分享

6. 成功验证和失败验证

```javascript
// 成功
wx.ready(() => {
       wx.updateAppMessageShareData({
              title: '', // 分享标题
              desc: '', // 分享描述，为主题内容
              link: location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致。当点击小卡片时会跳转到该链接
              imgUrl: '', // 分享图标，尺寸120 x 120，大小不超过10K，不支持GIF格式。必须采用https协议（最好写完整url）,不支持base64
              success() {
                 // 设置成功
              }
      })

// 失败
wx.error((err) => {})

注意：imgUrl配置有严格的要求
尺寸120 x 120，大小不超过10K，不支持GIF格式。必须采用https协议（最好写完整url）,不支持base64。由于我使用的是vue，在webpack打包时图片小于10k的是会自动打包成base64导致无法正常显示图片，因此在webpack.base.config.js中修改默认配置

limit修改为4kb

7. 保证可以分享每个页面都能分享出这种小卡片形式的链接
   在app.vue中加入监测路由，由于第一次进入不会调用，所以在mounted也执行一次this.shareLinkToWxFriends()，shareLinkToWxFriends函数就是上面第5步和第六步的内容
   

   image.png

8. 将代码部署完成后，可在真机上查看结果

   
   
   分享链接结果

附加 pdf的显示和分享

由于在网页中直接查看pdf的路径是无法在微信中查看（安卓）和分享（ios），因此使用pdf插件进行优化 --- pdf.js。其原理是绘制成canvas，最终在真机上放大时可能出现模糊的问题。

9. 现在我需要查看的是阿里云oss上的pdf文件（可以通过阿里云文档获取oss上的文件的url，且在oss的基本设置中可以设置跨域问题）

• 首先引入pdf.js
  github地址
  

  pdf.js
  
  按照文档操作后将build/generic/build目录下的build和web文件放入到我们vue项目中static文件中(不能放入src)，这样我们就引入了pdf.js

• 首先在vue中创建一个新的组件preview，内部为iframe

创建之后控制台会报错出现跨域问题，因为pdf.js不支持跨域访问。此时可以将错误跨域信息在上一步你引入的文件中查找，然后将其判断语句注释掉即可解决这个问题。最后会发现pdf出现在这个容器中（忘截图了），也实现了微信中预览和分享的功能。

pdf容器