小程序共享模块一流详整_javascript技术_脚本之家

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

项目需求写完有一段时间了,但是还是想回过来总结一下,一是对项目的回顾优化等,二是对坑的地方做个记录,避免以后遇到类似的问题。

示例项目地址:

需求

小程序分享基础 API 介绍

利用微信强大的社交能力通过小程序达到裂变的目的,拉取新用户。

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

需求分析

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

1、利用小程序官方提供的api可以直接分享转发到微信群打开小程序

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

2、利用小程序生成海报保存图片到相册分享到朋友圈,用户长按识别二维码关注公众号或者打开小程序来达到裂变的目的

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

实现方案

onShareAppMessage — 转发

一、分析如何实现

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

相信大家应该都会有类似的迷惑,就是如何按照产品设计的那样绘制成海报,其实当时我也是不知道如何下手,认真想了下得通过canvas绘制成图片,这样用户保存这个图片到相册,就可以分享到朋友圈了。但是要绘制的图片上面不仅有文字还有数字、图片、二维码等且都是活的,这个要怎么动态生成呢。认真想了下,需要一点一点的将文字和数字,背景图绘制到画布上去,这样通过api最终合成一个图片导出到手机相册中。

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

二、需要解决的问题

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

1、二维码的动态获取和绘制(包括如何生成小程序二维码、公众号二维码、打开网页二维码)

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

2、背景图如何绘制,获取图片信息

基于 canvas 动态绘制分享图片

3、将绘制完成的图片保存到本地相册

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

4、处理用户是否取消授权保存到相册

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

小程序共享模块一流详整_javascript技术_脚本之家。三、实现步骤

//创建画布var ctx = wx.createCanvasContext;//画布上绘制图片ctx.drawImage(path, 0, 0, width, height);//画布上绘制文字ctx.setFillStyle;ctx.setFontSize;ctx.fillText;//其他信息绘制//... ctx.draw();

这里我具体写下围绕上面所提出的问题,描述大概实现的过程

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

①首先创建canvas画布,我把画布定位设成负的,是为了不让它显示在页面上,是因为我尝试把canvas通过判断条件动态的显示和隐藏,在绘制的时候会出现问题,所以采用了这种方法,这里还有一定要设置画布的大小。

强大的小程序给我们提供了原生的方法: wx.canvasToTempFilePath

//在上面代码的draw()的回调中使用wx.canvasToTempFilePathvar that = this;ctx.draw => { setTimeout => { wx.canvasToTempFilePath({ canvasId: 'myCanvas', success:  => { that.setData({ //res.tempFilePath 生成图片的临时路径 picUrl: res.tempFilePath }); } }, that); //在组件中使用这里一定记得要绑定this,切记!!! }, 300); //此处加入300毫秒延时是为了解决小程序绘制过程中的渲染问题});

②创建好画布之后,先绘制背景图,因为背景图我是放在本地,所以获取

把图片路径传递给 “ 标签,得到下图结果。

组件 canvas-id 属性,通过 createCanvasContext 创建canvas的绘图上下文
CanvasContext 对象。使用 drawImage
绘制图像到画布,第一个参数是图片的本地地址,后面两个参数是图像相对画布左上角位置的x轴和y轴,最后两个参数是设置图像的宽高。

同理:把 picUrl 赋值给 onShareAppMessage 中的 imageUrl
,分享出去后的图片则带有了动态信息!

const ctx = wx.createCanvasContext

对不同来源图片的处理(本地图片, 网络图片 , base64图片 )

ctx.drawImage('/img/study/shareimg.png', 0, 0, 690, 1085)

在上面的例子中,绘制本地图片时直接使用
ctx.drawImage(path, 0, 0, width, height) , path
直接传入图片路径即可。但是如果是 网络图片 或者是 base64 的图片时,
drawImage 是无法直接绘制的
,下面就介绍下针对上述两种情况如何做兼容处理。

③创建好背景图后,在背景图上绘制头像,文字和数字。通过 getImageInfo
获取头像的信息,这里需要注意下在获取的网络图片要先配置download域名才能生效,具体在小程序后台设置里配置。

