小程序–Painter画布实现短讯(如24小时动态)的分享和海报生成 …

小程序–Painter画布实现短讯(如24小时动态)的分享和海报生成 …

2021-08-13 288
下载不了?请联系网站客服提交链接错误!
增值服务:
小程序–Painter画布实现短讯(如24小时动态)的分享和海报生成 …
最近更新 2021年08月13日
资源编号 86675

小程序–Painter画布实现短讯(如24小时动态)的分享和海报生成 …

2021-08-13 小程序教程 0 288 百度已收录
限时活动VIP只需20元
增值服务:
¥ 0 钻石 开通VIP尊享优惠特权
立即下载 升级会员
详情介绍

Painter这个小程序画布组件应该很多人在用,github上超3K的star就已经说明这个组件的强大了。这里我们用这个组件实现短讯(如24小时动态)的分享和海报生成。

效果

图二生成的图片,也是分享出去的效果,可以点击分享跳转到短讯的详情即可,分享到群如下:

介绍

Painter组件地址:https://github.com/Kujiale-Mobile/Painter

可以通过源代码看一下组件的实现方式,其实Painter的readMe里面已经把组件的实现方式描述的很详细了,组件接收json格式,然后通过pen.js(画笔)画出json格式不同类型(文本、图片、矩形、qrcode )的view绘制,这种方式设计巧妙,对于很多复杂的情况需求都能满足。而且代码完善,优化调整也很方便。

Painter提供的工具能够将json数据直接转换效果,方便调试,链接地址:

链接1:https://painterjs.github.io/

链接2:https://lingxiaoyi.github.io/painter-custom-poster/

我们上面短讯的效果,只需利用Painter封装两个组件,一个用于分享,一个用于生成海报,控制两个组件显示隐藏即可。通过按钮传递标题、时间、标签、内容等信息,并通过组件接收,然后拼装json文件传递给Painter组件。

<!-- 分享绘图组件 -->
<share-box wx:if=\"{{isCanDraw}}\" isCanDraw=\"{{isCanDraw}}\" time=\"{{timeShare}}\" source=\"{{sourceShare}}\" id=\"{{idShare}}\" title=\"{{titleShare}}\"  content=\"{{contentShare}}\" bind:close=\"handleClose\"  bind:initData=\"initData\" bind:createPoster=\"createPoster\"/>

<!-- 海报组件 -->
<poster-box isPoster=\"{{isPoster}}\" time=\"{{timeShare}}\" source=\"{{sourceShare}}\" id=\"{{idShare}}\" title=\"{{titleShare}}\"  content=\"{{contentShare}}\" bind:closePoster=\"handleClosePoster\"/>

此外,我们利用lin-ui实现了日期的吸顶效果(备:lin-ui对于吸顶效果的封装很易用,可以尝试一下)、内容展示的卡片效果,不再赘述,详细实现可直接查看下面的代码地址。

代码

github地址:https://github.com/dumplingbao/wx_demo.git

blog地址:https://dumplingbao.github.io/2021/08/03/wx-painter/

资源下载此资源仅限注册用户下载,请先

1、本站赞助VIP,仅需【128】元即可 ! ! ! (赞助后永久享受整站资源全部免费下载)
2、站内资源均可通过签到等任务进行免费兑换。(鼓励大家签到)
3、站内资源均来源于网络公开发表文件或网友投稿发布,如侵犯您的权益,请联系管理员处理。
4、本站所分享的源码、模板、软件工具等其他资源,都不包含技术服务,请大家谅解!
5、所有资源均收集于互联网仅供学习、参考和研究,请理解这个概念,所以不能保证每个细节都符合你的需求,也可能存在未知的BUG与瑕疵,因本站资源均为可复制品,所以不支持任何理由的退款兑现(特殊情况可退积分),请熟知后再赞助下载!收取的费用只为能长期与大家分享学习,本站为非商业性网站,纯属个人爱好!

K4资源 小程序教程 小程序–Painter画布实现短讯(如24小时动态)的分享和海报生成 … https://www.k4sc.com/86675.html

相关文章

评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务