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

为啥需要这个？

有时候我们写微信小程序，写好了。在手机上运行感觉效果还不错，正想分享给别人。突然发现没有分享选项，纳尼？原来是忘记写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）
本文首发于指尖魔法屋-让微信小程序页面默认支持分享及返回操作
转载或引用必须申明原指尖魔法屋来源及源地址！