现在很多小程序都有生成海报, 分享海报的功能. 我们自己的几个小程序 (如: 爸妈搜商城, 爸妈搜云课堂, 幼师大学, 跟着外教学英语等) 也都有生成海报的功能. 因此技术团队萌生出制作一个简单易用的微信小插件, 只要传入简单图片和对应的坐标值, 就可以拼接成一幅完整的宣传海报.
今天, 我们提交了第一版, 刚刚通过微信审核, 现在让我开始说一说怎么使用我们刚新鲜出炉的小程序插件 -- 「爸妈搜海报 Maker」.
爸妈搜海报
自定义生成海报.
使用方法
1, 在微信小程序管理后台 -- 设置 -- 第三方服务, 按 AppID(wxbf07f0f22c6c200d) 搜索到该插件并申请授权 (ps: 一般不会出现拒绝的情况. 如果申请被拒绝了, 请重新申请, 有时候管理员手抽点错了, 请见谅).
2, 在要使用该插件的小程序 App.JSON 文件中引入插件声明.
- "plugins": {
- "poster": {
- "version": "1.0.0",
- "provider": "wxbf07f0f22c6c200d"
- }
- }
3, 在需要使用到该插件的小程序页面的 JSON 配置文件中, 做以下配置:
- {
- "usingComponents": {
- "poster": "plugin://poster/poster"
- }
- }
4, 在相应的 html 页面中添加以下语句即可完成插件的嵌入.
<poster />
当然, 只有这样, 肯定不行, 还需要给该插件控件传入对应的图片和文字属性.
属性
当前版本, 传入的属性主要有两个: drawing 和 savebtnText:
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
drawing | Array | [] | 画图的数据 |
savebtnText | String | "点击按钮进行图片保存" | 按钮文字信息 |
drawing 参数说明
drawing 数据目前有两种数据类型, 一种是图片信息, 另一种是文字信息.
图片信息
属性名 | 类型 | 值 | 说明 |
---|---|---|---|
type | String | image | 图片类型 |
url | String | 图片路径,为线上图片 | |
left | Number | 距离画布的左边距 | |
top | Number | 距离画布的顶部距离 | |
width | Number | 绘画图片的宽度 | |
height | Number | 绘画图片的高度 | |
circle | Boolean | true、false | 是否是绘制圆形,默认为 false |
文字信息
属性名 | 类型 | 值 | 说明 |
---|---|---|---|
type | String | text | 文字类型 |
content | String | 绘图的文字内容 | |
left | Number | 距离画布的左边距 | |
top | Number | 距离画布的顶部距离 | |
width | Number | 文字绘画的宽度 | |
color | String | 文字信息 | |
textAlign | String | 文字水平对齐方式 | |
fontSize | Number | 默认为 26 rpx | 文字大小 |
其中, textAlign 参数:
属性名 | 类型 | 说明 |
---|---|---|
left | String | 左对齐 |
center | String | 居中对齐 |
right | String | 右对齐 |
如图:
实例
页面传入的控件简单明了:
- <poster
- drawing='{{drawing}}'
- savebtnText='{{savebtnText}}'
- canvas-style='canvas-style'
- savebtn-style='savebtn-style' />
我们接着看传入的参数:
- Page({
- data: {
- drawing: [
- ],
- savebtnText: '点击按钮, 保存图片'
- },
- onLoad: function () {
- wx.showLoading({
- title: '绘图中..'
- })
- },
- onShow: function () {
- this.setData({
- drawing: [
- {
- type: 'image',
- url: 'https://i.loli.net/2018/10/30/5bd85117675b3.png',
- left: 0,
- top: 0,
- width: 650,
- height: 960,
- },
- {
- type: 'image',
- url: 'https://wx.qlogo.cn/mmopen/vi_32/M8cK5rMR16udYRpanaZiaYz2KHgibVVHhFqG01h3rZUAGDKQerZwNv9baVDeNicjZ1bZzs4hUribjLX9bNaAmhia7pQ/132',
- left: 72,
- top: 53,
- width: 78,
- height: 75,
- },
- {
- type: 'text',
- content: '咖啡',
- fontSize: 26,
- color: 'white',
- textAlign: 'left',
- left: 170,
- top: 50,
- width: 650,
- },
- {
- type: 'text',
- content: '这里是小程序码',
- fontSize: 30,
- color: 'red',
- textAlign: 'left',
- left: 390,
- top: 720,
- width: 200
- },
- {
- type: 'image',
- url: 'https://i.loli.net/2018/10/30/5bd851175ce40.jpg',
- left: 388,
- top: 660,
- width: 190,
- height: 190,
- circle: true
- }
- ]
- })
- }
- })
样式也很简单:
类名 | 说明 |
---|---|
canvas-style | 画布样式样式 |
savebtn-style | 按钮样式 |
- /* 画布样式 */
- .canvas-style{
- width: 650rpx !important;
- height: 960rpx !important;
- margin: 0 auto;
- border: 1px solid orangered;
- margin-top: 10rpx;
- }
- /* 保存图片按钮样式 */
- .savebtn-style{
- height: 70rpx;
- line-height: 70rpx;
- }
注意: 样式的优先级!
好了, 我们可以看看效果了
总结
这是我们团队做的第三个微信小插件, 每个插件制作的标准就是, 把复杂的逻辑交给我们来做.
使用者只要简单的引入, 用最便捷的输入参数, 以达到最好的效果.
来源: https://juejin.im/post/5bd8605f6fb9a05d1a13272a