作者：诗人的咸鱼 原文：小程序生成分享海报，一个json就够了。同时支持web Fundebug经授权转载，版权归原作者所有。 需求 在项目里写过几个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

小程序消息推送formId生成多个

我这边给你写一个简单的案例吧。 文件一 app.js [代码]//app.js[代码][代码]App({[代码][代码]  [代码][代码]onLaunch: [代码][代码]function[代码] [代码]() {[代码][代码]  [代码][代码]},[代码][代码]    [代码][代码]cache: {[代码][代码]        [代码][代码]getuserid: [代码][代码]function[代码] [代码]() {[代码][代码]            [代码][代码]return[代码] [代码]wx.getStorageSync([代码][代码]'loginuserid'[代码][代码]);[代码][代码]        [代码][代码]}[代码][代码]    [代码][代码]},[代码][代码]    [代码][代码]wx:{[代码][代码]        [代码][代码]request_post: [代码][代码]function[代码] [代码](url, data) {[代码][代码]            [代码][代码]return[代码] [代码]new[代码] [代码]Promise([代码][代码]function[代码] [代码](resolve, reject) {[代码][代码]                [代码][代码]wx.request({[代码][代码]                    [代码][代码]url: url,[代码][代码]                    [代码][代码]data: data,[代码][代码]                    [代码][代码]method: [代码][代码]'POST'[代码][代码],[代码][代码]                    [代码][代码]header: { [代码][代码]"Content-Type"[代码][代码]: [代码][代码]"application/x-www-form-urlencoded"[代码] [代码]},[代码][代码]                    [代码][代码]success: [代码][代码]function[代码] [代码](res) {[代码][代码]                        [代码][代码]resolve(res)[代码][代码]                    [代码][代码]},[代码][代码]                    [代码][代码]fail: [代码][代码]function[代码] [代码](err) {[代码][代码]                        [代码][代码]reject(err)[代码][代码]                    [代码][代码]}[代码][代码]                [代码][代码]});[代码][代码]            [代码][代码]});[代码][代码]        [代码][代码]}[代码][代码]    [代码][代码]}[代码][代码]})[代码] 文件二 helper.js [代码]//utils/helper.js[代码][代码]var[代码] [代码]app = getApp();[代码][代码]function[代码] [代码]weixinauth() {[代码][代码]    [代码][代码]return[代码] [代码]new[代码] [代码]Promise([代码][代码]function[代码] [代码](resolve, reject) {[代码][代码]        [代码][代码]if[代码] [代码](app.cache.getuserid() > 0) {[代码][代码]            [代码][代码]resolve([代码][代码]"无需登录"[代码][代码])[代码][代码]        [代码][代码]} [代码][代码]else[代码] [代码]{[代码][代码]            [代码][代码]wx.login({[代码][代码]                [代码][代码]success: [代码][代码]function[代码] [代码](res) {[代码][代码]                    [代码][代码]if[代码] [代码](!res.code)[代码][代码]                        [代码][代码]return[代码][代码];[代码][代码]                    [代码][代码]//##################################[代码][代码]                    [代码][代码]app.wx.request_post([代码][代码]'https://api.xxx.com/api/weixin/auth'[代码][代码], {[代码][代码]                        [代码][代码]code: res.code,[代码][代码]                    [代码][代码]}).then([代码][代码]function[代码] [代码](res) {[代码][代码]                        [代码][代码]wx.setStorageSync([代码][代码]"loginuserid"[代码][代码], res.data.userid);[代码][代码]                        [代码][代码]resolve(res.data)[代码][代码]                    [代码][代码]}).[代码][代码]catch[代码][代码]([代码][代码]function[代码] [代码](err) {[代码][代码]                        [代码][代码]reject(err.data)[代码][代码]                    [代码][代码]})[代码][代码]                    [代码][代码]//##################################[代码][代码]                [代码][代码]}[代码][代码]            [代码][代码]});[代码][代码]        [代码][代码]}[代码][代码]        [代码][代码]//##################################[代码][代码]    [代码][代码]});[代码][代码]}[代码][代码]module.exports.weixinauth = weixinauth;[代码] 文件三 index.js-------就是需要登录页面的调用 [代码]// pages/index.js[代码][代码]var[代码] [代码]helper = require([代码][代码]"../utils/helper.js"[代码][代码])[代码][代码]var[代码] [代码]that;[代码][代码]var[代码] [代码]app = getApp();[代码][代码]Page({[代码][代码]  [代码][代码]data: {[代码][代码]  [代码] [代码]  [代码][代码]},[代码][代码]    [代码][代码]onLoad: [代码][代码]function[代码] [代码](options) {[代码][代码]        [代码][代码]that = [代码][代码]this[代码][代码];[代码][代码]        [代码][代码]helper.weixinauth().then([代码][代码]function[代码] [代码](resdata) {[代码][代码]            [代码][代码]console.log([代码][代码]"resdata"[代码][代码]);[代码][代码]            [代码][代码]that.GoLoad();[代码][代码]        [代码][代码]}).[代码][代码]catch[代码][代码]([代码][代码]function[代码] [代码](errdata) {[代码][代码]            [代码][代码]console.log([代码][代码]"errdata"[代码][代码]);[代码][代码]        [代码][代码]})[代码][代码]  [代码][代码]},[代码][代码]    [代码][代码]GoLoad:[代码][代码]function[代码][代码](){[代码][代码]        [代码][代码]//这里写加载页面的方法[代码][代码]        [代码][代码]var[代码] [代码]userid = app.cache.getuserid();[代码][代码]        [代码][代码]console.log([代码][代码]"GoLoad"[代码][代码]);[代码][代码]    [代码][代码]}[代码][代码]})[代码]

