让微信小程序页面默认支持分享及返回操作

为啥需要这个?

有时候我们写微信小程序,写好了。在手机上运行感觉效果还不错,正想分享给别人。突然发现没有分享选项,纳尼?原来是忘记写onShareAppMessage()了。有得加上,再编译。不得不说,麻烦的一匹。

应运而生

然后我就想,要是可以让默认支持分享就好了。

wepy实现方法

大致思路

import wepy from 'wepy';
export default class Page extends wepy.page {
}

分析代码,发现所有的page都继承于wepy.page, 而wepy.page又继承于wepy.component. 这感情好。也就意味着我只需要构建一个超类继承wepy.page就可以了

实践

新建page.js文件,内容如下

import wepy from 'wepy';
export default class Page extends wepy.page {
    onShareAppMessage() {
        
    }
}

然后再调整一下页面继承

import Page from '../page';
export default class Index extends Page {
}

编译运行,果然如此!

如果要自定义分享内容怎么办?

在子page里面重构onShareAppMessage就可以啦。

tips: 现使用uni-app后发现已经默认支持分享了

后续: uni-app说这是个BUG,已经修复了。。

后备方案——使用mixin全局混入

  1. 在main.js中添加以下内容。
import qs from 'query-string'
Vue.mixin({
	onShareAppMessage() {
		console.log('分享路径', '/pages/index?route=' + this.$mp.page.route + '&' + qs.stringify(this.$mp.query))
		return {
			path: '/pages/index?route=' + this.$mp.page.route + '&' + qs.stringify(this.$mp.query)
		};
	}
})

以上代码实现了所有页面都支持转发,并将转发路径设为主页。
2. 在主页的onLoad函数中加入以下内容

if (options.route) {
				uni.navigateTo({
					url: '/' + options.route + '?' + qs.stringify(options)
				})
			}

这样就实现了,进入后的页面跳转。
3. 为什么要这样做?
因为大家都知道,当我们直接分享小程序页面给别人的时候。别人点击进入非tab页面,是没有返回操作的。增加了上面的功能后,所有页面的分享,都会先进入主页,再跳转至分享的页面。用户就可以无缝对接啦!

更新,现小程序已支持页面返回
版权声明: (https://www.thinkmoon.cn/post/225)
本文首发于指尖魔法屋-让微信小程序页面默认支持分享及返回操作
转载或引用必须申明原指尖魔法屋来源及源地址!