H5微信分享瓤檐，就是在微信瀏覽器頁面，點(diǎn)擊右上角的三個(gè)小點(diǎn)點(diǎn)娱节，底部彈窗選擇分享方式挠蛉。
默認(rèn)的分享 標(biāo)題是當(dāng)前頁面的標(biāo)題，圖標(biāo)是默認(rèn)圖標(biāo)肄满，描述信息是當(dāng)前頁的鏈接地址
功能立項(xiàng)
假期結(jié)束之后谴古，把功能實(shí)現(xiàn)跟產(chǎn)品詳細(xì)解釋了一番..嗯质涛，挺復(fù)雜，那就暫時(shí)擱置吧掰担，等有時(shí)間再弄...
7月份汇陆，炎炎三伏天悄悄來臨，大家手頭上的工作带饱，似乎都有了那么一些輕松毡代，時(shí)間多了一絲空空，自定義分享勺疼，安排起來教寂。
官方文檔，瞄起來执庐，頭疼頭疼疼
微信JS-SDK是微信公眾平臺(tái) 面向網(wǎng)頁開發(fā)者提供的基于微信內(nèi)的網(wǎng)頁開發(fā)工具包酪耕。
通過使用微信JS-SDK，網(wǎng)頁開發(fā)者可借助微信高效地使用拍照耕肩、選圖因妇、語音问潭、位置等手機(jī)系統(tǒng)的能力猿诸，同時(shí)可以直接使用微信分享、掃一掃狡忙、卡券梳虽、支付等微信特有的能力，為微信用戶提供更優(yōu)質(zhì)的網(wǎng)頁體驗(yàn)灾茁。
使用基本就是下面幾個(gè)步驟
前期準(zhǔn)備
運(yùn)維操作公眾號(hào)后臺(tái)窜觉，綁定安全域名
先登錄微信公眾平臺(tái)進(jìn)入“公眾號(hào)設(shè)置”的“功能設(shè)置”里填寫“JS接口安全域名”。
項(xiàng)目背景：創(chuàng)建兩個(gè)項(xiàng)目北专，發(fā)布3個(gè)網(wǎng)站禀挫，
A是統(tǒng)一登錄入口，單獨(dú)的項(xiàng)目拓颓，單獨(dú)的站點(diǎn) xxx.aaa.com语婴。
B和C是通用商城，共用同一個(gè)項(xiàng)目驶睦，根據(jù)不同的商城地址砰左，動(dòng)態(tài)配置商城的api請(qǐng)求地址等。
B是榮榮商城 场航，發(fā)布單獨(dú)站點(diǎn) xxx.bbb.com缠导，C是愛愛商城，發(fā)布單獨(dú)站點(diǎn) xxx.ccc.com溉痢。
A登錄 通過后臺(tái)對(duì)賬號(hào)的匹配僻造，返回相應(yīng)的網(wǎng)站地址 xxx.bbb.com 或者 xxx.ccc.com憋他，拼接登錄返回的token，然后通過window.href鏈接到新網(wǎng)站地址髓削，在通用商城項(xiàng)目中举瑰，區(qū)分商城，獲取商城匹配蔬螟，截取token拿到用戶信息此迅。
重點(diǎn)0：配置安全域名時(shí) 三個(gè)網(wǎng)站的域名都需要配置 ： xxx.aaa.com，xxx.bbb.com旧巾，xxx.ccc.com
重點(diǎn)1：公眾號(hào)后臺(tái)大概需要有兩個(gè)地方配置域名耸序，運(yùn)維自己看著辦
vue項(xiàng)目編碼接入js-sdk，接口聯(lián)調(diào)
引入js-sdk鲁猩，有三種方式
在需要調(diào)用JS接口的頁面引入如下JS文件坎怪，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.6.0.js
如需進(jìn)一步提升服務(wù)穩(wěn)定性，當(dāng)上述資源不可訪問時(shí)廓握，可改訪問：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）搅窿。
備注：支持使用 AMD/CMD 標(biāo)準(zhǔn)模塊加載方法加載
前兩個(gè)方式引入 在index.html文件中通過script標(biāo)簽引入
方式1：直接通過script 引用官網(wǎng)提供的鏈接地址
<script
type="text/javascript"
src="http://res2.wx.qq.com/open/js/jweixin-1.6.0.js"
></script>
方式2：把js-sdk下載，保存到本地 static目錄中隙券，然后引用本地js
保存js文件的步驟：打開js-sdk 提供的js鏈接地址男应，把內(nèi)容copy到本地新建的js文件中，weixin-1.6.0.js
<script type="text/javascript" src="./static/js/weixin-1.6.0.js"></script>
方式3：通過npm 安裝js-sdk
npm install weixin-js-sdk
在需要分享的頁面中引入
import wx from 'weixin-js-sdk'
在每個(gè)需要使用JS-SDK的頁面通過config注入權(quán)限驗(yàn)證配置
注意：是每個(gè)頁面都要配置config娱仔。因?yàn)関ue單頁面SPA應(yīng)用沐飘，當(dāng)每次url變化的時(shí)候，也需要進(jìn)行調(diào)用配置config
具體實(shí)現(xiàn)代碼
后端定義接口牲迫，前端傳遞當(dāng)前路徑的URL地址耐朴，給后端進(jìn)行加密，后端返回初始化配置需要的相關(guān)參數(shù)
tips：因?yàn)関ue-router默認(rèn)使用的hash模式盹憎，所以鏈接地址中包含#筛峭，在傳遞給后端進(jìn)行加密的url路徑地址，需要對(duì)# 進(jìn)行截取
url: location.href.split('#')[0]
項(xiàng)目入口js文件中陪每，導(dǎo)入WeiXinUtils影晓，初始化微信js-sdk配置
const Vue = require('vue')
import App from './App'
import store from './store'
import router from './router'
const Vuex = require('vuex')
import VueLazyLoad from 'vue-lazyload'
import wxutil from './utils/WeiXinUtils'
//注冊(cè)到vue原型上
Vue.use(VueLazyLoad)
// 微信分享配置初始化
wxutil.init();
Vue.use(Vuex)
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
WeiXinUtils.js 封裝微信分享，利用router全局后置鉤子函數(shù)afterEach奶稠，保證每個(gè)URL切換時(shí)都能執(zhí)行接口調(diào)用 俯艰，配置config 注入配置，在回調(diào)函數(shù)wx.ready中 配置分享參數(shù)
import userApi from "../js/api/users"
import router from '../router'
//判斷是否是 微信瀏覽器
function isWxBrowser() {
var ua = navigator.userAgent.toLowerCase();
let isWx = ua.match(/MicroMessenger/i) == "micromessenger";
if (!isWx) {
return false;
} else {
let isWxWork = ua.match(/WxWork/i) == "wxwork";
if (isWxWork) {
return false;
} else {
return true;
}
}
}
const wxutil = {
init(){
router.afterEach((to, from) => {//router全局后置鉤子函數(shù)
if (isWxBrowser()) {//是微信瀏覽器
userApi.getWechatShare({ //調(diào)用后端接口
url: location.href.split('#')[0]
}).then(res => {
if (res.resCode == 0) {
let data = res.resData;
wx.config({
debug: false, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶端alert出來锌订，若要查看傳入的參數(shù)竹握，可以在pc端打開，參數(shù)信息會(huì)通過log打出辆飘，僅在pc端時(shí)才會(huì)打印啦辐。
appId: data.appId, // 必填谓传，公眾號(hào)的唯一標(biāo)識(shí)
timestamp: data.timestamp, // 必填，生成簽名的時(shí)間戳
nonceStr: data.nonceStr, // 必填芹关，生成簽名的隨機(jī)串
signature: data.signature,// 必填续挟，簽名
jsApiList: ['checkJsApi','updateAppMessageShareData','updateTimelineShareData'] // 必填，需要使用的JS接口列表侥衬，目前只用到分享
});
wx.ready(function () { //需在用戶可能點(diǎn)擊分享按鈕前就先調(diào)用
// config信息驗(yàn)證后會(huì)執(zhí)行ready方法诗祸，所有接口調(diào)用都必須在config接口獲得結(jié)果之后，config是一個(gè)客戶端的異步操作轴总，所以如果需要在頁面加載時(shí)就調(diào)用相關(guān)接口直颅，則須把相關(guān)接口放在ready函數(shù)中調(diào)用來確保正確執(zhí)行。對(duì)于用戶觸發(fā)時(shí)才調(diào)用的接口怀樟，則可以直接調(diào)用功偿，不需要放在ready函數(shù)中。
wx.updateAppMessageShareData({
title: data.titile, // 分享標(biāo)題
desc: data.description, // 分享描述
link: data.shareUrl, // 分享鏈接往堡，該鏈接域名或路徑必須與當(dāng)前頁面對(duì)應(yīng)的公眾號(hào)JS安全域名一致 http://test-logon.51czt.com
imgUrl: data.logoPath, // 分享圖標(biāo)
success: function () {
}
});
wx.updateTimelineShareData({
title: data.titile, // 分享標(biāo)題
link: data.shareUrl, // 分享鏈接械荷，該鏈接域名或路徑必須與當(dāng)前頁面對(duì)應(yīng)的公眾號(hào)JS安全域名一致
imgUrl: data.logoPath, // 分享圖標(biāo)
success: function () {
}
});
});
wx.error(function(res){
// config信息驗(yàn)證失敗會(huì)執(zhí)行error函數(shù)，如簽名過期導(dǎo)致驗(yàn)證失敗虑灰，具體錯(cuò)誤信息可以打開config的debug模式查看吨瞎，也可以在返回的res參數(shù)中查看，對(duì)于SPA可以在這里更新簽名瘩缆。
console.log("錯(cuò)誤：" + res);
});
}
}).catch(e => {
});
}
})
},
};
export default wxutil;
最終實(shí)現(xiàn)效果
可以自定義分享標(biāo)題关拒，分享描述信息，分享圖標(biāo)庸娱。圖標(biāo)的大小有限制，似乎是最大32k
感悟
遇到問題不要怕谐算，先保證安全域名配置正確熟尉，然后保證后臺(tái)簽名加密正確
前后端調(diào)不通，一般都是參數(shù)的問題洲脂，盡量從后臺(tái)找問題斤儿，簽名 加密等
簽名的時(shí)效是有限制的，一段時(shí)間會(huì)過期
