本站使用了 Pjax 等基于 JavaScript 的开发技术,但您的浏览器已禁用 JavaScript,请开启 JavaScript 以保证网站正常显示!

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

为啥需要这个?

有时候我们写微信小程序,写好了。在手机上运行感觉效果还不错,正想分享给别人。突然发现没有分享选项,纳尼?原来是忘记写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)
        };
    }
})

以上代码实现了所有页面都支持转发,并将转发路径设为主页。

  1. 在主页的onLoad函数中加入以下内容
if (options.route) {
                uni.navigateTo({
                    url: '/' + options.route + '?' + qs.stringify(options)
                })
            }

这样就实现了,进入后的页面跳转。

  1. 为什么要这样做?

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

更新,现小程序已支持页面返回

推广

 继续浏览关于 微信小程序 的文章

 本文最后更新于:2019/11/25 12:53:22,可能因经年累月而与现状有所差异

 引用转载请注明:指尖魔法屋 > 学习笔记 > 让微信小程序页面默认支持分享及返回操作