1. new Date跨平台兼容性问题在Andriod使用[代码]new Date(“2018-05-30 00:00:00”)[代码]木有问题，但是在ios下面识别不出来。 因为IOS下面不能识别这种格式，需要用[代码]2018/05/30 00:00:00[代码]格式。可以使用正则表达式对做字符串替换，将短横替换为斜杠。[代码]var iosDate= date.replace(/-/g, '/');[代码]。 2. wx.getUserInfo()接口更改问题微信小程序最近被吐槽最多的一个更改，就是用户使用wx.getUserInfo（开发和体验版）时不会弹出授权，正式版不受影响。现在授权方式是需要引导用户点击一个授权按钮，然后再弹出授权。 解法很长，请参考: 解法1：微信小程序不支持wx.getUserInfo授权的解决方法 解法2：getUserInfo兼容解决方案 3. 只有在调试模式下，才能发送数据到自己的正式服务器其实，只要注意配置合法域名，这个问题就解决了。有的时候，因为一上来就开发，忘记掉去配置域名。后来发现数据没法出去，可能半天没想来忘记配置了！ 4. 无法获取UnionID的问题login获取UID必须满足两个条件： 1、把小程序和公众号都绑定在开放平台； 2、用户必须已经关注公众号。 用wx.getUserInfo获取满足一个条件：把小程序和公众号都绑定在开放平台； 5. wx.getSystemInfoSync获取windowHeight不准确主要原因在于获取是时机，wx.getSystemInfoSync是在页面初始化的时候就计算了，基本上可以理解为是屏幕高度。所以，最好的方法是使用异步接口，并且在onReady函数中调用。 [代码]onReady() {  wx.getSystemInfo({    success({windowHeight}) {      // todo    }  }); }[代码]6. 图片本地资源名称，尽量使用小写命名在解决iPhone X适配时，底部多余部分使用图片时 [代码]<image class='iphonexImg' src="/imgs/iphoneBGT.png" mode="aspectFill">image>[代码] 路径是 [代码]src='imgs/iphoneBGT.png'[代码] 发现在pc IDE上面可以显示出来，但是真机调试时，图片找不到， 然后将图片名称改为iphonex.png真机调试就可以了 [代码]<image class='iphonexImg' src="/imgs/iphonex.png" mode="aspectFill">image>[代码] 写在最后：代码总是有各种bug，像上面列举的问题还是在开发中就可以发现。而代码上线以后呢，测试也不能保证100%没有问题。 在这里，推荐Fundebug的小程序bug监控服务给各位老铁！ 关于Fundebug2017年初，小程序还刚上线，Fundebug就支持小程序错误监控了。做为最早的小程序错误监控服务的拓荒者，累计为数千个小程序提供免费服务，累计处理数千万小程序错误。