微信小程序:一个json帮你完成分享朋友圈图片

写在前面


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

演示


微信小程序:一个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 是需要传入的 jsongetImage 方法是绘图完成之后的回调函数,在 event.detail 中返回绘制完成的图片地址。

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

API


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

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

image(图片)

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

text(文本)

属性 含义 默认值 可选值
content 绘制的图片地址 ''(空字符串)
color 颜色 black
fontSize 字体大小 16
textAlign 文字对齐方式 left center,right
lineHeight 行高,只有在多行文本中才有用 20

rect (矩形,线条)

属性 含义 默认值 可选值
background 背景颜色 black
top 左上角距离画板顶部的距离
left 左上角距离画板左侧的距离 16
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 基础组件的所有显示模式了,还能设置宽高。

推荐教程:《微信小程序

以上就是微信小程序:一个json帮你完成分享朋友圈图片的详细内容,更多请关注立业阁其它相关文章!

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服![email protected] 2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理,有奖励! 3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负! 4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有站币奖励和额外收入!

立业阁 微信小程序教程 微信小程序:一个json帮你完成分享朋友圈图片 https://www.liyege.cn/wxxcxygjbnwcfxpyqtp.html

常见问题
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情
  • 最常见的情况是下载不完整, 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘
查看详情

相关文章