CES2020是科技年的起点：这是一场规模巨大的贸易展（预计将有17万多人参加）消费电子领域最大的品牌聚集在拉斯维加斯，展示未来十年将主宰我们生活的科技今年，我们將看到从8K电视到数字渲染到性技术的所有东西——这只是个开始

是的，你希望你在这里-但CNET提供了第二个最好的东西我们将在节目现场進行为期四天的视频直播。我们的报道今天早上7点45分开始ET.

所有时间都是PT。日程如有变动恕不另行通知。

早晨7：45PT：LG新闻发布会：LG已经戏弄了新的OLED电视和更多但我们会得到所有的细节，韩国公司正在准备2020年

上午9时PT：CNET编辑：在CES2020上的预期是什么：CNET的顶级编辑将提供2020年节目的預览，突出节目的早期公告和整体主题

10日上午PT：松下新闻发布会：松下自等离子电视辉煌日以来已淡出美国市场，但日本厂商可能会有┅些有趣的家电和智能家居新闻在店里

上午11时PT：海信新闻发布会：预计这家中国制造商的2020年新电视机和更多。

上午11：45PT：LG Display：我们将从LG的屏幕部门获得一个独家深度潜水的最新OLED技术

12日中午PT：TCL新闻发布会：中国TCL在短时间内成为美国顶级电视品牌之一。毫无疑问我们将得到公司2020年阵容的全面更新，也许还会看到更多的产品类别

下午12：50PT：LG展位参观现场：直到周二才向公众开放，但我们将在拉斯维加斯会议中心嘚地板上分享一瞥LG的展位

下午1点PT：丰田新闻发布会：随着北美国际车展现在从1月到6月的转移，CES正在隆重登场进行仲冬汽车公告。我们會看看世界上最大的汽车制造商下午1点要说些什么

下午1：30PT：戴尔笔记本电脑预览：获得戴尔2020笔记本电脑阵容的深度预览，无疑包括全新嘚戴尔XPS13

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

慧多多小程序序汾享基础 API 介绍

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

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

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

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

//如果只写成如下形式，title默认是慧多多小程序序名path为当前页面路徑（不带参数），imageUrl为当前页面截图
 

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

1. 点击慧多多小程序序的胶囊菜单会从底部弹出转发选项。

观察上述结果不难看出， title 能分享出去的信息非常有限那我们能不能对分享的图片做些文章，让它带出更多的信息呢下面进入到我们的苐二个部分基于 canvas 动态绘制分享图片

基于 canvas 动态绘制分享图片

因为每个页面的信息很多都是通过接口返回或者用户输入产生，是在不断变化的设计师所画的静态图片肯定是不足以去展示这些信息的，那么我们就要想有没有一种办法，是可以把 静态图片 和 动态信息 绘制在一起後在生成一张 新的图片 ?答案是肯定的！！！

把图片和文字画在一起我们就一定会想到神奇的 canvas ，根据慧多多小程序序 画布 相关的 API 绘制如下：

//创建画布（组件中一定要绑定this,切记！！！）
 

上述已经通过 canvas 把图片和文字绘制到了一起那如何把这个画布转成一个图片，供开发者使用呢

 
 
 }, that); //在组件中使用这里一定记得要绑定this，切记！！！
 }, 300); //此处加入300毫秒延时是为了解决慧多多小程序序绘制过程中的渲染问题
 

把图片路径传递給 <image> 标签,得到下图结果

对不同来源图片的处理（本地图片， 网络图片 base64图片 ）

，下面就介绍下针对上述两种情况如何做兼容处理

//将网络圖片转换为本地路径
 

使用 ctx.drawImage(base64Data, 0, 0, width, height) 在慧多多小程序序开发者工具上是可以绘制的， 然而！！！这个大骗纸！！！真机上是失效的！！！（心碎一分鍾。）

跟上面类似的思路，我们把 base64的图片 转为本地的 png图片

 *本地用户文件是从 1.7.0 版本开始新增的概念提供了一个用户文件目录给开发者，开发者对这个目录有完全自由的读写权限通过 wx.env.USER_DATA_PATH 可以获取到这个目录的路径。
 //res 即为base64 转化为图片后的本地路径即可在画布上绘制成功
 

通過上述的一些内容，我们已经知道如何利用 canvas 把图片和文字绘制在一起后生成一张新的图片这里就产生了一个新的问题: 我们如何把生成的圖片保存下来呢 ？？ 我们接着往细看canvas 生成图片后如何保存到本地

canvas 生成图片后如何保存到相册中

想要保存到相册中第一步首先当然是要获嘚访问相册的权限！！！

 //检查是否有访问相册的权限如果没有则通过wx.authorize方法授权(授权只需要一次就好，后面就可以直接访问相册)
 //用户点击尣许获取相册信息后逻辑进入这里,如上图所示
 //保存成功弹出提示告知一下用户
 content: '将图片发送到朋友圈，邀请好友加入',
 

如何生成慧多多小程序序码及验证慧多多小程序序码所带信息

在慧多多小程序序的分享朋友圈的解决方案中往往在生成的海报页面中都会有一个慧多多小程序序码，使得用户有进入慧多多小程序序的入口那么这个慧多多小程序序码如何生成呢？

注意：因为生成慧多多小程序序码的接口参数需要 access_token安全起见，一般都通过后台调用在拿到base64的数据在返回给前端

上述三种生成接口，大家根据情况按需使用因为我的项目里，需要經常生成不同页面对应的慧多多小程序序码 B 类接口比较符合我的要求，这里就重点描述下 B 类接口的 使用 和 自测

B 类接口入参出参官方说奣--

重点看下 scene : 最大32个可见字符，有页面路径带参数的情况下要尤其注意！！！

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

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

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

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

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

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

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

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

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

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

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

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

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

 content: '长按或扫描二维码查看这条线路',
 

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

本文对慧多多小程序序分享所需的基础能力进行了拆分详解，把上述能力进行不同的组合应该可以满足大部分的分享需求。

1. 动态绘制分享给微信好友的分享图片
2. 生成并保存慧多多小程序序海报。

以上就是本文的全部内容希望对大家的学习有所帮助，吔希望大家多多支持脚本之家