小程序分享模块超级详解-即速应用

导语：在小程序项目开发中，分享能力几乎是每个项目必备的要求，但原生的分享能力比较有限，不够灵活，今天就我们就一起来研究下，如何在现有基础上，增强小程序分享的能力，使信息传递更加直观、灵活。

示例项目地址: github.com/ycvcb123/sh…

本文目录:

小程序分享基础 API 介绍
基于 canvas 动态绘制分享图片
canvas 对不同来源图片的处理（本地图片，网络图片， base64图片）
canvas 生成图片后如何保存到本地
如何生成小程序码及验证小程序码所带信息
抽离配置文件，使绘制更加灵活

小程序分享基础 API 介绍

微信分享的 API 只提供了分享给微信好友的能力，并没有提供分享朋友圈的能力，这是为啥子呢！！！

从网上收集的一些咨询来看，主要有如下两点原因:

由于微商泛滥，公众号鸡汤泛滥，朋友圈质量已经有所下降，如果小程序再开放分享朋友圈功能，可能会进一步影响到整个微信生态，造成用户活跃度下降，用户流失等问题。
微信不让小程序在朋友圈转发，更多是保护朋友圈的”广告位”阵地，不能够让这块”肥肉”变成了公益设施。

其实一些童鞋应该留意到了在朋友圈，官方已经推了一些小程序的广告，只不过这项能力还没有完全放开，以后会不会放开先不讨论，智慧的开发小哥哥早已想到了通过生成带有小程序码的海报作为替代方案（撒花！！！），本文后面的部分也会说到，我们先回到正题。

用法：

Page({    onShareAppMessage: function(){         return {            title: 'xxxxx', //自定义转发标题            path: '/page/user?id=123', //分享页面路径            imageUrl: '/common/images/xxx.png' //分享图片 宽高比 5:4        }    }})//如果只写成如下形式，title默认是小程序名，path为当前页面路径（不带参数），imageUrl为当前页面截图Page({    onShareAppMessage: function(){}})复制代码

触发方法（一定要在 page 中先写入上述方法）:

点击小程序的胶囊菜单，会从底部弹出转发选项。
<button> 组件 open-type="share" 即 <button open-type="share"> ,点击后触发。

触发后效果如下：

把 page , scene 等参数传递给后台后，后台调用 B 类接口，返回给前端一个base64的图片数据，我们把这个数据绘制到海报上就好！！！

绘制方法上面已经说过canvas 对不同来源图片的处理（本地图片，网络图片， base64图片）

现在小程序码的图片已经生成了，那么我们要如何自测呢？怎么才能知道小程序码中所携带信息是否正确呢？

官方给出的方法:

上述方法在开发阶段是比较方便，但是在正式的提测阶段，此种方式显得有些牵强，有人想到真机调试？

官方接口只能生成已发布的小程序的二维码

也就是说，你扫码就连上生产环境了！！！没有办法调试，那到底怎么办呢？？？

解决办法就要借助强大的小程序开发者工具啦！！！

首先把生成的小程序码保存到电脑里，方法见上述canvas 生成图片后如何保存到本地部分。

然后通过开发者工具选择二维码编译模式，文件夹中选择带有小程序码的图片即可！！！

注意：获取 scene 值时要 decodeURIComponent

Page({  onLoad(query) {    // scene 需要使用 decodeURIComponent 才能获取到生成二维码时传入的 scene    const scene = decodeURIComponent(query.scene)  }})复制代码

抽离配置文件，使绘制更加灵活

我们观察如下一个小程序海报:

除了上图红框中的的内容会发生写变化以外，整体的结构大部分是基本已经固定了的，因为海报内容和业务是强相关的，如果我把绘制的逻辑写入组件里，那岂不是换个业务，我的组件就要改一次？这样失去了组件的通用型肯定是不行的，那怎么办呢？下面介绍一个业界比较好的解决方案:

小程序海报说白了就是由 canvas 画布上绘制的一些形状，图片，文字，线等等组成的，那我们是不是可以把这些绘制的基本能力封装成方法，通过设计稿量出海报上每个元素的位置大小等信息，当作一个配置文件传递给这些绘制方法，这样就保证组件的通用型，而且绘制信息抽离成一个配置文件也更加方便后期维护。

share-config.js:

function setShareInfo(time, start, end, imageSrc) {    return {        width: 750,        height: 1300,        background: '#F2FCF8',        views: [{                type: 'rect',                parent: true,                radius: true,                radiusVal: 16,                left: 40,                width: 670,                height: 1140,                shadow: true,                background: '#cacacd',                shadowColor: 'rgba(0,0,0,.6)',                line: true            },            //....            {                type: 'text',                content: '长按或扫描二维码，查看这条线路',                color: '#9B9BA1',                top: 1052,                left: 224,                fontSize: 28,                font: 'PingFangSC-Medium',            },            {                type: 'image',                path: '/common/images/station-flag.png',                top: 746,                left: 80,                width: 32,                height: 104            }        ]    }}export {    setShareInfo}复制代码

只需要在几个动态信息改变时，传入这些变化的值即可。

import { setShareInfo } from '../../common/config/share-config';page({    onLoad: function() {        this.setData({            shareMessageInfoTimeline: setShareInfo('3月7号 下午16:30发车', '腾讯大厦', '平安国际中心', '')        });        //...    },});复制代码

通过 shareMessageInfoTimeline 获取配置信息

<view class="container">    <mod-share-timeline timelineShow="{{timelineShow}}" picContent="{{shareMessageInfoTimeline}}" bindcloseTimelineShow="closeTimelineShow"/></view>复制代码