小程序转| 小程序生成海报需求 在项目里写过几个canvas生成分享海报页面后,觉得这是个重复且冗余的工作.于是就想有没有能通过类似json直接生成海报的库. 然后就在github找到到两个项目: wxa-plugin-canvas,不太喜欢配置文件的写法.就没多去了解 mp_canvas_drawer,使用方式就比较符合直觉,不过可惜功能有点少. 然后就想着能不能自己再造个轮子.于作者王明昌发布时间2019-07-10最后更新2019-07-10文章目录需求json2canvas canvas绘制海报,写个json就够了.功能示例小程序安装效果图问题反馈需求 在项目里写过几个canvas生成分享海报页面后,觉得这是个重复且冗余的工作.于是就想有没有能通过类似json直接生成海报的库. 然后就在github找到到两个项目: wxa-plugin-canvas,不太喜欢配置文件的写法.就没多去了解mp_canvas_drawer,使用方式就比较符合直觉,不过可惜功能有点少. 然后就想着能不能自己再造个轮子.于是就有了这个项目 json2canvas,你可以简单的理解为是mp_canvas_drawer的增强版吧. json2canvas canvas绘制海报,写个json就够了.项目的canvas绘制是基于cax实现的.所以天然的带来一个好处,json2canvas同时支持小程序和web功能支持缩放. 如果设计稿是750,而画布只有375时.你不需要任何换算,只需要将scale设置为0.5即可.支持文本(长文本自动换行,感谢 coolzjy@v2ex 提供的正则 https://regexr.com/4f12l ,优化了换行的计算方式(不会粗暴的折断单词))支持图片(圆角)支持圆型,矩形,矩形圆角支持分组(cax里很好用的一个功能)同时支持小程序和web示例web-demo 界面左边的json,可以进行编辑,直接看效果哟~小程序-demo复制git clone https://github.com/willnewii/json2canvas.git 微信开发者工具导入项目 example/weapp/ 小程序安装复制npm i json2canvas 微信开发者工具->工具->构建npm 在需要使用的界面引入Component 复制{ "usingComponents": { "json2canvas":"/miniprogram_npm/json2canvas/index" } } 效果图 想要生成一个这样的海报,需要怎么做？(红框是图片元素,蓝框是文字元素,其余的是一张背景图。) 一个json就搞定.具体支持的元素和参数,请查看项目readme复制{ "width": 750, "height": 1334, "scale": 0.5, "children": [ { "type": "image", "url": "http://res.mayday5.me/wxapp/wxavatar/tmp/bg_concerts_1.jpg", "width": 750, "height": 1334 }, { "type": "image", "url": "http://res.mayday5.me/wxapp/wxavatar/tmp/wxapp_code.jpg", "width": 100, "x": 48, "y": 44, "isCircular": true, }, { "type": "circle", "r": 50, "lineWidth": 5, "strokeStyle": "#CCCCCC", "x": 48, "y": 44, }, { "type": "text", "text": "歌词本", "font": "30px Arial", "color": "#FFFFFF", "x": 168, "y": 75, "shadow": { "color": "#000", "offsetX": 2, "offsetY": 2, "blur": 2 } }, { "type": "image", "url": "http://res.mayday5.me/wxapp/wxavatar/tmp/medal_concerts_1.png", "width": 300, "x": "center", "y": 361 }, { "type": "text", "text": "一生活一场 五月天", "font": "38px Arial", "color": "#FFFFFF", "x": "center", "y": 838, "shadow": { "color": "#000", "offsetX": 2, "offsetY": 2, "blur": 2 } }, { "type": "text", "text": "北京6场，郑州2场，登船，上班，听到你想听的歌了吗？", "font": "24px Arial", "color": "#FFFFFF", "x": "center", "y": 888, "shadow": { "color": "#000", "offsetX": 2, "offsetY": 2, "blur": 2 } }, { "type": "rect", "width": 750, "height": 193, "fillStyle": "#FFFFFF", "x": 0, "y": "bottom" }, { "type": "image", "url": "http://res.mayday5.me/wxapp/wxavatar/tmp/wxapp_code.jpg", "width": 117, "height": 117, "x": 47, "y": 1180 }, { "type": "text", "text": "长按识别小程序二维码", "font": "26px Arial", "color": "#858687", "x": 192, "y": 1202 }, { "type": "text", "text": "加入五月天 永远不会太迟", "font": "18px Arial", "color": "#A4A5A6", "x": 192, "y": 1249 }] } 问题反馈 有什么问题可以直接提issue
2018-12-09小程序 | 在首页判断是否登录并跳转到登陆界面login //index.js import { config } from '../../config.js' Page({ /** * 页面的初始数据 */ data: { //判断小程序的AP
2019-07-22小程序判断是否包含某个字符（数组和字符串）console.log(['x', 'a'].indexOf('a')); // 1 console.log('dbac'.indexOf('aa')); // -1
2018-12-09小程序 | 在首页判断是否登录并登陆执行index.wxml //其他业务 我知道了 index.js import { config } from '../../config.js' // pages/index/index.js Pag
2018-10-07小程序组件 | mask遮罩层组件定义组件 wxml: wxss .container{ background-color: #000; position: fixed; top: 0; opacity: 0.6; width: 10
2018-12-09微信小程序 form表单input变化时自动搜索index.wxml 搜索 取消 index.js inputTyping: function (e) { var title = e.detail.value; console.log(e) //
2018-12-09小程序 | 小程序中使用关注公众号功能实现在小程序中显示公众号,点击后进行关注 使用组件 使用说明 使用组件前，需前往小程序后台，在“设置”->“接口设置”->“公众号关注组件”中设置要展示的公众号。 注：设置的公众号需与小程序主体一致。