微信小程序通过一个json实现分享朋友圈图片


Posted in Javascript onSeptember 03, 2019

写在前面

最近在做小程序,发现制作分享到朋友圈图片是每个项目必须的。遇到坑比较多,写起来也比较繁琐,也没有找到类似组件,所以就自己动手写了一个。

演示

微信小程序通过一个json实现分享朋友圈图片

左侧是 canvasdrawer 绘制的,右侧是UI给的图

微信小程序通过一个json实现分享朋友圈图片

特性

  • 简单易用 —— 一个 json 搞定绘制图片
  • 功能全 —— 满足 90% 的使用场景
    • 绘制文本(换行、超出内容省略号、中划线、下划线、文本加粗)
    • 绘制图片
    • 绘制矩形
    • 保存图片
    • 多图绘制
    • ...
  • 代码量小

体验

git clone https://github.com/kuckboy1994/mp_canvas_drawer

想在手机上使用配置自己的 appid 即可。

编译模式中已经为你配置好比较常用的两种模式:

  • 普通绘制,绘制单张分享图。
  • 多图绘制,连续绘制分享图

使用

git clone https://github.com/kuckboy1994/mp_canvas_drawer 到本地

把 components 中的 canvasdrawer 拷贝到自己项目下。

在使用页面注册组件

{
 "usingComponents": {
 "canvasdrawer": "/components/canvasdrawer/canvasdrawer"
 }
}

在页面 **.wxml 文件中加入如下代码

<canvasdrawer painting="{{painting}}" bind:getImage="eventGetImage"/>

painting 是需要传入的 json。 getImage 方法是绘图完成之后的回调函数,在 event.detail 中返回绘制完成的图片地址。

当前栗子中的 painting 简单展示一下。详细配置请看 API

painting

{
 width: 375,
 height: 555,
 views: [
 {
 type: 'image',
 url: 'https://hybrid.xiaoying.tv/miniprogram/viva-ad/1/1531103986231.jpeg',
 top: 0,
 left: 0,
 width: 375,
 height: 555
 },
 {
 type: 'image',
 url: 'https://wx.qlogo.cn/mmopen/vi_32/DYAIOgq83epJEPdPqQVgv6D8bojGT4DrGXuEC4Oe0GXs5sMsN4GGpCegTUsBgL9SPJkN9UqC1s0iakjQpwd4h4A/132',
 top: 27.5,
 left: 29,
 width: 55,
 height: 55
 },
 {
 type: 'image',
 url: 'https://hybrid.xiaoying.tv/miniprogram/viva-ad/1/1531401349117.jpeg',
 top: 27.5,
 left: 29,
 width: 55,
 height: 55
 },
 {
 type: 'text',
 content: '您的好友【kuckboy】',
 fontSize: 16,
 color: '#402D16',
 textAlign: 'left',
 top: 33,
 left: 96,
 bolder: true
 },
 {
 type: 'text',
 content: '发现一件好货,邀请你一起0元免费拿!',
 fontSize: 15,
 color: '#563D20',
 textAlign: 'left',
 top: 59.5,
 left: 96
 },
 {
 type: 'image',
 url: 'https://hybrid.xiaoying.tv/miniprogram/viva-ad/1/1531385366950.jpeg',
 top: 136,
 left: 42.5,
 width: 290,
 height: 186
 },
 {
 type: 'image',
 url: 'https://hybrid.xiaoying.tv/miniprogram/viva-ad/1/1531385433625.jpeg',
 top: 443,
 left: 85,
 width: 68,
 height: 68
 },
 {
 type: 'text',
 content: '正品MAC魅可口红礼盒生日唇膏小辣椒Chili西柚情人',
 fontSize: 16,
 lineHeight: 21,
 color: '#383549',
 textAlign: 'left',
 top: 336,
 left: 44,
 width: 287,
 MaxLineNumber: 2,
 breakWord: true,
 bolder: true
 },
 {
 type: 'text',
 content: '¥0.00',
 fontSize: 19,
 color: '#E62004',
 textAlign: 'left',
 top: 387,
 left: 44.5,
 bolder: true
 },
 {
 type: 'text',
 content: '原价:¥138.00',
 fontSize: 13,
 color: '#7E7E8B',
 textAlign: 'left',
 top: 391,
 left: 110,
 textDecoration: 'line-through'
 },
 {
 type: 'text',
 content: '长按识别图中二维码帮我砍个价呗~',
 fontSize: 14,
 color: '#383549',
 textAlign: 'left',
 top: 460,
 left: 165.5,
 lineHeight: 20,
 MaxLineNumber: 2,
 breakWord: true,
 width: 125
 }
 ]
}

