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

目录

    • 前言
    • 问题:query没有传入
    • 解决:query没有传入
    • 问题:获取不到query
    • 解决:获取不到query
    • 附言
    • 特别感谢

前言

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

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

问题:query没有传入

然后需要知道用户分享了哪一个小程序,需要用到分享时传入的query参数了。
【微信小程序】『001』解决onShareAppMessage分享时带参消失问题_第1张图片

这时候看微信文档,有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

【微信小程序】『001』解决onShareAppMessage分享时带参消失问题_第2张图片

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。有不懂的地方你也可以问,如果恰好我会,我会回答你的╰( ̄ω ̄o)

特别感谢

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

你可能感兴趣的:(微信小程序,js,uni-app,分享,微信小程序)