Freetao's Blog

小程序分享网页方案

TL;DR 可以点击这里体验是否你需要的效果后,再回来看内容。

小程序卡片分享相比链接分享的优势不言而喻:更大的封面图片意味着可承载更多信息,和更强的视觉表现力;更大的面积,也意味着在聊天窗口中更容易被点到(算是额外福利)。但如果单纯为了发挥这一优势专门开发一个资讯小程序,其产出又不足以覆盖投入。

并且,为了方便传播和跨平台访问,H5无疑是最合适的内容载体。于是思路转化为:是否可以像iOS、安卓webview一样,打造一个小程序版的内容容器。小程序web-view组件就可以用来实现:微信生态内,优先通过小程序传播h5页面,同时将改造的开发量和影响降到最低这一需求。

分享发起侧

小程序web-view组件的属性很简单,要完成分享功能,只要在网页中监听用户触发的分享操作事件,然后通过JSSDK的wx.miniProgram.postMessage方法将分享信息(页面URL、文章标题、描述、封面地址)发送给小程序,小程序接收后指引用户“点击右上角菜单”进行分享,当用户执行分享操作触发onShareAppMessage时,使用网页传递来的分享信息即可。

该方案的局限性在于:

  1. web-view会铺满这个屏幕,也就意味着没有引导海报合成操作的交互空间,而小程序分享到朋友圈,目前只能通过图片方式

  2. 分享操作的指引不够直观,“点击右上角菜单“对于不熟悉小程序的用户,很可能就点到菜单按钮右边的“关闭”按钮而一去不复返了,毕竟这个位置才真正意义上的”右上角“

为了解决上述问题,考虑单独打开一个小程序页面,专门用来做分享操作指引。这个页面上有足够的空间放一个足够醒目的”分享“按钮,再摆一个”保存海报并分享到朋友圈“按钮,以及用封面图片和文章标题、简介合成的海报预览,如有需要,甚至可以增加用户输入信息,或者登录按钮为链接添加分享者信息。该方案看似增加了一步跳转,但这个指引更加直观。也大大扩展了分享的能力。

需要注意的是,合成海报用到到URL需要进行短地址处理,因为小程序码参数长度有限,如不使用短地址,很容易造成小程序码生成失败。不过为了便于更广泛地传播,这里不建议使用小程序码,而是直接使用文章页URL生成普通二维码,配合“扫普通链接二维码打开小程序”配置,实现微信内小程序打开,微信外普通webview打开网页。

分享接收侧

用户收到小程序卡片消息,点开后打开web-view,将src填入,即可查看博文;

通过海报识别二维码打开URL,因为配置了“扫普通链接二维码打开小程序”也会直接打开web-view小程序页面,这时候通过接收q参数,可以获取到二维码链接内容(在onLoad事件中提取”q”参数并自行UrlDecode一次,即可获取原二维码的完整内容);

另一方面,网页需要做的是:根据 wx.miniProgram.getEnv 获取当前网页加载环境,如果是小程序中,则露出分享按钮。并过滤掉非业务域名的链接和iframe。

观点

在利用小程序卡片的优势,促进内容和活动页面在微信生态内传播都同时,反过来,也是利用内容为自己的小程序拉新。结合小程序的设备、媒体、微信支付、卡券等能力,更好的完成服务变现。

可以看到近两年来微信含蓄而一以贯之地表达着做大做强小程序的意志,仿佛意图将小程序能承载的都收入其中… 不过即便果真如此又怎样?还是那句话“谁让你在别人的地盘”,更重要的是目标客户在微信的地盘。如果不能反抗,就一定要学会享受,非要押注爆冷的话,可以同时祈祷有一天所有人都弃微信而去。

体验方式

如果你查看这篇文章时

  • 在小程序外:(朋友圈,聊天会话)扫描图上二维码体验

    微海报

    -

  • 在小程序内:点击文末绿色“分享”按钮。

Kainy Guo wechat
微信扫码,或订阅 Feed 解锁更多开发技能。