Summary of WeChat sharing in history mode of Vue project

Original:  http://justyeh.top/post/39/

2019-07-02

Vue WeChat sharing

Every time we encounter WeChat sharing is a pit. The current mall project is developed using Vue, using the history routing mode, and configuring WeChat sharing has encountered many problems, and finally solved it. Now we will share the solution process.

Technical points

Vue, history mode

Common problems and instructions

False in debug mode

This has nothing to say, it is wx.configcaused by the wrong parameter of the calling method, please confirm the following:

1. Whether the domain name is successfully bound (the domain name verification file should be accessible)
2. Use the latest js-sdk file, because WeChat will change some APIs
3. Are the parameters of the config method passed correctly (mispelled, capitalized ...)
4. The method requires the use of whether written in jsApiListthe
5. Required to get signed URLdecodeURIComponent
6. The encryption method for generating signatures in the background needs to be compared with official documents

debug returns ok, sharing is unsuccessful

1. Make sure the code is spelled correctly
2. The domain name or path of the shared link must be the same as the public account JS security domain name corresponding to the current page
3. Interface calls need to be placed in wx.readymethods

Some points in the single page project (SPA)

All pages that need to use the JS-SDK must first be injected with configuration information, otherwise it will not be able to be called (the same url only needs to be called once, and the SPA web app for changing url can be called every time the url changes, currently the Android WeChat client The new H5 feature of pushState is not supported, so using pushState to implement a web app page will cause the signature to fail, and this issue will be fixed in Android 6.2).

The above paragraph is taken from the official documentation

Things developers need to pay attention to:

1. android and ios need to be handled separately
2. You need to call the wx.configmethod again when the page url changes . Android gets the signed url and passeswindow.location.href
3. When the Vue project switches pages, the url of the browser in IOS will not change. It is still the address of the first time to enter the page.

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: "Home",
	showTabbar: true,
	allowShare: true
	},
	},
	{
	path: "/cart",
	name: "cart",
	meta: {
	title: "Shopping Cart",
	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; // Remove the following parameters
	}
	wechatAuth(authUrl, "ios", allowShare);
	} else {
	// Android
	setTimeout( function () {
	wechatAuth(authUrl, "android", allowShare);
	}, 500);
	}
	});

代码要点：

1. meta中的allowShare用于判断页面是否可分享
2. window.__wxjs_is_wkwebview可用来判断是否是微信IOS浏览器
3. entryUrl是项目第一次进入的页面的地址，将其缓存在window对象上
4. 为什么安卓的时候要增加一个延时器，因为安卓会存在一些情况，就是即便签名成功，但是还是会唤不起功能，这个貌似是一个比较稳妥的解决办法

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，只能跳转到首页），经过“不断”努力的尝试，应该是解决了问题，说一下过程：

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

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

3. 重新读了一遍文档，发现onMenuShareTimeline等方法即将废弃，就把jsApiList改为jsApiList:['updateAppMessageShareData','updateTimelineShareData']，改后就变成了IOS可以成功，android分享失败

4. 百度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