API

对象结构一览

{
 width: 375,
 height: 555,
 views: [
 {
 type: 'image',
 url: 'url',
 top: 0,
 left: 0,
 width: 375,
 height: 555
 },
 {
 type: 'text',
 content: 'content',
 fontSize: 16,
 color: '#402D16',
 textAlign: 'left',
 top: 33,
 left: 96,
 bolder: true
 },
 {
 type: 'rect',
 background: 'color',
 top: 0,
 left: 0,
 width: 375,
 height: 555
 }
 ]
}

数据对象的第一层需要三个参数: width、height、views。配置中所有的数字都是没有单位的。这就意味着 canvas 绘制的是一个比例图。具体显示的大小直接把返回的图片路径放置到 image 标签中即可。

当前可以绘制3种类型的配置: image、text、rect。配置的属性基本上使用的都是 css 的驼峰名称,还是比较好理解的。

image(图片)

属性 含义 默认值 可选值
url 绘制的图片地址,可以是本地图片,如:/images/1.jpeg
top 左上角距离画板顶部的距离
left 左上角距离画板左侧的距离
width 要画多宽 0
height 要画多高 0

text(文本)

属性 含义 默认值 可选值
content 绘制的图片地址 ''(空字符串)
color 颜色 black
fontSize 字体大小 16
textAlign 文字对齐方式 left center、right
lineHeight 行高,只有在多行文本中才有用 20
top 文本左上角距离画板顶部的距离 0
left 文本左上角距离画板左侧的距离 0
breakWord 是否需要换行 false true
MaxLineNumber 最大行数,只有设置 breakWord: true ,当前属性才有效,超出行数内容的显示为... 2
width 和 MaxLineNumber 属性配套使用,width 就是达到换行的宽度
bolder 是否加粗 false true
textDecoration 显示中划线、下划线效果 none underline(下划线)、line-through(中划线)

rect (矩形,线条)

属性 含义 默认值 可选值
background 背景颜色 black
top 左上角距离画板顶部的距离
left 左上角距离画板左侧的距离
width 要画多宽 0
height 要画多高 0

Q&A

最佳实践

绘制操作的时候最好 锁住屏幕 ,例如在点击绘制的时候

wx.showLoading({
 title: '绘制分享图片中',
 mask: true
})

绘制完成之后

wx.hideLoading()

具体可以参考项目下的 /pages/multiple

1、二维码和小程序码如何绘制?

  • 二维码和小程序码可以通过调用微信官方的接口产生,需要后端配合。
  • 然后走 type: image 类型进行绘制即可。

2、绘制流程相关

  • views 数组中的顺序代表绘画的先后顺序,会有覆盖的现象。请各位使用者注意。

3、如何实现圆形头像?

  • canvas 中没有绘制圆形图片的方法,所以使用了 hack 的方式来实现的。使用一张中间镂空的图片盖在头像上就可实现当前效果。

4、canvas drawer 组件为什么不直接显示canvas画板和其内容呢?

  • 考虑到大部分场景,我们都是用来把图片保存到本地,或用以展示。
  • 保存到本地,返回临时文件给调用者一定是最佳的解决方式。
  • 展示,转化成图片之后,就可以使用 image 基础组件的所有显示模式了,还能设置宽高。

TIPS

如果有什么疑问,欢迎 issues。 如果觉得不错,能不能送我小 ✨ ✨ ,然我有更多的动力更新。

