用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实战教程 查看内容

小程序开发 - 分享小程序

Rolan 2020-12-3 10:16

对于一个产品来说,分享的重要性不言而喻。

前言

小程序的顶部有一个胶囊按钮,点击第一个按钮便会在屏幕下方弹出菜单列表,其中变包含了分享相关的操作,如下图所示:

当我们创建一个小程序工程之后运行,进行如上操作之后会发现,此时底部菜单中的分享功能是被禁用的。

一、启用分享功能

旁边的扫地大爷微笑道:小朋友,这问题好解决,只要传递给PageObject对象中提供了onShareAppMessage方法,那么运行当前页面便可点击右上角菜单按钮进行分享,并且如果要支持分享到朋友圈的话,只需要提供onShareTimeline方法即可!

Page({
	//定义此方法之后,点击右上角按钮弹出的菜单中"发送给朋友"菜单变为可点击
    onShareAppMessage: function (param) {

  	},
    
    //定义此方法之后,点击右上角按钮弹出的菜单中"分享到朋友圈"按钮变为可点击
    onShareTimeline:function(){

  	}
})
复制代码

这问题确实很简单,连扫地的大爷都会,不过说的对也不全对,但总感觉这大爷深藏不露,得好生招呼。

“哇塞,大爷您真棒,一看您就是深藏功与名,您能多说一点分享功能方面的吗?”

“小伙子,看你人不错,挺好学的,大爷我就多跟你唠嗑几句。”

1、发送给朋友(分享)

只有定义了onShareAppMessage处理函数,右上角菜单才会显示“转发(发送给朋友)”按钮

该函数接收一个Object对象参数,关于参数字段的介绍如下表:

字段名类型说明
fromString转发事件来源。button:页面内转发按钮;menu:右上角转发菜单
targetObject如果 from 值是 button,则 target 是触发这次转发事件的 button,否则为 undefined
webViewUrlString面中包含web-view组件时,返回当前web-view的url

从from和target两个字段中我们可以看到,除了通过右上角胶囊菜单入口处进行分享外,我们还可以通过页面内的button进行分享操作。

可以通过该事件处理函数返回一个对象,用于描述自定义的分享内容,从基础库2.8.1版本开始,分享图片支持云图片;

关于返回的对象介绍如下表

字段名说明默认值
title转发标题当前小程序名称
path转发路径当前页面 path ,必须是以 / 开头的完整路径
imageUrl自定义图片路径,可以是本地文件路径、代码包文件路径或者网络图片路径。支持PNG及JPG。显示图片长宽比是 5:4使用默认截图

以下示例代码自定义了分享内容的标题和点击之后打开的路径:

Page({
  onShareAppMessage: function (res) {
    if (res.from === 'button') {
      // 来自页面内转发按钮
      console.log(res.target)
    }
    return {
      title: '自定义分享标题',
      path: '/page/user?id=123'
    }
  }
})

复制代码

运行截图:

其中红色框为指定的自定义标题,蓝色框封面图由于我们没有指定分享的图片路径,因此会根据当前界面进行截图作为分享内容的封面图。

关于默认截图:不自定义转发图片的情况下,默认会取当前页面,从顶部开始,高度为 80% 屏幕宽度的图像作为转发图片。

2、分享到朋友圈

只有定义了onShareTimeline处理函数,右上角菜单才会显示“分享到朋友圈”按钮

基础库2.11.3开始支持;Beta版本,暂只在Android平台支持;

注意:如果要支持分享到朋友圈,则必须同时提供onShareAppMessage事件处理函数的定义,否则此功能无效。

可以通过该事件处理函数返回一个对象,用于描述自定义的分享内容,不支持自定义页面路径,返回内容如下:

字段名说明默认值
title转发标题当前小程序名称
query自定义页面路径中携带的参数,如 path?a=1&b=2 的 “?” 后面部分当前页面路径携带的参数
imageUrl自定义图片路径,可以是本地文件或者网络图片。支持 PNG 及 JPG,显示图片长宽比是 1:1默认使用小程序 Logo

3、页面内分享

官方介绍

基础库 1.2.0 开始支持,通过给button组件设置属性open-type="share",可以在用户点击按钮后触发Page.onShareAppMessage事件获取自定义分享内容进行转发。

示例代码:

//index.wxml
<button open-type="share">点击进行分享</button>
复制代码

注意:

  • 只能使用button组件,而不能是其他组件。

  • 经测试在Page中未提供onShareAppMessage事件也能执行页面内转发。

  • 只支持分享朋友而不允许分享到朋友圈

装逼知识补充:小游戏是没有页面的概念的,所以分享的时候大多是分享不同的query参数而非路径地址。


