【微信小程序】『001』解决onShareAppMessage分享时带参消失问题

前言

最近在用uni-app写微信小程序《天奇达人》，一款用来推荐微信小程序的小程序。

开发中用到了用户分享小程序的接口。

问题：query没有传入

然后需要知道用户分享了哪一个小程序，需要用到分享时传入的query参数了。

这时候看微信文档，有onShareAppMessage这个接口，但发现里面的query参数在用户接收的时候不见了。
wx.onShareAppMessage(function callback) | 微信开放文档

解决：query没有传入

研究后发现，onShareAppMessage有个隐藏的参数叫path。
通过path参数，传入类似pages/share/share?game=helloWorld这样的参数，就可以带上参数了（还意外发现这个可以直接跳转到某个页面了，不用自己实现了(ง •_•)ง）。具体代码参考下面👇

wxml里写open-type="share"的一个button

<button class="share-btn" :data-name="item.name" open-type="share" @click="shareMinapp">分享</button>

methods里面写触发分享的函数

// export default -> methods
shareMinapp(ev) {
	wx.showShareMenu(); // 触发分享
}

最外层写上监听分享的函数

// export default
onShareAppMessage: (ev) => {
	let { dataset } = ev.target;
	let name = encodeURIComponent(dataset.name);
	let query = `name=${name}`
	let returnDic = {
		title: dataset.name || '买量卖量对接平台',
		imageUrl: 'https://tekii.cn/share2.jpg', // 图片 URL，不填就是当前页面截图
		path: `pages/share/share?${query}`,
	}
}

问题：获取不到query

Object wx.getLaunchOptionsSync() | 微信开放文档
用这个发现小程序如果已经打开了，再点用户分享的是获取不到的。除非删掉小程序，再打开分享的链接，才能获取到query。

解决：获取不到query

wx.onShareAppMessage的文档里有提到，还可以用wx.onShow()获取到query。
那就我们就用官方的另一种方式，onShow(我在uni-app项目里是写在App.vue文件里的，原生小程序代码可以自己研究下，差不大多)。我在最外层存储launchOptions，在需要用的地方，拿出来。

// export default
onShow: function(launchOptions) {
	console.log('App Show', launchOptions);
	uni.setStorageSync('launchOptions', launchOptions); // 这里的uni.就对应微信里的wx.
}

在share.vue，即使用的地方获取本地存储，用完就删

// export default
onShow() {
	let that = this;
	let launchOptions = uni.getStorageSync('launchOptions');
	uni.setStorageSync('launchOptions', null);
	let { query } = launchOptions;
	let name = decodeURIComponent(query.name || '');
	that.$set(that.$data, 'name', name);
}

附言

这是我用uni-app开发微信小程序的分享功能时碰到的问题和解决方案，如果有任何不对的地方欢迎留言指正:p。有不懂的地方你也可以问，如果恰好我会，我会回答你的╰(￣ω￣ｏ)

特别感谢

[1] wx.onShareAppMessage(function callback) | 微信开放文档
[2] Object wx.getLaunchOptionsSync() | 微信开放文档
[3] 查的资料太多，这里就不一一列举了
[4] 写了这篇文章的2020年07月19日12时57分的Maxmon