官方提供的自定义分享

使用隐式页面配置函数实现的全局分享——推荐

使用隐式路由实现的全局分享——不推荐,仅供了解隐式路由

结合隐式页面函数、隐式路由实现所有页面分享配置及控制(页面无需再开启或自定义配置)——强烈推荐

前言:

目前微信小程序只开放了页面自定义分享的API,为了能够更灵活的进行分享配置、满足运营的需求,本文总结了微信小程序分享转发的多种用法,其中包括官方提供的页面自定义分享,使用隐式路由和页面配置实现的全局分享和全局+自定义的分享组合方式,希望能对需要实现分享多样化的同学有所帮助。

官方提供的自定义分享:

先看下官网介绍:

如上,只有定义了转发函数,才能分享页面,如此如果只需分享页面,只需要定义分享函数即可:

onShareAppMessage(res) { }

如果需要自定义分享内容,则需要对函数进行配置,如下:

onShareAppMessage: function (res) {
return {
title: '自定义转发标题',
path: '/page/user?id=123'
}
}
})

如上,如果需要自定定义全局分享,则可以将全局分享的内容对象配置在app.js中的全局变量中,然后所有需要分享的页面中配置到分享函数中去就好了,如下:

  //App.js 全局数据
globalData: {
//分享内容
globalShareInfo: {
title: '全局分享标题',
path: '/pages/login/index',
imageUrl: 'https://shopv3.oss-cn-hangzhou.aliyuncs.com/gift/ep/other/share.jpg'
}
}

总体来说,微信小程序要设置全局分享还是比较麻烦的,你需要每个页面都要去开启,相对来说支付宝小程序提供有全局分享就要好多了。

那么微信小程序能不能实现支付宝小程序一样的全局分享呢?经过一番探索研究,从微信小程序底层的一些隐式函数实现了全局分享的功能,如支付宝小程序一样,一处配置,全局有效。

全局自定义分享——使用微信小程序隐式页面配置函数实现:

demo代码片段点击下载

本例使用了隐式函数 Page 以及返回对象 pageConfig 来对当前访问页面进行自定义分享配置,具体代码如下:

 // app.js
/**
* 全局分享配置,页面无需开启分享
* 如页面开启分享开关,则走页面分享配置(即使未配置内容)
*/
! function() {
//获取页面配置并进行页面分享配置
var PageTmp = Page
Page = function(pageConfig) {
let view = Page
//全局开启分享
pageConfig = Object.assign({
onShareAppMessage: function() { }
}, pageConfig);
//3. 配置页面模板
PageTmp(pageConfig);
}
}();

如上,只需要在小程序主入口app.js中写入以上代码对页面分享进行直接配置就好了(App()外边)。

功能表现:

  • 只需要入口js中配置如上代码,即可实现全局自定义分享;
  • 如果页面配置有分享事件的函数,那么全局分享将失效,直接走页面的分享(即使页面分享未配置内容,只要打开就会走页面分享);
  • 经多次验证,上述方法实现的全局分享自动携带当前页面的完整参数,无需另外获取。

如果需要配置全局分享图片或者标题,直接在 onShareAppMessage 函数中配置就好了,如下:

 pageConfig = Object.assign({
onShareAppMessage: function () {
return {
title:"自定义全局分享",
imageUrl: wx.getStorageSync("shareUrl")
}
}
}, pageConfig);

使用隐式路由间接实现全局分享配置:

这种方法就没上边的好用了,但是涉及到隐式路由的使用,有兴趣的可以了解下,需要注意的是这种方法间接实现全局分享只是修改分享配置,前提是页面必须配置分享事件函数,否则无效。

这种全局分享的实现方法不建议用,就当了解下微信小程序的隐式路由的使用就好了。具体代码如下:

 App({
onLaunch: function() {
this.overShare()
},
/**
* 间接实现全局设置分享内容(需要页面配置分享事件函数)
*/
overShare: function() {
let self = this
// 调用隐藏路由回调
wx.onAppRoute(function(res) {
//获取加载的页面
let pages = getCurrentPages(),
//获取当前页面的对象
view = pages[pages.length - 1],
data;
if (view) {
data = view.data;
if (true || !data.isOverShare) {
data.isOverShare = true;
view.onShareAppMessage = function() {
//重写分享配置
return {
title: '分享标题',
imageUrl: wx.getStorageSync("shareUrl")
};
}
}
}
})
},
})

总结:

通过上边的方式,我们已经实现了全局自定义分享。如果需要对大部分页面进行全局分享配置(指定标题、图片、页面路径),那么在app.js中的全局分享代码中进行配置就好了。对于部分需要单独配置的,可以直接在页面进行特定配置就好了。

如此,单个页面分享、全局分享、组合分享也就都可以实现了。


应用扩展——结合隐式页面函数、隐式路由实现所有页面分享配置及控制(页面无需再开启或自定义配置):

结合隐式路由,可实现全局控制所有页面的分享配置,包括全局分享、页面默认分享、页面自定义分享,如下图所示:

示例代码:

 // app.js
/**
* 全局分享配置,页面无需开启分享
* 使用隐式页面函数进行页面分享配置
* 使用隐式路由获取当前页面路由,并根据路由来进行全局分享、自定义分享
*/
! function () {
//获取页面配置并进行页面分享配置
var PageTmp = Page
Page = function (pageConfig) {
//1. 获取当前页面路由
let routerUrl = ""
wx.onAppRoute(function (res) {
let pages = getCurrentPages(),
view = pages[pages.length - 1];
routerUrl = view.route
}) //2. 全局开启分享配置
pageConfig = Object.assign({
onShareAppMessage: function () {
//根据不同路由设置不同分享内容(微信小程序分享自带参数,如非特例,不需配置分享路径)
let shareInfo={}
let noGlobalSharePages=["index/index"]
//全局分享配置,如部分页面需要页面默认分享或自定义分享可以单独判断处理
if (!routerUrl.includes(noGlobalSharePages)){
shareInfo = {
title: "自定义全局分享",
imageUrl: wx.getStorageSync("shareUrl")
}
}
return shareInfo
}
}, pageConfig);
// 配置页面模板
PageTmp(pageConfig);
}
}();

