专注连锁门店会员营销管理系统
线上+线下+进销存+收银+会员2020-09-27 作者:秩名
由于我们无法将小程序直接分享到朋友圈,但分享到朋友圈的需求目前又很多,业界目前的做法是利用小程序的 Canvas 功能生成一张带有二维码的图片,然后引导用户下载图片到本地后再分享到朋友圈。而小程序 Canvas 功能是很难用的,往往为了绘制一张简单图片,就得写上一堆 boilerplate code 。如果此时一个小程序中包含多个绘图的需求,那绝壁要疯。另外 Canvas 上有很多绘图的坑,肯定会让你疯上加疯。
这边说上几个小程序 Canvas 的坑:
1, Canvas 绘图是用的 px,而在小程序中我们一般使用 rpx 进行相对布局。
2,小程序的 drawCanvas 方法,在 IDE 中可以直接设置网络图片进行绘制,但在真机上设置网络图片无用。
3,canvasContext.clip 方法在 iOS 设备上 微信 6.6.6 版本及以下有 bug,会导致该 clip 下面使用的的 restore 方法失效。
画家计划
想到小程序中有如此大量的生成图片需求,而 Canvas 生成方法又是如此难用和坑爹。那我们就想到可不可以做一款可以很方便生成图片的库,而且还能屏蔽掉直接使用 Canvas 的那些坑呢。所以我们发起了 “画家计划— 通过 json 数据形式,来进行动态渲染并绘制出图片”。
首先,我们定义了一套绘图 JSON 规范,开发者可以根据需求构建生成图片的 Palette(调色板),然后在程序运行过程中把调色板传入给 Painter(画家)。Painter 会调用 Pen(画笔),根据 Palette 内容绘制出对应的图片后返回。
因该项目为 submodule 管理方式。首次 clone 代码时,需加上 --recursive
参数。
git clone https://github.com/Kujiale-Mobile/Painter.git --recursive
代码下载后,用小程序 IDE 打开后即可使用。
引入代码
可以在主项目下执行以下命令,通过 submodule 的方式引入 painter 组件。建议是在 components 目录下。
git submodule add https://github.com/Kujiale-Mobile/PainterCore.git painter
作为自定义组件引入,注意目录为第一步引入的代码所在目录
"usingComponents":{
"painter":"/components/painter/painter"
}
组件接收 palette
字段作为画图数据的数据源, 图案数据以json形式存在,推荐使用“皮肤模板”的方法进行传递,示例代码如下:
数据传入后,则会自动进行绘图。绘图完成后,你可以通过绑定 imgOK 或 onImgErr 事件来获得成功后的图片 或失败的原因。
bind:imgOK="onImgOK"
bind:imgErr="onImgErr"
如你使用 wxss + wxml 规范进行绘制一样,Painter 需要根据一定的规范来进行图片绘制。当然 Painter 的绘制规范要比 wxml 简单很多。
一个调色板首先需要给予一些整体属性
background: 可以是颜色值,也可以为网络图片的链接,默认为白色
width: 宽度
height: 高度
borderRadius: 边框的圆角(该属性也同样适用于子 view)
views: 里面承载子 view
当我们把整体的调色板属性构建起来后,里面就可以添加子 View 来进行绘制了。
type | content | description | 自有css |
---|---|---|---|
image | url | 表示图片资源的地址,本地或网络 | |
text | text | 文本的内容 | fontSize: 文字大小,color: 字体颜色(默认为黑色) |
rect | 无 | 矩形 | color: 颜色 |
qrcode | content | 画二维码 | background: 背景颜色(默认为透明色), |
以上 View ,除去自己拥有的特别属性外,还有以下的通用布局属性
属性 | 意义 |
---|---|
rotate | 旋转,按照顺时针旋转的度数,默认不旋转 |
borderRadius | 边界圆角程度,如果是正方形布局,该属性为一半宽或高时,则为圆形 |
top、right、bottom、left | 如 css 中为 absolute 布局时的作用,默认 top 和 left 为 0 |
1,目前 Painter 中支持两种尺寸单位,px 和 rpx,代表的意思和小程序中一致,此处就不多说。
2,目前子 view 的 css 属性支持 object 或 array。所以意味着,你可以把几个子 view 共用的 css 属性提取出来。做到让 Palette 更加简洁。
3,因为我们的 palette 是以 js 承载的 json,所以意味着你可以在每一个属性中很方便的加上自己的逻辑。也可以把某些属性单独提取出来,让多个 palette 共用,做到模块化。
{
background: '#eee',
width: '654rpx',
height: '400rpx',
borderRadius: '20rpx',
views: [
{
type: 'image',
url: 'https://qhyxpicoss.kujiale.com/r/2017/12/04/L3D123I45VHNYULVSAEYCV3P3X6888_3200x2400.jpg@!70q',
css: {
top: '48rpx',
right: '48rpx',
width: '192rpx',
height: '192rpx',
},
}
],
}
HiShop小程序工具提供多类型商城/门店小程序制作,可视化编辑 1秒生成5步上线。通过拖拽、拼接模块布局小程序商城页面,所看即所得,只需要美工就能做出精美商城。更多小程序商店请查看:小程序商店
线上+线下+进销存+收银+会员门店零售管理好帮手
门店能实现快速收银,提升门店经营效率。
系统自带进销存管理,更好管理库存销售。
配备收银硬件一站式整体服务。
收 银 会员管理 库存管理 商品管理 交接班 数据报表 营销促单 售后处理 多种收款
获取报价推荐文章
最新消息总结,开发一个小程序我们可以选择的第三方框架有5种,大家比较熟悉的有美团小程序框架mpvue,还有组件化框架等...
最近在调研小程序的分享能力,本篇文档主要是调研小程序关于分享方面的玩法,目的是学习小程序在项目应用以及玩法链上...
许多人在使用小程序,会有一个很麻烦的事情,就是使用过小程序之后,会不断的发送自己的定位消息,那么这个小程序的...
一款小程序,很多时候需要调用内置的照相机,实现拍照并图片上传,那么要如何实现呢?...
2024年怎样开加盟连锁店第七步(建立品牌知名度) 建立品牌知名度是成功创建一个加盟连锁品牌的关键步骤。一个强大的品...
2024年怎样开加盟连锁店第三步(开发一个详细的加盟手册) 加盟手册的重要性 加盟手册是加盟连锁品牌成功的基础组成部分...
在零售行业,线上线下一体化营销已经成为企业提升竞争力的关键策略。根据9的分析,2024年中国零售行业的数字化转型正在...
在数字化转型的浪潮中,线上线下推广方案已成为零售企业连接顾客、提升销售的关键策略。友数连锁,作为HiShop推出的新零...
星巴克的线上线下营销策略 星巴克作为全球知名的咖啡连锁品牌,一直在线上线下营销领域走在前列。以下是星巴克如何通...
在数字化时代,线上线下相结合的营销模式已成为零售行业的新常态,它通过整合线上电商平台和线下实体店铺的资源,为消...