需求：外部網(wǎng)頁在微信中被分享時嘱腥，會出現(xiàn)一個小卡片耕渴，包含title，image和url齿兔。
這個分享鏈接的內(nèi)容不夠直觀橱脸，故需自定義小卡片的內(nèi)容。
-
準備公眾號
在公眾號中設(shè)置js安全域名（即需要分享鏈接的網(wǎng)頁的域名）
js安全域名
服務(wù)端獲取簽名（客戶端不安全分苇，且存在跨域問題）
-
獲取
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
此時可能出現(xiàn)白名單錯誤（忘截圖了）添诉，需要在微信公眾號中設(shè)置錯誤中的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] // 該網(wǎng)頁當前地址不要`#`后面的內(nèi)容（由后續(xù)前端當做參數(shù)傳遞過來）
將以上內(nèi)容以鍵值對形式拼接，類似如下
jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW×tamp=1414587457&url=http://mp.weixin.qq.com?params=value
本地引入sha1算法（需網(wǎng)上查找）
將上述拼接的字符串以參數(shù)的形式傳遞到sha1中得到signature
signature = sha1(拼接完的字符串)
驗證signature是否正確 >
將appId医寿，nonceStr栏赴，timestamp和signature返回給前端
前端處理
- 通過config接口注入權(quán)限驗證配置
// CDN引入
<script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js" charset="utf-8"></script>
wx.config({
debug: true, // 開啟調(diào)試模式，可以在電腦端打印消息靖秩，也可以在真機上彈出框提示錯誤消息
appId: '', // 必填须眷，公眾號的唯一標識
timestamp: , // 必填，生成簽名的時間戳
nonceStr: '', // 必填沟突，生成簽名的隨機串
signature: '',// 必填花颗，簽名
jsApiList: ['updateAppMessageShareData'] // 必填，需要使用的JS接口列表 === 根據(jù)JS-SDK附錄二獲取惠拭，此處只是加了一個分享給朋友的api
});
后續(xù)整理發(fā)現(xiàn)了一個很怪的bug扩劝。我使用的是安卓，微信版本是6.7.3，調(diào)試的時候發(fā)現(xiàn)
config: ok并且updateAppMessageShareData: ok但是實際上分享的鏈接并不會起到自定義內(nèi)容的效果棒呛。經(jīng)過很多嘗試后聂示，發(fā)現(xiàn)需要更改jsApiList里的內(nèi)容。如下：
官網(wǎng)上是這樣描述的：
但是實際上在使用
updateAppMessageShareData的時候沒有作用条霜，必須在jsApiList中增加相應(yīng)的廢棄的接口才能生效催什。
jsApiList: ['updateAppMessageShareData', 'onMenuShareAppMessage', 'updateTimelineShareData', 'onMenuShareTimeline']
這時候調(diào)用updateAppMessageShareData，updateTimelineShareData的時候就可以生效了宰睡，具體原理不清楚蒲凶。。
6. 成功驗證和失敗驗證
```javascript
// 成功
wx.ready(() => {
wx.updateAppMessageShareData({
title: '', // 分享標題
desc: '', // 分享描述拆内，為主題內(nèi)容
link: location.href, // 分享鏈接旋圆，該鏈接域名或路徑必須與當前頁面對應(yīng)的公眾號JS安全域名一致。當點擊小卡片時會跳轉(zhuǎn)到該鏈接
imgUrl: '', // 分享圖標麸恍，尺寸120 x 120灵巧，大小不超過10K，不支持GIF格式抹沪。必須采用https協(xié)議（最好寫完整url）,不支持base64
success() {
// 設(shè)置成功
}
})
// 失敗
wx.error((err) => {})
注意：imgUrl配置有嚴格的要求
尺寸120 x 120刻肄，大小不超過10K，不支持GIF格式融欧。必須采用https協(xié)議（最好寫完整url）,不支持base64敏弃。由于我使用的是vue，在webpack打包時圖片小于10k的是會自動打包成base64導致無法正常顯示圖片噪馏，因此在webpack.base.config.js中修改默認配置
-
保證可以分享每個頁面都能分享出這種小卡片形式的鏈接
在app.vue中加入監(jiān)測路由麦到，由于第一次進入不會調(diào)用，所以在mounted也執(zhí)行一次this.shareLinkToWxFriends()欠肾，shareLinkToWxFriends函數(shù)就是上面第5步和第六步的內(nèi)容
image.png -
將代碼部署完成后瓶颠，可在真機上查看結(jié)果
分享鏈接結(jié)果
附加 pdf的顯示和分享
由于在網(wǎng)頁中直接查看pdf的路徑是無法在微信中查看（安卓）和分享（ios），因此使用pdf插件進行優(yōu)化 --- pdf.js刺桃。其原理是繪制成canvas粹淋，最終在真機上放大時可能出現(xiàn)模糊的問題。
- 現(xiàn)在我需要查看的是阿里云oss上的pdf文件（可以通過阿里云文檔獲取oss上的文件的url虏肾，且在oss的基本設(shè)置中可以設(shè)置跨域問題）
-
首先引入
pdf.js
github地址
pdf.js
按照文檔操作后將build/generic/build目錄下的build和web文件放入到我們vue項目中static文件中(不能放入src)廓啊，這樣我們就引入了pdf.js 首先在vue中創(chuàng)建一個新的組件preview，內(nèi)部為iframe
<template>
<div class="preview">
<iframe
width="100%" height="1000"
:src='"(這里是你的網(wǎng)站的包含https://的域名)/static/web/viewer.html?file=" + （這里是你想顯示的pdf的url）'></iframe>
</div>
</template>
創(chuàng)建之后控制臺會報錯出現(xiàn)跨域問題封豪，因為pdf.js不支持跨域訪問谴轮。此時可以將錯誤跨域信息在上一步你引入的文件中查找，然后將其判斷語句注釋掉即可解決這個問題吹埠。最后會發(fā)現(xiàn)pdf出現(xiàn)在這個容器中（忘截圖了）第步，也實現(xiàn)了微信中預覽和分享的功能疮装。
