每回遇到微信分享都是一个坑，目前的商城项目使用vue开发，采用history的路由模式，配置微信分享又遇到了很多问题，最后终于解决了，现将解决的过程分享一下。

原文https://justyeh.top/post/39

技术要点

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: "/",

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

}

});

}

总结

原先计划不能分享的页面就使用hidemenuitems方法隐藏掉相关按钮，在ios下试了一下，有些bug：显示按钮的页面切换的影藏按钮的页面，分享按钮有时依然存在，刷新就没问题，估计又是一个深坑，没精力在折腾了，就改为隐私页面分享到首页，公共页面分享原地址，如果有什么好的解决办法，请联系我！

一开始我有参考sf上的一篇博客https://segmentfault.com/a/1190000014455713，按照上面的代码，android手机都能成功，但是ios有一个奇怪的问题，就是分享间歇性的失效，同一个页面，刚刚调起分享成功，再试一次就失败(没有图标、title，只能跳转到首页)，经过“不断”努力的尝试，应该是解决了问题，说一下过程：

一开始以为是异步唤起没成功的问题，就和android一样给ios调用wechatauth方法也加了个定时器，测了一遍没效果，放弃

起始js-sdk是通过npm安装的，版本上带了个test，有点不放心，改为直接使用script标签引用官方的版本

重新读了一遍文档，发现onmenusharetimeline等方法即将废弃，就把jsapilist改为jsapilist:['updateappmessagesharedata','updatetimelinesharedata']，改后就变成了ios可以成功，android分享失败

百度updateappmessagesharedata安卓失败原因，参考这个链接https://www.jianshu.com/p/1b6e04c2944a，把老的api也加到jsapilist中，仔细、反复试了试两种设备都ok，好像是成功了，说"好像"是因为心里没底啊，各种“魔法”代码！

最后，在这里希望腾讯官方能不能走点心，更新文档及时点，demo能不能提供完整点....

参考链接

https://segmentfault.com/a/1190000014455713

https://www.jianshu.com/p/1b6e04c2944a

https://segmentfault.com/a/1190000012339148

https://github.com/vuejs/vue-router/issues/481

如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！