github:github.com/kuckboy1994…

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
javascript 读取XML数据,在页面中展现、编辑、保存的实现
Oct 27 Javascript
js DOM模型操作
Dec 28 Javascript
解决iframe的frameborder在chrome/ff/ie下的差异
Aug 12 Javascript
javascript判断两个IP地址是否在同一个网段的实现思路
Dec 13 Javascript
删除节点的jquery代码
Jan 13 Javascript
JavaScript编码风格指南(中文版)
Aug 26 Javascript
详解Vue文档中几个易忽视部分的剖析
Mar 24 Javascript
微信小程序开发的基本流程步骤
Jan 31 Javascript
利用layer实现表单完美验证的方法
Sep 26 Javascript
vue路由传参页面刷新参数丢失问题解决方案
Oct 08 Javascript
Vue中keep-alive组件的深入理解
Aug 23 Javascript
vue 实现一个简单的全局调用弹窗案例
Sep 10 Javascript
layui 实现自动选择radio单选框(checked)的方法
Sep 03 #Javascript
Node.js fs模块(文件模块)创建、删除目录(文件)读取写入文件流的方法
Sep 03 #Javascript
layui 点击重置按钮, select 并没有被重置的解决方法
Sep 03 #Javascript
Layui 动态禁止select下拉的例子
Sep 03 #Javascript
解决Layui中layer报错的问题
Sep 03 #Javascript
Layui Table js 模拟选中checkbox的例子
Sep 03 #Javascript
element ui分页多选,翻页记忆的实例
Sep 03 #Javascript
You might like
DISCUZ 论坛管理员密码忘记的解决方法
2009/05/14 PHP
php学习之数据类型之间的转换介绍
2011/06/09 PHP
PHP 自定义错误处理函数trigger_error()
2013/03/26 PHP
php中AES加密解密的例子小结
2014/02/18 PHP
解决laravel id非自增 模型取回为0 的问题
2019/10/11 PHP
js小技巧--自动隐藏红叉叉
2007/08/13 Javascript
JavaScript QueryString解析类代码
2010/01/17 Javascript
javascript中的一些注意事项 更新中
2010/12/06 Javascript
jQuery对下拉框,单选框,多选框的操作
2014/02/21 Javascript
详解JavaScript中的every()方法
2015/06/08 Javascript
[原创]jQuery常用的4种加载方式分析
2016/07/25 Javascript
详解Angular中$cacheFactory缓存的使用
2016/08/19 Javascript
js实时监控文本框输入字数的实例代码
2018/01/18 Javascript
从零开始最小实现react服务器渲染详解
2018/01/26 Javascript
微信小程序将字符串生成二维码图片的操作方法
2018/07/17 Javascript
Flutter部件内部状态管理小结之实现Vue的v-model功能
2019/06/11 Javascript
详解python字节码
2018/02/07 Python
python实现美团订单推送到测试环境,提供便利操作示例
2019/08/09 Python
Python 中list ,set,dict的大规模查找效率对比详解
2019/10/11 Python
Python通过Manager方式实现多个无关联进程共享数据的实现
2019/11/07 Python
python进程的状态、创建及使用方法详解
2019/12/06 Python
Jupyter notebook设置背景主题,字体大小及自动补全代码的操作
2020/04/13 Python
python使用matplotlib:subplot绘制多个子图的示例
2020/09/24 Python
python中绕过反爬虫的方法总结
2020/11/25 Python
python 爬取百度文库并下载(免费文章限定)
2020/12/04 Python
Html5元素及基本语法详解
2016/08/02 HTML / CSS
欧洲高端品牌直销店:Fashionesta
2016/08/31 全球购物
Anthropologie英国:美国家喻户晓的休闲服装和家居产品品牌
2018/12/05 全球购物
英国领先的维生素和营养补充剂直接供应商:Healthspan
2019/04/22 全球购物
经典大学生求职信范文
2014/01/06 职场文书
技术总监管理职责范本
2014/03/06 职场文书
医学生自我鉴定范文
2014/03/26 职场文书
大学生赌博检讨书
2014/09/22 职场文书
贫困生助学金感谢信
2015/01/21 职场文书
班主任培训研修日志
2015/11/13 职场文书
技术入股协议书
2016/03/22 职场文书