hi,你好!欢迎访问本站!登录
本站由简数采集腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - 文章 - 小程序 - 正文 君子好学,自强不息!

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

2020-06-13小程序ki4网5°c
A+ A-
写在前面

近来在做小程序,发明制造分享到朋友圈图片是每一个项目必需的。碰到坑比较多,写起来也比较烦琐,也没有找到相似组件,所以就本身着手写了一个。

演示

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

特征

  • 简朴易用 —— 一个 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帮你完成分享朋友圈图片的细致内容,更多请关注ki4网别的相干文章!

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
微信小程序:一个json帮你完成分享朋友圈图片_微信小程序

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
标签:

发表评论

选填

必填

必填

选填

请拖动滑块解锁
>>