微信小程序分享转发功能实现与全局设置教程

2024-07-28
来源:网络整理

本文主要用来实现微信小程序的分享转发功能,也就是将一个小程序转发给其他好友或者群聊。目前在微信小程序中如果想设置全局转发,应该怎么做呢?关于这个问题,我会分享一篇文章【浅谈函数复用的几种主要姿势】,下面我会详细介绍。

官方文档:微信小程序·转发

场景一:不带参数直接转发

onShareAppMessage: function() { return { title: '转发标题', path: '/pages/index/index', success: function(res) {} } }

场景二:带参数转发

onShareAppMessage: function() { return { title: '转发标题', path: '/pages/index/index?from_uid=' + users.id, success: function(res) {} } }

上面短短的几行代码,就可以轻松实现小程序的分享转发功能。不过需要注意的是,如果要在每个页面都实现分享转发功能,还需要进行下一步操作,具体操作在《浅谈函数复用的几个主要姿势》一文中使用。

重用函数的几种方法

当遇到多个页面需要相同的数据或功能时该怎么办?本文将总结五种常见的方法。

开发过小程序的朋友应该都遇到过这样的情况,很多页面可能有相同的功能,有没有什么最佳实践,应该如何处理?

针对这个开发技术,我会分析以下几种解决方案:

每个地方都复制粘贴(最坏的做法)抽象成公共函数,每个Page手动引用提取一个,通过Page封装手动注入新的,然后每个页面通过注册劫持Page函数,注入预设的方法,页面依然可以使用Page注册1.复制粘贴法

这是最直观的方法,也是初学者最常用的方法,也是工程师不应该采取的方法,这种方法有一个致命的问题,如果哪天需要修改这个功能,就得把所有的地方都修改一遍,所以这种方法直接被否定了。

2. 抽象公共函数

这种方式解决了复制粘贴的致命问题,不需要做太多改动,只需要改抽象出来的功能即可,但是这种方式不太方便,每次增加新页面,都需要手动引入该功能。

通过方法举例。

假设该方法在app.js中注册:

// app.js global.onShareAppMessage = function() { return { title: '转发标题', path: 'pages/index/index', imageUrl: '' } }

然后每个新的Page都需要像这样引入:

// page.js Page({ ...global.onShareAppMessage, data: {} })

缺点也非常明显:

在创建新页面的时候,很容易忘记,如果有多个相同的功能,则每个功能都需要单独导入,比较不方便。

将多个功能整合到一个对象中,每个页面只需要引入这个对象就可以注入多个相同的功能,这种方式可以解决抽象公共函数提到的缺点2。

大致实现如下:

同样在app.js中,注册一个对象:

// app.js global.commonPage = { onShareAppMessage: function() { return { title: '转发标题', path: 'pages/index/index', imageUrl: '' } }, onHide: function() { // do something } }

注入到新添加的页面中:

// page.js Page({ data: {}, ...global.commonPage, }})

缺点依然是添加新页面时很容易忘记。

4. 封装新页面

封装一个新的Page,然后各个页面都通过这个新的Page进行注册,而不再使用原来的Page。

类似地,在app.js中,将新的Page封装到全局变量中:

// app.js global.newPage = function(obj) { let defaultSet = { onShareAppMessage: function() { return { title: '转发标题', path: 'pages/index/index', imageUrl: '' } }, onShow() { // do something } } return Page({...defaultSet, ...obj}) }

以后在每个页面上使用新的注册:

// page.js global.newPage({ data: {} })

这样的好处就是Page是新封装的,以后只需要关注新的Page是否被使用即可;另外大家也清楚的知道这是一个新的封装,避免了覆盖原有Page的方法。

我认为没有什么明显的缺点。如果一定要挑剔的话,那就是我必须明确调用新功能注册页面。

5. 劫持页面

劫持函数其实是一种非常危险的做法,因为开发人员在定位问题的时候可能会忽略被劫持的区域。

劫持Page,简单来说就是重写Page函数,重新实现Page,但是新的Page还是会调用原来的Page。可能有点让人费解,但是通过代码一目了然:

// app.js let originalPage = Page Page = function(obj) { let defaultSet = { onShareAppMessage: function() { return { title: '转发标题', path: 'pages/index/index', imageUrl: '' } }, onShow() { // do something } } return originalPage({ ...defaultSet, ...obj}) }

这样,页面的注册方法没有改变,但是可能会让不懂底层封装的开发者感到困惑:没有注册的方法,怎么能自动注入呢?

这种方式的缺点上面已经说了,优点也是很明显的,它不改变任何原有的页面注册方式。

其实这是一个非常好的想法,在一些特定的场景下,会起到事半功倍的效果。

对于上面的设计思路,我个人觉得还是很有启发的。在开发过程中,不必局限于眼前的内容,多看看就会发现还有很多其他的思路值得学习和借鉴。我看完这篇文章之后赶紧拿出来分享给大家。

分享