每回遇到微信分享都是一个坑，目前的商城项目使用Vue开发，采用history的路由模式，配置微信分享又遇到了很多问题，最后终于解决了，现将解决的过程分享一下。
技术要点
Vue，history
常见问题及说明
debug模式下报false
这个没得说，就是调用wx.config方法的参数错误造成的，请确认以下事项：
是否成功绑定了域名（域名校验文件要能被访问到）
使用最新的js-sdk文件，因为微信会改部分api
config方法的参数是否传正确了（拼写错误、大小写...）
需要使用的方法是否写在了jsApiList中
获取签名的url需要decodeURIComponent
后台的生成签名的加密方法需要对照官方文档
debug返回ok，分享不成功
确保代码拼写正确
分享链接域名或路径必须与当前页面对应的公众号JS安全域名一致
接口调用需要放在wx.ready方法中
单页项目（SPA）中的一些要点
所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用（同一个url仅需调用一次，对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性，所以使用pushState来实现web app的页面会导致签名失败，此问题会在Android6.2中修复）。
上面那段话摘自
开发者需要注意的事项：
android和ios需要分开处理
需要在页面url变化的时候重新调用wx.config方法，android获取签名的url就传window.location.href
Vue项目在切换页面时，IOS中浏览器的url并不会改变，依旧是第一次进入页面的地址，所以IOS获取签名的url需要传第一次进入的页面url
Code
router/index.js
...... import { wechatAuth } from "@/common/wechatConfig.js"; ...... const router = new Router({ mode: "history", base: process.env.BASE_URL, routes: [ { path: "https://www.jb51.net/", name: "home", meta: { title: "首页", showTabbar: true, allowShare: true }, }, { path: "/cart", name: "cart", meta: { title: "购物车", showTabbar: true }, component: () => import("./views/cart/index.vue") } ...... ] }); router.afterEach((to, from) => { let authUrl = `${window.location.origin}${to.fullPath}`; let allowShare = !!to.meta.allowShare; if (!!window.__wxjs_is_wkwebview) {// IOS if (window.entryUrl == "" || window.entryUrl == undefined) { window.entryUrl = authUrl; // 将后面的参数去除 } wechatAuth(authUrl, "ios", allowShare); } else { // 安卓 setTimeout(function () { wechatAuth(authUrl, "android", allowShare); }, 500); } });
代码要点：
meta中的allowShare用于判断页面是否可分享
window.__wxjs_is_wkwebview可用来判断是否是微信IOS浏览器
entryUrl是项目第一次进入的页面的地址，将其缓存在window对象上
为什么安卓的时候要增加一个延时器，因为安卓会存在一些情况，就是即便签名成功，但是还是会唤不起功能，这个貌似是一个比较稳妥的解决办法
wechatConfig.js
import http from "../api/http"; import store from "../store/store"; export const wechatAuth = async (authUrl, device, allowShare) => { let shareConfig = { title: "xx一站式服务平台", desc: "xxxx", link: allowShare ? authUrl : window.location.origin, imgUrl: window.location.origin + "/share.png" }; let authRes = await http.get("/pfront/wxauth/jsconfig", { params: { url: decodeURIComponent(device == "ios" ? window.entryUrl : authUrl) } }); if (authRes && authRes.code == 101) { wx.config({ //debug: true, appId: authRes.data.appId, timestamp: authRes.data.timestamp, nonceStr: authRes.data.nonceStr, signature: authRes.data.signature, jsApiList: ["updateAppMessageShareData", "updateTimelineShareData", "onMenuShareAppMessage", "onMenuShareTimeline"] }); wx.ready(() => { wx.updateAppMessageShareData({ title: shareConfig.title, desc: shareConfig.desc, link: shareConfig.link, imgUrl: shareConfig.imgUrl, success: function () {//设置成功 //shareSuccessCallback(); } }); wx.updateTimelineShareData({ title: shareConfig.title, link: shareConfig.link, imgUrl: shareConfig.imgUrl, success: function () {//设置成功 //shareSuccessCallback(); } }); wx.onMenuShareTimeline({ title: shareConfig.title, link: shareConfig.link, imgUrl: shareConfig.imgUrl, success: function () { shareSuccessCallback(); } }); wx.onMenuShareAppMessage({ title: shareConfig.title, desc: shareConfig.desc, link: shareConfig.link, imgUrl: shareConfig.imgUrl, success: function () { shareSuccessCallback(); } }); }); } }; function shareSuccessCallback() { if (!store.state.user.uid) { return false; } store.state.cs.stream({ eid: "share", tpc: "all", data: { uid: store.state.user.uid, truename: store.state.user.truename || "" } }); http.get("/pfront/member/share_score", { params: { uid: store.state.user.uid } }); }
总结