如上,无需页面开启和配置,只需要在app.js中编写以上代码,即可对所有页面进行自定义分享配置。

微信小程序分享转发用法大全——自定义分享、全局分享、组合分享的更多相关文章

  1. 微信小程序项目实战 - 菜谱大全

    1. 项目简介 最近研究小程序云开发,上线了一个有关菜品查询的小程序.包括搜索.分享转发.收藏.查看历史记录等功能.菜谱 API 来自聚合数据.云开发为开发者提供完整的云端支持,弱化后端和运维概念,无 ...

  2. (干货)微信小程序之转发好友

    今天简单地说下微信小程序的转发功能,为什么要简单的说下呢,因为主要讲的就是转发给好友或者群组,还有一种是分享到朋友圈,这种就比较复杂一点了,先稍微透漏一点,分享到朋友圈主要是两种方法,一种是后台直接生 ...

  3. 微信小程序实例源码大全

    微信小程序实例源码大全下载 微信小应用示例代码(phodal/weapp-quick)源码链接:https://github.com/phodal/weapp-quick 微信小应用地图定位demo( ...

  4. 微信小程序实例源码大全下载

     小程序QQ交流群:131894955  小程序开发直播腾讯课堂:  https://edu.csdn.net/course/detail/6743 微信小程序实例源码大全下载 微信小应用示例代码(p ...

  5. 微信小程序可以转发给微信好友了

    微信小程序又放大招了:小程序页面可以放置转发按钮,分享更流畅.同时开放了微信运动步数.背景音乐播放等更多基础能力.小程序可以在自己的页面上放置转发按钮,用户点击后,即可将喜欢的内容分享给好友或群聊,体 ...

  6. 微信小程序源码案例大全

    微信小程序demo:足球,赛事分析 小程序简易导航 小程序demo:办公审批 小程序Demo:电魔方 小程序demo:借阅伴侣 微信小程序demo:投票 微信小程序demo:健康生活 小程序demo: ...

  7. 【微信小程序】常用组件及自定义组件

    (一) 常用标签 组件你可以理解为传统页面开发时候的各种标签,例如 div span 等等,我这里只说一些常用的,这样就能能搭建出一个基本的页面了,但是如果想要更加美观以及拥有更好的体验,就需要 XS ...

  8. 微信小程序地图控件篇 ---自定义图标被地图覆盖的问题

    今天在做微信小程序的时候遇到这个这样的问题  需要在地图上加个一个自定义的图标控件 类似这样的 刚开始的时候怎图片一直会被地图组件覆盖  ,要怎么解决这个问题  我去翻了下小程序的文档 有个cover ...

  9. 微信小程序错误码参考大全

    开发过程中,会遇到很多微信返回的状态码,鬼知道代表什么意思,现在好了,整理总结了一份状态码,方便大家. 转载:http://www.yiyongtong.com/archives/view-1856- ...

随机推荐

  1. TCP与三次握手

    TCP是在不可靠的网络层上提供可靠的传输服务.如何理解?假设你拥有一个快递公司,但是快递小哥不是很靠谱, 送货偶尔会出问题,所以你经常收到投诉电话,处理一些复杂的问题.比如有些快递压舱了,有些丢失了, ...

  2. Spring-cloud微服务实战【十】:消息总线Bus

      回忆一下,在上一篇文章中,我们使用了分布式配置中心config来管理所有微服务的配置文件,那这样有没有什么问题?有,那就是无法配置文件无法自动更新,当我的git服务器上的配置文件更新后,不能同步更 ...

  3. IDEA 运行junit单元测试方法

    配置Run,增加Junit 最终配置如下:

  4. 游LeetCode一月之闲谈

    今年的2月比往常更长,不是因为比往年多了一天,而是被病毒隔离在家的日子显得十分漫长.如果再不给自己找点事情做的话,且不论身体方面的健康状况,精神方面可能也会有些隐忧.做为一名工程师,适时地读上几本平日 ...

  5. 基本类型和引用类型的值 [重温JavaScript基础(一)]

    前言: JavaScript 的变量与其他语言的变量有很大区别.JavaScript 变量松散类型的本质,决定了它只是在特定时间用于保存特定值的一个名字而已.由于不存在定义某个变量必须要保存何种数据类 ...

  6. fsLayuiPlugin配置说明

    fsLayuiPlugin 是一个基于layui的快速开发插件,支持数据表格增删改查操作,提供通用的组件,通过配置html实现数据请求,减少前端js重复开发的工作. GitHub下载 码云下载 测试环 ...

  7. tab 切换下划线跟随实现

    HTML 结构如下: <ul> <li class="active">不可思议的CSS</li> <li>导航栏</li> ...

  8. 基于 Redis 实现 CAS 操作

    基于 Redis 实现 CAS 操作 Intro 在 .NET 里并发情况下我们可以使用 Interlocked.CompareExchange 来实现 CAS (Compare And Swap) ...

  9. Block as a Value for SQL over NoSQL

    作者 Yang Cao,Wenfei Fan,Tengfei Yuan University of Edinburgh,Beihang University SICS, Shenzhen Univer ...

  10. Python学习笔记.基础一

    Python 语言:解释型.交互式.面向对象.   Python源代码遵循GPL协议   Python标识符 在python里,标识符有字母.数字.下划线组成. 在python中,所有标识符可以包括英 ...