需求：外部网页在微信中被分享时，会出现一个小卡片，包含title，image和url。
这个分享链接的内容不够直观，故需自定义小卡片的内容。
-
准备公众号
在公众号中设置js安全域名（即需要分享链接的网页的域名）
js安全域名
服务端获取签名（客户端不安全，且存在跨域问题）
-
获取
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
白名单设置
- 获取
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返回给前端
前端处理
- 通过config接口注入权限验证配置
// CDN引入
<script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js" charset="utf-8"></script>
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
-
保证可以分享每个页面都能分享出这种小卡片形式的链接
在app.vue中加入监测路由，由于第一次进入不会调用，所以在mounted也执行一次this.shareLinkToWxFriends()，shareLinkToWxFriends函数就是上面第5步和第六步的内容
image.png
-
将代码部署完成后，可在真机上查看结果
分享链接结果
附加 pdf的显示和分享
由于在网页中直接查看pdf的路径是无法在微信中查看（安卓）和分享（ios），因此使用pdf插件进行优化 --- pdf.js。其原理是绘制成canvas，最终在真机上放大时可能出现模糊的问题。
- 现在我需要查看的是阿里云oss上的pdf文件（可以通过阿里云文档获取oss上的文件的url，且在oss的基本设置中可以设置跨域问题）
-
首先引入
pdf.js
github地址
pdf.js
按照文档操作后将build/generic/build目录下的build和web文件放入到我们vue项目中static文件中(不能放入src)，这样我们就引入了pdf.js -
首先在vue中创建一个新的组件preview，内部为iframe
<template>
<div class="preview">
<iframe
width="100%" height="1000"
:src='"(这里是你的网站的包含https://的域名)/static/web/viewer.html?file=" + （这里是你想显示的pdf的url）'></iframe>
</div>
</template>
创建之后控制台会报错出现跨域问题，因为pdf.js不支持跨域访问。此时可以将错误跨域信息在上一步你引入的文件中查找，然后将其判断语句注释掉即可解决这个问题。最后会发现pdf出现在这个容器中（忘截图了），也实现了微信中预览和分享的功能。
pdf容器
网友评论