UEditor centos vue组件 Python爬虫实战 bash linq soap eloquent nhibernate process io xsd swift2 grunt Momentjs 相亲网站源码 java商城源码 jquery循环遍历 jquery移除子元素 linux自动获取ip base64转16进制 cpm怎么计算 coreldraw入门学习 linux查找文件内容 python线程 python3入门 python3基础教程 python自学 python环境安装教程 python字典添加 python学习网站 python中import用法 java开发环境 java正则匹配 java集成 java安装环境 java正则表达式匹配 java函数调用 liunx命令大全 linux命令行大全
当前位置: 首页 > 学习教程  > 编程语言

微信小程序开发之分享转发功能多种实现方案(论函数复用的几大姿势)

2020/11/4 14:29: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) {}
	}
}

以上简短的几行代码就可以轻松实现小程序的分享转发功能。但是需要注意的是,如果想要在每个页面都能实现分享转发功能的话,就需要进行下一步操作,这里就用到了《论函数复用的几大姿势》这篇文章。

论函数复用的几大姿势

当遇到多个页面需要相同数据或函数时,要如何处理呢,本文将总结归纳五个常见方法。
开发过小程序的朋友们应该都遇到这样的情况,可能很多个页面有相同的函数,例如 onShareAppMessage,有什么最佳实践吗,应该如何处理呢?

本次开发技巧,我从以下几种解决办法剖析:

  1. 将它复制粘贴到每个地方(最烂的做法)
  2. 抽象成一个公共函数,每个Page都手动引用
  3. 提取一个behavior,每个页面手动注入
  4. 通过Page封装一个新的newPage,以后每个页面都通过newPage注册
  5. 劫持Page函数,注入预设方法,页面仍可使用Page注册

一、复制粘贴大法

这是最直观,也是初学者最常用到的办法。也是作为工程师最不应该采取的办法。这有一个致命的问题,如果某一天,需要改动这个函数,岂不是要将所有的地方都翻出来改,所以这个办法直接否决。

二、抽象公共函数

这种方式,解决了复制粘贴大法的致命问题,不需要改动很多地方,只需要改动这个抽象出来的函数即可。但是其实,这个方式不便捷,每次新增页面都需要手动引入这个函数。

通过 onShareAppMessage 方法进行举例。

假设在app.js通过global注册了onShareAppMessage方法:

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

那么此时每次新增的Page都需要这样引入:

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

这样的缺点也是非常明显的:

  1. 创建新页面时,容易遗忘
  2. 如果多个相同的函数,则需要每个独立引入,不方便

三、提取Behavior

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

大致的实现方式如下:
同样在app.js通过global注册一个behavior对象:

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

在新增的页面注入:

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

缺点仍然是,新增页面时容易遗忘。

四、封装新Page

封装新的Page,然后每个页面都通过这个新的Page注册,而不是采用原有的Page

同理,在app.js先封装一个新的Page到全局变量global

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

往后在每个页面都使用新的newPage注册:

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

好处是全新封装了Page,后续只需关注是否使用了新的Page即可;此外大家也很清晰知道这个是采用了新的封装,避免了覆盖原有的Page方法。

我倒是觉得没什么明显缺点,要是非要鸡蛋里挑骨头的话,就是要显式调用新的函数注册页面。

五、劫持Page

劫持函数其实是挺危险的做法,因为开发人员可能会在定位问题时,忽略了这个被劫持的地方

劫持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})
}

通过这种方式,不改变页面的注册方式,但可能会让不了解底层封装的开发者感到困惑:明明没注册的方法,怎么就自动注入了呢?

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

其实这个是一个挺好的思路,在一些特定的场景下,会有事半功倍的效果。


文章转载自:https://developers.weixin.qq.com/community/develop/article/doc/000ceaae4f8df848ca0ac8e6156813,感谢原文作者LeeJim的授权。


本文链接: http://www.dtmao.cc/news_show_350173.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?