每回遇到微信分享都是一个坑，目前的商城项目使用Vue开发，采用history的路由模式，配置微信分享又遇到了很多问题，最后终于解决了，现将解决的过程分享一下。
技术要点
Vue，history
常见问题及说明
debug模式下报false
这个没得说，就是调用wx.config方法的参数错误造成的，请确认以下事项：
debug返回ok，分享不成功
单页项目（SPA）中的一些要点
所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用（同一个url仅需调用一次，对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性，所以使用pushState来实现web app的页面会导致签名失败，此问题会在Android6.2中修复）。
上面那段话摘自官方文档
开发者需要注意的事项：
Code
router/index.js
......
import { wechatAuth } from "@/common/wechatConfig.js";
......
const router = new Router({
mode: "history",
base: process.env.BASE_URL,
routes: [
{
path: "/",
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);
}
});
代码要点：
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
}
});
}
总结
原先计划不能分享的页面就使用hideMenuItems方法隐藏掉相关按钮，在ios下试了一下，有些bug：显示按钮的页面切换的影藏按钮的页面，分享按钮有时依然存在，刷新就没问题，估计又是一个深坑，没精力在折腾了，就改为隐私页面分享到首页，公共页面分享原地址，如果有什么好的解决办法，请联系我！
一开始我有参考sf上的一篇博客https://www.jb51.net/article/158685.htm，按照上面的代码，android手机都能成功，但是IOS有一个奇怪的问题，就是分享间歇性的失效，同一个页面，刚刚调起分享成功，再试一次就失败（没有图标、title，只能跳转到首页），经过“不断”努力的尝试，应该是解决了问题，说一下过程：
最后，在这里希望腾讯官方能不能走点心，更新文档及时点，demo能不能提供完整点....
参考链接
https://www.jb51.net/article/158685.htm
https://www.jb51.net/article/158693.htm
https://www.jb51.net/article/158690.htm
https://github.com/vuejs/vue-router/issues/481
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持亿速云。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
