H5微信分享，就是在微信浏览器页面，点击右上角的三个小点点，底部弹窗选择分享方式。
默认的分享 标题是当前页面的标题，图标是默认图标，描述信息是当前页的链接地址
功能立项
假期结束之后，把功能实现跟产品详细解释了一番..嗯，挺复杂，那就暂时搁置吧，等有时间再弄...
7月份，炎炎三伏天悄悄来临，大家手头上的工作，似乎都有了那么一些轻松，时间多了一丝空空，自定义分享，安排起来。
官方文档，瞄起来，头疼头疼疼
微信JS-SDK是微信公众平台 面向网页开发者提供的基于微信内的网页开发工具包。
通过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信用户提供更优质的网页体验。
使用基本就是下面几个步骤
前期准备
运维操作公众号后台，绑定安全域名
先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
项目背景：创建两个项目，发布3个网站，
A是统一登录入口，单独的项目，单独的站点 xxx.aaa.com。
B和C是通用商城，共用同一个项目，根据不同的商城地址，动态配置商城的api请求地址等。
B是荣荣商城 ，发布单独站点 xxx.bbb.com，C是爱爱商城，发布单独站点 xxx.ccc.com。
A登录 通过后台对账号的匹配，返回相应的网站地址 xxx.bbb.com 或者 xxx.ccc.com，拼接登录返回的token，然后通过window.href链接到新网站地址，在通用商城项目中，区分商城，获取商城匹配，截取token拿到用户信息。
重点0：配置安全域名时 三个网站的域名都需要配置 ： xxx.aaa.com，xxx.bbb.com，xxx.ccc.com
重点1：公众号后台大概需要有两个地方配置域名，运维自己看着办
vue项目编码接入js-sdk，接口联调
引入js-sdk，有三种方式
在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.6.0.js
如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）。
备注：支持使用 AMD/CMD 标准模块加载方法加载
前两个方式引入 在index.html文件中通过script标签引入
方式1：直接通过script 引用官网提供的链接地址
<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链接地址，把内容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'
在每个需要使用JS-SDK的页面通过config注入权限验证配置
注意：是每个页面都要配置config。因为vue单页面SPA应用，当每次url变化的时候，也需要进行调用配置config
具体实现代码
后端定义接口，前端传递当前路径的URL地址，给后端进行加密，后端返回初始化配置需要的相关参数
tips：因为vue-router默认使用的hash模式，所以链接地址中包含#，在传递给后端进行加密的url路径地址，需要对# 进行截取
url: location.href.split('#')[0]
项目入口js文件中，导入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'
//注册到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全局后置钩子函数afterEach，保证每个URL切换时都能执行接口调用 ，配置config 注入配置，在回调函数wx.ready中 配置分享参数
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全局后置钩子函数
if (isWxBrowser()) {//是微信浏览器
userApi.getWechatShare({ //调用后端接口
url: location.href.split('#')[0]
}).then(res => {
if (res.resCode == 0) {
let data = res.resData;
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: data.appId, // 必填，公众号的唯一标识
timestamp: data.timestamp, // 必填，生成签名的时间戳
nonceStr: data.nonceStr, // 必填，生成签名的随机串
signature: data.signature,// 必填，签名
jsApiList: ['checkJsApi','updateAppMessageShareData','updateTimelineShareData'] // 必填，需要使用的JS接口列表，目前只用到分享
});
wx.ready(function () { //需在用户可能点击分享按钮前就先调用
// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
wx.updateAppMessageShareData({
title: data.titile, // 分享标题
desc: data.description, // 分享描述
link: data.shareUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 http://test-logon.51czt.com
imgUrl: data.logoPath, // 分享图标
success: function () {
}
});
wx.updateTimelineShareData({
title: data.titile, // 分享标题
link: data.shareUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: data.logoPath, // 分享图标
success: function () {
}
});
});
wx.error(function(res){
// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
console.log("错误：" + res);
});
}
}).catch(e => {
});
}
})
},
};
export default wxutil;
最终实现效果
可以自定义分享标题，分享描述信息，分享图标。图标的大小有限制，似乎是最大32k
感悟
遇到问题不要怕，先保证安全域名配置正确，然后保证后台签名加密正确
前后端调不通，一般都是参数的问题，尽量从后台找问题，签名 加密等
签名的时效是有限制的，一段时间会过期