//将网络图片转换为本地路径handleNetImg: function { var that = this; return new Promise => { wx.getImageInfo({ src: imagePath, success: function; } }); });}handleNetImg => { console.log; //输出转换后的本地图片路径 ctx.drawImage(res.path, 0, 0, width, height); //此时图片即可在画布上绘制出来})

获取头像地址,首先量取头像在画布中的大小,和x轴Y轴的坐标,这里的result[0]是我用promise封装返回的一个图片地址

使用 ctx.drawImage(base64Data, 0, 0, width, height)
在小程序开发者工具上是可以绘制的,
然而!!!这个大骗纸!!!真机上是失效的!!!

let headImg = new Promise { wx.getImageInfo({ src: `${app.globalData.baseUrl2}${that.data.currentChildren.headImg}`, success: function  { resolve }, fail: function  { console.log wx.showToast({ title: '网络错误请重试', icon: 'loading' }) } }) })let avatarurl_width = 60, //绘制的头像宽度 avatarurl_heigth = 60, //绘制的头像高度 avatarurl_x = 28, //绘制的头像在画布上的位置 avatarurl_y = 36; //绘制的头像在画布上的位置 ctx.save(); // 先保存状态 已便于画完圆再用 ctx.beginPath(); //开始绘制 //先画个圆 前两个参数确定了圆心  坐标 第三个参数是圆的半径 四参数是绘图方向 默认是false,即顺时针 ctx.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math.PI * 2, false); ctx.clip(); //画了圆 再剪切 原始画布中剪切任意形状和尺寸。一旦剪切了某个区域,则所有之后的绘图都会被限制在被剪切的区域内 ctx.drawImage(result[0], avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth); // 推进去图片

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

这里举个例子说下如何绘制文字,比如我要绘制如下这个“字”,需要动态获取前面字数的总宽度,这样才能设置“字”的x轴坐标,这里我本来是想通过
measureText
来测量字体的宽度,但是在iOS端第一次获取的宽度值不对,关于这个问题,我还在微信开发者社区提了
bug
,所以我想用另一个方法来实现,就是先获取正常情况下一个字的宽度值,然后乘以总字数就获得了总宽度,亲试是可以的。