二、动态分享

前面使用分享的方式比较固化,也就是要嘛在页面中定义好分享事件处理方法,要嘛通过指定的按钮实现指定的分享行为,无法更灵活的处理一些场景;比如如下场景:

1、 某个界面A用户可以分享给朋友,B用户可以分享给朋友和分享到朋友圈

2、用户需要达到一定条件之后才可启用分享特定内容(比如与用户推广业绩挂勾的分享内容,比如用户达到条件之后,当前界面分享出去的内容就是当前用户绑定的分享海报,通过海报增长的用户会给对应的用户增加业绩,而如果用户没有达到条件时,只是分享出去的是普通内容或者是不能分享)

3、分享动态内容:

当然,以上场景为杜撰,只是想表达分享的灵活性的需求,那么如果真的有上述需求,有没有办法可以实现呢?

答案是有的,只是我没摸透,实际运行结果与我所猜测的结果产生了分歧,并且模拟器上运行的效果与真机预览的效果也产生了差异,因此不敢妄自揣测这部分内容,所以只是做个记录,待后面进一步理解,如果有对这一部分了解的朋友,也希望不吝赐教。


三、分享内容的图片解决方案探究

我们先看一下之前我那个界面的分享内容:

这是一个没有灵魂的分享,封面是整个分享内容的灵魂所在,分享内容在没有设置自定义图片路径时,会采用页面的默认截图作为封面,所以我们页面内容的好看与否,直接影响最终的默认截图效果,但是即便当前的界面设计的再好看,作为分享内容的封面图也不一定恰当。

官方支持将分享图片设置成网路图片地址,那么这一问题在某些层面上来讲也得到了很好的解决,但是是提供固定的云端图片地址,还是提供专门用于分享封面的云端服务,亦或者其他方案,毕竟每一种封面图方案都有其存在价值。

现在看来关于分享的图片来源就两个途径,要嘛小程序内部解决,要嘛通过服务端提供分享的图片来源;

1、本地方案

即不依赖服务器解决分享内容封面图问题;

  • 默认截图方案

即分享时不提供自定义图片地址,默认会取当前页面,从顶部开始,高度为 80% 屏幕宽度的图像作为转发图片。此方案的弊端由于是根据页面内容进行生成,无法进行定制化,比较适合对分享没什么要求或者页面内容比较符合分享的内容场景。

  • 本地图片方案

即使用本地文件路径、代码包文件路径作为分享的图片地址,此方法的弊端在于无法动态更新,只能提供有限的分享图片资源,并且还会增加小程序体积。对于分享场景比较固化的自定义图片场景比较适合。

  • 本地动态生成分享图的方案

即本地生成所需要的分享图片进行分享,也就是使用canvas绘图并生成所需分享的图片,此方案能够解决内容动态展示的问题,缺点就是技术要求高一些,并且也要解决生成的模板多样性问题,不过此方案能够应对绝大部分场景,所以重点在于研究这个方案。

2、云端方案

  • 云端固定图片地址

即服务器提供分享所需图片内容地址,此方案相比于本地图片方案来讲更为灵活,可以更新分享的图片源从而提供分享时更多的样式。但此方案的缺点就是无法对内容进行动态生成,即后端提供的是固定图片地址,此方案比较适合固化分享场景,又略微会进行图片更新的场景,比如中秋节提供的是与中秋节主题相关的图片地址,春节提供的是春节相关的图片地址,而如果是小程序本地图片方案的话,要实现此效果就必须进行升级。

  • 云端动态内容支持

即后端动态生成所需内容返回给前端使用,此方案理论上是可行的,毕竟有条件的公司完全可以创建独立的多媒体库支持,但是对服务端的开发人员和服务器的要求都颇高。

四、动态分享内容生成解决方案

在找这方面的轮子的时候,找到如下一些方案(具体还未进一步研究,整理本文内容已耗费很多时间):

1、wxml-to-canvas

此方按是官方提供的方案

小程序内通过静态模板和样式绘制 canvas ,导出图片,可用于生成分享图等场景。

支持viewtextimage三种标签,通过class匹配style对象中的样式。

虽然有人诟病说此方案支持的标签种类太少,但是其实对于一个分享图来说,组成的元素不外乎就是文本和图片,所以理论上此方案已足够应对大部分场景。至于是否有其他什么坑,还未探,不敢瞎说,后续会专门研究。

2、开源方案Painter

Github

由于挂载在github page上,打开速度会慢一些,请耐心等待或自行解决git网速问题。

如果嫌弃打开太慢,可以先查看下微信小程序社区里面的介绍地址

据说还有基于此方案的可视化海报生成方案;介绍地址,至于好用不好用,我还未体验过。

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