var handleBase64Img = function() { //wx.getFileSystemManager 小程序文件管理器 var fsm = wx.getFileSystemManager(); var FILE_NAME = 'base64src'; var base64src = function { return new Promise => { //解析base64,提取出图片类型: imgtype,解析内容bodyData(去掉data:image/png;base64,以后的内容) var [, imgType, bodyData] = /data:image//.exec || []; if  { reject(new Error('ERROR_BASE64SRC_PARSE')); } /** *wx.env.USER_DATA_PATH *本地用户文件 *本地用户文件是从 1.7.0 版本开始新增的概念。提供了一个用户文件目录给开发者,开发者对这个目录有完全自由的读写权限。通过 wx.env.USER_DATA_PATH 可以获取到这个目录的路径。 */ var filePath = `${wx.env.USER_DATA_PATH}/${FILE_NAME}.${imgType}`; //按指定写入文件的字符编码encoding,向地址filepath,写入数据data。 fsm.writeFile({ filePath, data: bodyData, encoding: 'base64', success; }, fail() { reject(new Error('ERROR_BASE64SRC_WRITE')); }, }); }); }; return base64src;}var base64src = that.handleBase64Img();var handleBase64src = base64src;handleBase64src.then(res => { //res 即为base64 转化为图片后的本地路径,即可在画布上绘制成功 that.ctx.drawImage(res, left, top, width, height);});
let allReading = 97 / 6 / app.globalData.ratio * wordNumber.toString().length + 325;ctx.font = 'normal normal 30px sans-serif';ctx.setFillStylectx.fillText;

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

④绘制公众号二维码,和获取头像是一样的,也是先通过接口返回图片网络地址,然后再通过
getImageInfo 获取公众号二维码图片信息

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

⑤如何绘制小程序码,具体官网文档也给出生成无限 小程序码接口
,通过生成的小程序可以打开任意一个小程序页面,并且二维码永久有效,具体调用哪个小程序二维码接口有不同的应用场景,具体可以看下官方文档怎么说的,也就是说前端通过传递参数调取后端接口返回的小程序码,然后绘制在画布上
ctx.drawImage(‘小程序码的本地地址’, x轴, Y轴, 宽, 高)

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

⑥最终绘制完把canvas画布转成图片并返回图片地址

//访问相册授权wx.getSetting => { //检查是否有访问相册的权限,如果没有则通过wx.authorize方法授权(授权只需要一次就好,后面就可以直接访问相册) if (!res.authSetting['scope.writePhotosAlbum']) { console.log; wx.authorize({ scope: 'scope.writePhotosAlbum', success:  => { //用户点击允许获取相册信息后逻辑进入这里,如上图所示 } }) } }});//获取了相册的访问权限,使用 wx.saveImageToPhotosAlbum 将图片保存到相册中wx.saveImageToPhotosAlbum({ filePath: that.data.sharePicPath, success:  => { //保存成功弹出提示,告知一下用户 wx.showModal({ title: '已保存到手机相册', content: '将图片发送到朋友圈,邀请好友加入', confirmColor: '#0bc183', confirmText: '知道了', showCancel: false }) }})
wx.canvasToTempFilePath({ canvasId: 'myCanvas', success: function  { canvasToTempFilePath = res.tempFilePath // 返回的图片地址保存到一个全局变量里 that.setData({ showShareImg: true }) wx.showToast }, fail: function () { wx.showToast }, complete: function  wx.hideToast

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

⑦保存到系统相册;先判断用户是否开启用户授权相册,处理不同情况下的结果。比如用户如果按照正常逻辑授权是没问题的,但是有的用户如果点击了取消授权该如何处理,如果不处理会出现一定的问题。所以当用户点击取消授权之后,来个弹框提示,当它再次点击的时候,主动跳到设置引导用户去开启授权,从而达到保存到相册分享朋友圈的目的。

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

// 获取用户是否开启用户授权相册 if  { wx.openSetting => { if  { if (result.authSetting["scope.writePhotosAlbum"] === true) { openStatus = true; wx.saveImageToPhotosAlbum({ filePath: canvasToTempFilePath, success() { that.setData({ showShareImg: false }) wx.showToast({ title: '图片保存成功,快去分享到朋友圈吧~', icon: 'none', duration: 2000 }) }, fail() { wx.showToast({ title: '保存失败', icon: 'none' }) } }) } } }, fail: () => { }, complete: ; } else { wx.getSetting { // 如果没有则获取授权 if (!res.authSetting['scope.writePhotosAlbum']) { wx.authorize({ scope: 'scope.writePhotosAlbum', success() { openStatus = true wx.saveImageToPhotosAlbum({ filePath: canvasToTempFilePath, success() { that.setData({ showShareImg: false }) wx.showToast({ title: '图片保存成功,快去分享到朋友圈吧~', icon: 'none', duration: 2000 }) }, fail() { wx.showToast({ title: '保存失败', icon: 'none' }) } }) }, fail() { // 如果用户拒绝过或没有授权,则再次打开授权窗口 openStatus = false console.log wx.showToast({ title: '请设置允许访问相册', icon: 'none' }) } }) } else { // 有则直接保存 openStatus = true wx.saveImageToPhotosAlbum({ filePath: canvasToTempFilePath, success() { that.setData({ showShareImg: false }) wx.showToast({ title: '图片保存成功,快去分享到朋友圈吧~', icon: 'none', duration: 2000 }) }, fail() { wx.showToast({ title: '保存失败', icon: 'none' }) } }) } }, fail { console.log }

官方文档:获取小程序码

总结

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

至此所有的步骤都已实现,在绘制的时候会遇到一些异步请求后台返回的数据,所以我用promise和async和await进行了封装,确保导出的图片信息是完整的。在绘制的过程确实遇到一些坑的地方。比如初开始导出的图片比例大小不对,还有用measureText测量文字宽度不对,多次绘制有时导出的图片上的文字颜色会有误差等。如果你也遇到一些比较坑的地方可以一起探讨下做个记录,下面附下完整的代码

我们在回到正题:

import regeneratorRuntime from '../../utils/runtime.js' // 引入模块const app = getApp(), api = require('../../service/http.js');var ctx = null, // 创建canvas对象 canvasToTempFilePath = null, // 保存最终生成的导出的图片地址 openStatus = true; // 声明一个全局变量判断是否授权保存到相册// 获取微信公众号二维码 getCode: function () { return new Promise(function  { api.fetch('/wechat/open/getQRCodeNormal', 'GET').then(res => { console.log if  { console.log(res.content, 'codeUrl') resolve.catch(err => { console.log }, // 生成海报 async createCanvasImage() { let that = this; // 点击生成海报数据埋点 that.setData({ generateId: '点击生成海报' }) if  { let codeUrl = await that.getCode() wx.showLoading let code = new Promise { wx.getImageInfo({ src: codeUrl, success: function  { resolve }, fail: function  { console.log wx.showToast({ title: '网络错误请重试', icon: 'loading' }) } }) }) let headImg = new Promise { wx.getImageInfo({ src: `${app.globalData.baseUrl2}${that.data.currentChildren.headImg}`, success: function  { resolve }, fail: function  { console.log wx.showToast({ title: '网络错误请重试', icon: 'loading' }) } }) }) Promise.all.then { const ctx = wx.createCanvasContext console.log(ctx, app.globalData.ratio, 'ctx') let canvasWidthPx = 690 * app.globalData.ratio, canvasHeightPx = 1085 * app.globalData.ratio, avatarurl_width = 60, //绘制的头像宽度 avatarurl_heigth = 60, //绘制的头像高度 avatarurl_x = 28, //绘制的头像在画布上的位置 avatarurl_y = 36, //绘制的头像在画布上的位置 codeurl_width = 80, //绘制的二维码宽度 codeurl_heigth = 80, //绘制的二维码高度 codeurl_x = 588, //绘制的二维码在画布上的位置 codeurl_y = 984, //绘制的二维码在画布上的位置 wordNumber = that.data.wordNumber, // 获取总阅读字数 // nameWidth = ctx.measureText.width, // 获取总阅读字数的宽度 // allReading =  - 325) * 2 + 380; // allReading = nameWidth / app.globalData.ratio + 325; allReading = 97 / 6 / app.globalData.ratio * wordNumber.toString().length + 325; console.log(wordNumber, wordNumber.toString().length, allReading, '获取总阅读字数的宽度') ctx.drawImage('/img/study/shareimg.png', 0, 0, 690, 1085) ctx.save(); // 先保存状态 已便于画完圆再用 ctx.beginPath(); //开始绘制 //先画个圆 前两个参数确定了圆心  坐标 第三个参数是圆的半径 四参数是绘图方向 默认是false,即顺时针 ctx.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math.PI * 2, false); ctx.clip(); //画了圆 再剪切 原始画布中剪切任意形状和尺寸。一旦剪切了某个区域,则所有之后的绘图都会被限制在被剪切的区域内 ctx.drawImage(result[0], avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth); // 推进去图片 ctx.restore(); //恢复之前保存的绘图上下文状态 可以继续绘制 ctx.setFillStyle; // 文字颜色 ctx.setFontSize; // 文字字号 ctx.fillText(that.data.currentChildren.name, 103, 78); // 绘制文字 ctx.font = 'normal bold 44px sans-serif'; ctx.setFillStyle; // 文字颜色 ctx.fillText; // 绘制文字 ctx.font = 'normal normal 30px sans-serif'; ctx.setFillStyle ctx.fillText; ctx.font = 'normal normal 24px sans-serif'; ctx.setFillStyle; // 文字颜色 ctx.fillText; // 绘制文字 ctx.font = 'normal normal 24px sans-serif'; ctx.setFillStyle; // 文字颜色 ctx.fillText(that.data.percent, 154, 190); // 绘制孩子百分比 ctx.font = 'normal normal 24px sans-serif'; ctx.setFillStyle; // 文字颜色 ctx.fillText; // 绘制孩子百分比 ctx.font = 'normal bold 32px sans-serif'; ctx.setFillStyle; // 文字颜色 ctx.fillText(that.data.singIn, 50, 290); // 签到天数 ctx.fillText(that.data.reading, 280, 290); // 阅读时长 ctx.fillText(that.data.reading, 508, 290); // 听书时长 // 书籍阅读结构 ctx.font = 'normal normal 28px sans-serif'; ctx.setFillStyle; // 文字颜色 ctx.fillText(that.data.bookInfo[0].count, 260, 510); ctx.fillText(that.data.bookInfo[1].count, 420, 532); ctx.fillText(that.data.bookInfo[2].count, 520, 594); ctx.fillText(that.data.bookInfo[3].count, 515, 710); ctx.fillText(that.data.bookInfo[4].count, 492, 828); ctx.fillText(that.data.bookInfo[5].count, 348, 858); ctx.fillText(that.data.bookInfo[6].count, 212, 828); ctx.fillText(that.data.bookInfo[7].count, 148, 726); ctx.fillText(that.data.bookInfo[8].count, 158, 600); ctx.font = 'normal normal 18px sans-serif'; ctx.setFillStyle; // 文字颜色 ctx.fillText(that.data.bookInfo[0].name, 232, 530); ctx.fillText(that.data.bookInfo[1].name, 394, 552); ctx.fillText(that.data.bookInfo[2].name, 496, 614); ctx.fillText(that.data.bookInfo[3].name, 490, 730); ctx.fillText(that.data.bookInfo[4].name, 466, 850); ctx.fillText(that.data.bookInfo[5].name, 323, 878); ctx.fillText(that.data.bookInfo[6].name, 184, 850); ctx.fillText(that.data.bookInfo[7].name, 117, 746); ctx.fillText(that.data.bookInfo[8].name, 130, 621); ctx.drawImage(result[1], codeurl_x, codeurl_y, codeurl_width, codeurl_heigth); // 绘制头像 ctx.draw { // canvas画布转成图片并返回图片地址 wx.canvasToTempFilePath({ canvasId: 'myCanvas', success: function  { canvasToTempFilePath = res.tempFilePath that.setData({ showShareImg: true }) console.log(res.tempFilePath, 'canvasToTempFilePath') wx.showToast }, fail: function () { wx.showToast }, complete: function  wx.hideToast } }, // 保存到系统相册 saveShareImg: function () { let that = this; // 数据埋点点击保存学情海报 that.setData // 获取用户是否开启用户授权相册 if  { wx.openSetting => { if  { if (result.authSetting["scope.writePhotosAlbum"] === true) { openStatus = true; wx.saveImageToPhotosAlbum({ filePath: canvasToTempFilePath, success() { that.setData({ showShareImg: false }) wx.showToast({ title: '图片保存成功,快去分享到朋友圈吧~', icon: 'none', duration: 2000 }) }, fail() { wx.showToast({ title: '保存失败', icon: 'none' }) } }) } } }, fail: () => { }, complete: ; } else { wx.getSetting { // 如果没有则获取授权 if (!res.authSetting['scope.writePhotosAlbum']) { wx.authorize({ scope: 'scope.writePhotosAlbum', success() { openStatus = true wx.saveImageToPhotosAlbum({ filePath: canvasToTempFilePath, success() { that.setData({ showShareImg: false }) wx.showToast({ title: '图片保存成功,快去分享到朋友圈吧~', icon: 'none', duration: 2000 }) }, fail() { wx.showToast({ title: '保存失败', icon: 'none' }) } }) }, fail() { // 如果用户拒绝过或没有授权,则再次打开授权窗口 openStatus = false console.log wx.showToast({ title: '请设置允许访问相册', icon: 'none' }) } }) } else { // 有则直接保存 openStatus = true wx.saveImageToPhotosAlbum({ filePath: canvasToTempFilePath, success() { that.setData({ showShareImg: false }) wx.showToast({ title: '图片保存成功,快去分享到朋友圈吧~', icon: 'none', duration: 2000 }) }, fail() { wx.showToast({ title: '保存失败', icon: 'none' }) } }) } }, fail { console.log } },

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

总结

B 类接口入参,出参官方说明– 接口 B:适用于需要的码数量极多的业务场景

以上所述是小编给大家介绍的微信小程序生成海报分享朋友圈的实现方法,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

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

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

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

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

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

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

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

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

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

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

注意: 获取 scene 值时要 decodeURIComponent

Page { // scene 需要使用 decodeURIComponent 才能获取到生成二维码时传入的 scene const scene = decodeURIComponent

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

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

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

小程序海报说白了就是由 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', 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 { this.setData({ shareMessageInfoTimeline: setShareInfo('3月7号 下午16:30发车', '腾讯大厦', '平安国际中心', '') }); //... },});

通过 shareMessageInfoTimeline 获取配置信息

总结

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

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

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

发表评论

电子邮件地址不会被公开。 必填项已用*标注