之前的插件类目没有了导致搜不到了，重新发个文章。 image-cropper 一款高性能的小程序图片裁剪插件，支持旋转。 [图片] 优势 [代码]1.功能强大。[代码] [代码]2.性能超高超流畅，大图毫无卡顿感。[代码] [代码]3.组件化，使用简单。[代码] [代码]4.点击中间窗口实时查看裁剪结果。[代码] ㅤ 初始准备 1.json文件中添加image-cropper [代码] "usingComponents": { "image-cropper": "../image-cropper/image-cropper" }, "navigationBarTitleText": "裁剪图片", "disableScroll": true [代码] 2.wxml文件 [代码]<image-cropper id="image-cropper" limit_move="{{true}}" disable_rotate="{{true}}" width="{{width}}" height="{{height}}" imgSrc="{{src}}" bindload="cropperload" bindimageload="loadimage" bindtapcut="clickcut"></image-cropper> [代码] 3.简单示例 [代码] Page({ data: { src:'', width:250,//宽度 height: 250,//高度 }, onLoad: function (options) { //获取到image-cropper实例 this.cropper = this.selectComponent("#image-cropper"); //开始裁剪 this.setData({ src:"https://raw.githubusercontent.com/1977474741/image-cropper/dev/image/code.jpg", }); wx.showLoading({ title: '加载中' }) }, cropperload(e){ console.log("cropper初始化完成"); }, loadimage(e){ console.log("图片加载完成",e.detail); wx.hideLoading(); //重置图片角度、缩放、位置 this.cropper.imgReset(); }, clickcut(e) { console.log(e.detail); //点击裁剪框阅览图片 wx.previewImage({ current: e.detail.url, // 当前显示图片的http链接 urls: [e.detail.url] // 需要预览的图片http链接列表 }) }, }) [代码] 参数说明 属性 类型 缺省值 取值 描述 必填 imgSrc String 无 无限制 图片地址(如果是网络图片需配置安全域名) 否 disable_rotate Boolean false true/false 禁止用户旋转(为false时建议同时设置limit_move为false) 否 limit_move Boolean false true/false 限制图片移动范围(裁剪框始终在图片内)(为true时建议同时设置disable_rotate为true) 否 width Number 200 超过屏幕宽度自动转为屏幕宽度 裁剪框宽度 否 height Number 200 超过屏幕高度自动转为屏幕高度 裁剪框高度 否 max_width Number 300 裁剪框最大宽度 裁剪框最大宽度 否 max_height Number 300 裁剪框最大高度 裁剪框最大高度 否 min_width Number 100 裁剪框最小宽度 裁剪框最小宽度 否 min_height Number 100 裁剪框最小高度 裁剪框最小高度 否 disable_width Boolean false true/false 锁定裁剪框宽度 否 disable_height Boolean false true/false 锁定裁剪框高度 否 disable_ratio Boolean false true/false 锁定裁剪框比例 否 export_scale Number 3 无限制 输出图片的比例(相对于裁剪框尺寸) 否 quality Number 1 0-1 生成的图片质量 否 cut_top Number 居中 始终在屏幕内 裁剪框上边距 否 cut_left Number 居中 始终在屏幕内 裁剪框左边距 否 [代码]img_width[代码] Number 宽高都不设置，最小边填满裁剪框 支持%(不加单位为px)(只设置宽度，高度自适应) 图片宽度 否 [代码]img_height[代码] Number 宽高都不设置，最小边填满裁剪框 支持%(不加单位为px)(只设置高度，宽度自适应) 图片高度 否 scale Number 1 无限制 图片的缩放比 否 angle Number 0 (limit_move=true时angle=n*90) 图片的旋转角度 否 min_scale Number 0.5 无限制 图片的最小缩放比 否 max_scale Number 2 无限制 图片的最大缩放比 否 bindload Function null 函数名称 cropper初始化完成 否 bindimageload Function null 函数名称 图片加载完成,返回值Object{width,height,path,type等} 否 bindtapcut Function null 函数名称 点击中间裁剪框,返回值Object{src,width,height} 否 函数说明 函数名 参数 返回值 描述 参数必填 upload 无 无 调起wx上传图片接口并开始剪裁 否 pushImg src 无 放入图片开始裁剪 是 getImg Function(回调函数) [代码]Object{url,width,height}[代码] 裁剪并获取图片(图片尺寸 = 图片宽高 * export_scale) 是 setCutXY X、Y 无 设置裁剪框位置 是 setCutSize width、height 无 设置裁剪框大小 是 setCutCenter 无 无 设置裁剪框居中 否 setScale scale 无 设置图片缩放比例（不受min_scale、max_scale影响） 是 setAngle deg 无 设置图片旋转角度（带过渡效果） 是 setTransform {x,y,angle,scale,cutX,cutY} 无 图片在原有基础上的变化(scale受min_scale、max_scale影响) 根据需要传参 imgReset 无 无 重置图片的角度、缩放、位置(可以在onloadImage回调里使用) 否 GitHub https://github.com/wx-plugin/image-cropper/tree/master 如果有什么好的建议欢迎提issues或者提pr

如题，js代码如下 page({ data:{ list:[{a:1,b:2,c:3},{a:12,b:22,c:32},{a:13,b:23,c:33}], test:{aa:1,bb:2,cc:3} }, jian(e){ let i = e.currentTarget.dataset.index let that = this let currentDysl = `list[${i}].a` this.setData({ [currentDysl]:parseInt(that.data.list[i].a) - 1 }) }, jia(e){ this.setData({ ['test.aa']:22 }) } })

效果展示 先上图，有图有真相。 [图片] 需求实现分析 需求：根据打卡天数进行排序，实现累积排行榜，查询前100名。 这里涉及到两张表：用户表，打卡记录表 实现思路 用户表和打卡记录表通过openid进行联合查询 统计每个用户到打卡次数 根据次数进行排序 查询前100名 代码实现 根据以上思路实现代码如下： exports.main = async (event, context) => { // 获取操作符 const $ = db.command.aggregate // 用户表和打卡记录表联合查询 let res = await db.collection(‘用户表’).aggregate() .lookup({ from: ‘打卡记录表’, localField: ‘_openid’, foreignField: ‘_openid’, as: ‘list’, }) // 统计每个人打卡次数 .project({ userInfo:1, _openid:1, size: $.size(’$list’) }) // 进行排序 .sort({ size: -1, }) // 限制100名 .limit(100) .end() return res } 总结 这里面用到了4个关键函数：lookup、project、sort、limit。 lookup：官方文档传送门 project：官方文档传送门 sort：官方文档传送门 limit：官方文档传送门

云开发·云调用生成小程序码 小程序云开发已经支持云调用，开放了很多接口，一直想要的获取小程序码也支持了。这下轻量的小程序也可以有自定义小程序码的功能。 1. 需求 获得一个带参数的小程序码，传播出去以后，用户扫码进入指定页面，根据参数做不同的处理。本文只讲小程序码生成、存储、展示部分。参数处理不多介绍，可以查看 项目代码 了解更多。 2. 开通云开发 新建小程序可以从开发工具的云开发模板初始化项目，根据云开发操作指引新建项目即可。 但是这里有个问题，已发布小程序的页面才能生成小程序码。如果现有的小程序没有开通云开发，需要做以下几步： 开发工具开通云开发，设定云开发的环境； 将原来的代码（除了[代码]project.config.json[代码]以外的所有文件）放到新建的 [代码]miniprogram[代码] 目录； 新增 [代码]cloudfunctions[代码] 目录； [代码]app.json[代码] 新增配置 [代码]"cloud": true[代码]； [代码]project.config.json[代码] 配置 [代码]"miniprogramRoot":"miniprogram/"[代码] 和 [代码]"cloudfunctionRoot":"cloudfunctions/"[代码]； 修改小程序基础库版本，最低要 2.3.0 [代码]"libVersion": "2.3.0"[代码]。 3. 生成小程序码 下面可以开始写代码开发了，开始之前，建议先看完官方教程。特别是开发工具的使用步骤，开发和调试时如果遇到奇怪的问题，可以尝试重启开发工具、重装开发工具，也可以去微信开放社区发帖。(重启和重装都是我在社区中发现的答案，能解决各种不应该存在的问题)。 3.1 准备文件 在 [代码]cloudfunctions[代码]目录右键新建Node.js云函数 [代码]getqr[代码]。 生成小程序码需要单独指定权限。在 [代码]getqr[代码] 目录新建 [代码]config.json[代码] ，里面写以下内容： [代码]{ "permissions": { "openapi": [ "wxacode.getUnlimited" ] } } [代码] 小程序码的获取方式有三种，这里只用到了接口 getUnlimited，选择这个接口的原因是漂亮的圆形小程序码，数量无限制。具体区别可以去 获取小程序码官方文档查看详情。 正常情况下，这个时候云函数可以部署测试了。如果遇到部署不成功、各种权限问题，可以尝试本地部署上传所有文件、重启试试。 3.2 生成小程序码 生成小程序码的代码如下，可以指定页面和页面参数 [代码]scene[代码]，还有小程序码的尺寸。 注意这里的 [代码]scene[代码] 有限制: 最大32个可见字符； 只支持数字，大小写英文以及部分特殊字符：[代码]!#$&'()*+,/:;=?@-._~[代码]； 注意参数格式：下面实例代码生成小程序码后，扫码获得 [代码]pages/demo/demo?scene=id%3D6[代码] 。 [代码]try { const result = await cloud.openapi.wxacode.getUnlimited({ page: 'pages/demo/demo', scene: 'id=6', width: 240, }) console.log(result) return result } catch (err) { console.log(err) return err } [代码] 直接调用，比服务端调用少了 access_token 参数。 3.3 上传到云存储 返回值中的 buffer 就是图片内容，直接上传到云存储： [代码]const uploadResult = await cloud.uploadFile({ cloudPath: 'shareqr/' + qr_name_hash + '.jpg', fileContent: result.buffer, }); [代码] 我在云存储新建了 [代码]shareqr[代码] 目录保存小程序码； 图片名根据参数取md5摘要； [代码]getUnlimited[代码] 返回的图像是 [代码]jpeg[代码] 格式，后缀硬编码写 [代码].jpg[代码]。 3.4 获取图片临时路径 直接上代码 [代码]getURLReault = await cloud.getTempFileURL({ fileList: [uploadResult.fileID] }); fileObj = getURLReault.fileList[0] return fileObj [代码] 3.5 直接从存云存储获取 生成过以后图片已经保存在云存储，用同样的参数第二次调用没必要再生成一次，去掉一次网络请求，可以节省不少时间。 前面说到文件名使用请求参数摘要，知道了目录和文件名，再加上文件bucket前缀就可以拼出来 [代码]fileID[代码]，用[代码]fileID[代码] 可以查询云存储的文件。 比如我刚刚生成的 fileID 是 [代码]cloud://dev-xxxx.8888-dev-xxxx/qr/44ea42f05091c3bec771123e6e8cd4c2.jpg[代码]， 前缀就是 [代码]cloud://dev-xxxx.8888-dev-xxxx/[代码]。再拼上目录、文件名、后缀就是 [代码]fileID[代码]。 注：此处的 [代码]fileID[代码]拼接方法并不是来自官方文档，只是在使用中发现这个前缀不会变。还需要官方解释说明[代码]fileID[代码]规则。 如果会改变，就需要再用云数据库存储[代码]fileID[代码]，更麻烦一些。 3.6 云函数完整代码 [代码]// 云函数入口文件 const cloud = require('wx-server-sdk'); const crypto = require('crypto'); const bucketPrefix = 'cloud://dev-xxxx.8888-idc-4d11a4-1257831628/qr/'; // env: 'dev-xxxx' // 云函数入口函数 exports.main = async (event, context) => { const full_path = event.page + '?' + event.scene; const qr_name_hash = crypto.createHash('md5').update(full_path).digest('hex'); const temp_id = bucketPrefix + qr_name_hash + '.jpg'; // return { // full_path, // qr_name_hash, // temp_id // } try { // 先尝试获取文件，存在就直接返回临时路径 let getURLReault = await cloud.getTempFileURL({ fileList: [temp_id] }); // return getURLReault; let fileObj = getURLReault.fileList[0]; if (fileObj.tempFileURL != '') { fileObj.fromCache = true; return fileObj; } // 生成小程序码 const wxacodeResult = await cloud.openapi.wxacode.getUnlimited({ scene: event.scene, page: event.page, width: 280 //二维码的宽度，单位 px，最小 280px，最大 1280px }) // return wxacodeResult; if (wxacodeResult.errCode != 0) { // 生成二维码失败，返回错误信息 return wxacodeResult; } // 上传到云存储 const uploadResult = await cloud.uploadFile({ cloudPath: 'qr/' + qr_name_hash + '.jpg', fileContent: wxacodeResult.buffer, }); // return uploadResult; if (!uploadResult.fileID) { //上传失败，返回错误信息 return uploadResult; } // 获取图片临时路径 getURLReault = await cloud.getTempFileURL({ fileList: [uploadResult.fileID] }); fileObj = getURLReault.fileList[0]; fileObj.fromCache = false; // 上传成功，获取文件临时url，返回临时路径的查询结果 return fileObj; } catch (err) { return err } } [代码] 4. 小程序页面调用 调用页面就比较简单了，在小程序新建一个 [代码]pages/share/share[代码] 在 [代码]onLoad[代码] 函数调用云函数。 [代码]// 使用前记得先初始化云函数，一版放到 app.js onLaunch() 中 // wx.cloud.init({env: 'dev-8888'}) wx.cloud.callFunction({ name: 'getqr', data: { page: 'pages/demo/demo', scene: 'id=6', } }).then(res => { console.log(res.result); if (res.result.status == 0) { _this.setData({ qr_url: res.result.tempFileURL }) }else{ wx.showToast({ icon: 'none', title: '调用失败', }) } }).catch(err => { console.error(err); wx.showToast({ icon: 'none', title: '调用失败', }) }) [代码] 至此完整的调用过程已经全部完成，详细代码可以到 项目代码 查看。 代码中还对入口页面和share页面的参数做了包装，云函数可以直接使用，小程序可以稍做修改适应自己业务。 写在最后 小程序云开发已经开放了很多功能，除了这次提到的生成小程序码，云调用还可以发送模板消息。有需要的开发者又一个理由可以快速上线新功能了。 云开发还开放了[代码]HTTP API[代码]，也就是用自己的服务器调用云函数。以前看完云开发介绍文章最大的疑问就是，你说的都很好，可是后台数据怎么管理呢？不能跟自己的服务器结合，只能放一些轻量的小程序。有了 [代码]HTTP API[代码] 以后就可以用自己的服务器做管理后台了。这时候你要问，都用上服务器了，还需要云开发做什么。首先，云开发免费；其次，免费功能已经够强，就差不能做Web管理后台了；最后，获取access_token（小程序及小游戏调用不要求IP地址在白名单内。）

开门见山 工具地址 点我直达>>painter-custom-poster 由于挂载在github page上，打开速度会慢一些，请耐心等待或自行解决git网速问题 背景 在做小程序时候，我们经常会有一个需求，需要将小程序分享到朋友圈，但是朋友圈是不允许直接分享小程序，那我们还有其他的办法解决吗?答案肯定是有的，即 canvas 生成个性化海报分享图片到朋友圈 分析 小程序中有大量的生成图片需求，但是使用过 canvas 的人，都会发现一些难以预料的问题>>有关小程序的坑 直接在 canvas 上绘制图形，对于普通开发者来说代码会特别凌乱并且难以维护，经常会花费很久的时间去优化代码 不同的环境渲染问题，例如在开发者工具看起来好好的，一到 Android 真机，就出现图片不显示，位置不对应等等问题 解决 那可不可以开发一款生成海报的插件库呢? 首先，只需要提供一份简单的参数配置文件即可 解决掉小程序Canvas遇到的一些大大小小的坑 有严苛的测试环节，解决各种环境和各种机型遇到的问题，并提供稳定的线上版本 长期维护，并有专人更新迭代更新颖的功能 以上的要求当然是可以的，曾经的我也想尝试开发一款出来，但是后来尝试了几款现成的工具之后就放弃了，毕竟轮子这个东西，是需要不断维护更新的，另外已经有这么多优秀现成的插件了，我为何还要费力去写呢，贡献代码岂不更美哉，以下是我收集的几款 小程序生成图片库，轻松通过 json 方式绘制一张可以发到朋友圈的图片>>Painter 小程序组件-小程序海报组件>>wxa-plugin-canvas 微信小程序：一个 json 帮你完成分享朋友圈图片>>mp_canvas_drawer 我想干什么 唠了这么多，好像提供给大家插件就没我什么事情了…想走是不可能的 为了能够制作出更酷炫的海报，我思考了许久 虽然有了插件后，只需要提供配置代码就能够制作出一款海报来，但是我发现还是有些许问题 制作海报效率还是不够高，微调一个元素的大小和位置，就需要不断的修改保存代码，等待片刻，查看效果，真的烦 一个小小的位置调整可能就需要来回调整无数次，这种最简单的机械化劳动，这辈子是不可能的 拿着完美的稿子，递给设计师看，这个位置不对，这个线太粗，这个颜色太重…你信不信我打死你 对于一些精美复杂的海报，实现起来真的不太现实 那我需要怎么做呢，请点击这个链接体验>>painter-custom-poster 点击左侧例子展示中的任意一个例子，然后导入代码就能看到效果图，这下你应该能猜到了我的想法了 如何实现 刚开始我想用简单的html和css加拖动功能实现，通过简单尝试之后就放弃了，因为这个功能真的太复杂了，简单的工具肯定是不行的 中间这个计划停滞了很长时间，一度已经放弃 直到发现了这个库fabric.js，真的太太优秀了，赞美之词无以言表，唯一的缺点就是中文教程太少，必须生啃英文加谷歌翻译 fabric介绍，你可以很容易地创建任何一个简单的形状，复杂的形状，图像;将它们添加到画布中，并以任何你想要的方式进行修改：位置、尺寸、角度、颜色、笔画、不透明度等 How To Use 目前工具一共分成4部分 例子展示 用来将一些用户设计的精美海报显示出来，通过点击对应的例子并将代码导入画布中 画布区 显示真实的海报效果，画布里添加的元素，都可以直接用鼠标进行拖动，旋转，缩放操作 操作区 第一排四个按钮 复制代码 将画布的展示效果转化成小程序海报插件库所需要的json配置代码，目前我使用的是Painter库，默认会转化成这个插件的配置代码，将代码直接复制到card.js即可 查看代码 这个功能用不用无所谓，可以直观的看到生成的代码 导出json 将画布转化成fabric所需要的json代码，方便将自己设计的海报代码保存下来 导入json 将第3步导出的json代码导入，会在画布上显示已设计的海报样式 第二排五个按钮 画布 画布的属性参数 详解见下方 文字 添加文字的属性参数 详解见下方 矩形 添加矩形的属性参数 详解见下方 图片 添加图片的属性参数 详解见下方 二维码 添加二维码的属性参数 详解见下方 第三排 各种元素的详细设置参数 激活区 激活对象是指鼠标点击画布上的元素，该对象会被蓝色的边框覆盖，此时该对象被激活，可以执行拖动 旋转 缩放等操作 激活区只有对象被激活才会出来，用来设置激活对象的各种配置参数，修改value值后，实时更新当前激活对象的对应状态，点击其他区域，此模块将隐藏 快捷键 ‘←’ 左移一像素 ‘→’ 右移一像素 ‘↑’ 上移一像素 ‘↓’ 下移一像素 ‘ctrl + z’ 撤销 ‘ctrl + y’ 恢复 ‘delete’ 删除 ‘[’ 提高元素的层级 ‘]’ 降低元素的层级 布局属性 通用布局属性 属性 说明 默认 rotate 旋转，按照顺时针旋转的度数 0 width、height view 的宽度和高度 top、left 如 css 中为 absolute 布局时的作用 0 background 背景颜色 rgba(0，0，0，0) borderRadius 边框圆角 0 borderWidth 边框宽 0 borderColor 边框颜色 #000000 shadow 阴影 ‘’ shadow 可以同时修饰 image、rect、text 等 。在修饰 text 时则相当于 text-shadow；修饰 image 和 rect 时相当于 box-shadow 使用方法： [代码]shadow: 'h-shadow v-shadow blur color'; h-shadow: 必需。水平阴影的位置。允许负值。 v-shadow: 必需。垂直阴影的位置。允许负值。 blur: 必需。模糊的距离。 color: 必需。阴影的颜色。 举例: shadow:10 10 5 #888888 [代码] 渐变色支持 你可以在画布的 background 属性中使用以下方式实现 css 3 的渐变色，其中 radial-gradient 渐变的圆心为 中点，半径为最长边，目前不支持自己设置。 [代码]linear-gradient(-135deg, blue 0%, rgba(18, 52, 86, 1) 20%, #987 80%) radial-gradient(rgba(0, 0, 0, 0) 5%, #0ff 15%, #f0f 60%) [代码] ！！！注意：颜色后面的百分比一定得写。 画布属性 属性 说明 默认 times 控制生成插件代码的宽度大小，比如画布宽100，times为2，生成的值为200 1 文字属性 属性名称 说明 默认值 text 字体内容 别跟我谈感情，谈感情伤钱 maxLines 最大行数 不限，根据 width 来 lineHeight 行高（上下两行文字baseline的距离） 1.3 fontSize 字体大小 30 color 字体颜色 #000000 fontWeight 字体粗细。仅支持 normal， bold normal textDecoration 文本修饰，支持none underline、 overline、 linethrough none textStyle fill： 填充样式，stroke：镂空样式 fill fontFamily 字体 sans-serif textAlign 文字的对齐方式，分为 left， center， right left 备注: fontFamily，工具中的第一个例子支持文字字体，但是导入小程序为什么看不到呢，小程序官网加载网络字体方法>> 加载字体教程>> 文字高度 是maxLines lineHeight2个字段一起计算出来的 图片属性 属性 说明 默认 url 图片路径 mode 图片裁剪、缩放的模式 aspectFill mode参数详解 scaleToFill 缩放图片到固定的宽高 aspectFill 图片裁剪显示对应的宽高 auto 自动填充 宽度全显示 高度自适应居中显示 Tips（一定要看哦～） 本工具不考虑兼容性，如发现不兼容请使用google浏览器 painter现在只支持这几种图形，所以暂不支持圆，线等 如果编辑过程，一个元素被挡住了，无法操作，请选择对象并通过[ ]快捷键提高降低元素的层级 文字暂不支持直接缩放操作，因为文字大小和元素高度不容易计算，可以通过修改激活栏目maxLines lineHeight fontSize值来动态改变元素 如发现导出的代码一个元素被另一个元素挡住了，请手动调整元素的位置，json数组中元素越往后层级显示就越高，由于painter没有提供层级参数，所以目前只能这样做 本工具导出代码全是以px为单位，为什么不支持rpx， 因为painter在rpx单位下，阴影和边框宽会出现大小计算问题，由于原例子没有提供px生成图片方案，可以下载我这里修改过的demo>>Painter即可解决 文本宽度随着字数不同而动态变化，想在文本后面加个图标根据文本区域长度布局， 请参考Painter文档这块教程直接修改源码 由于本工具开发有些许难度，如出现bug，建议或者使用上的问题，请提issue，源码地址>>painter-custom-poster 海报贡献 如果你设计的海报很好看，并且愿意开源贡献，可以贡献你的海报代码和缩略图，例子代码文件在example中，按顺序排列，例如现在库里例子是example2.js，那你添加example3.js和example3.jpg图片，事例可以参考一下文件夹中源码，然后在index.js中导出一下 导出代码 代码不要格式化，会报错，请原模原样复制到json字段里 生成缩略图 刚开始我想在此工具中直接生成图片，但是由于浏览器图片跨域问题导致报错失败 所以请去小程序中生成保存图片，图片质量设置0.2，并去tinypng压缩一下图片 找到painter.js，替换下边这个方法，可以生成0.2质量的图片，代码如下 [代码] saveImgToLocal() { const that = this; setTimeout(() => { wx.canvasToTempFilePath( { canvasId: 'k-canvas', fileType: 'jpg', quality: 0.2, success: function(res) { that.getImageInfo(res.tempFilePath); }, fail: function(error) { console.error(`canvasToTempFilePath failed, ${JSON.stringify(error)}`); that.triggerEvent('imgErr', { error: error }); } }, this ); }, 300); } [代码] TODO 颜色值选择支持调色板工具 文字padding支持 缩放位置弹跳问题优化 假如需求大的话，支持其他几款插件库代码的生成 ~ 创作不易，如果对你有帮助，请给个星星 star✨✨ 谢谢 ~

由于我们无法将小程序直接分享到朋友圈，但分享到朋友圈的需求又很多，业界目前的做法是利用小程序的 Canvas 功能生成一张带有小程序码的图片，然后引导用户下载图片到本地后再分享到朋友圈。相信大家在绘制分享图中应该踩到 Canvas 的各种（坑）彩dan了吧～ 这里首先推荐一个开源的组件：painter（通过该组件目前我们已经成功在支付宝小程序上也应用上了分享图功能） 咱们不多说，直接上手就是干。 [图片] 首先我们新增一个自定义组件，在该组件的json中引入painter [代码]{ "component": true, "usingComponents": { "painter": "/painter/painter" } } [代码] 然后组件的WXML (代码片段在最后) [代码]// 将该组件定位在屏幕之外，用户查看不到。 <painter style="position: absolute; top: -9999rpx;" palette="{{imgDraw}}" bind:imgOK="onImgOK" /> [代码] 重点来了 JS (代码片段在最后) [代码]Component({ properties: { // 是否开始绘图 isCanDraw: { type: Boolean, value: false, observer(newVal) { newVal && this.handleStartDrawImg() } }, // 用户头像昵称信息 userInfo: { type: Object, value: { avatarUrl: '', nickName: '' } } }, data: { imgDraw: {}, // 绘制图片的大对象 sharePath: '' // 生成的分享图 }, methods: { handleStartDrawImg() { wx.showLoading({ title: '生成中' }) this.setData({ imgDraw: { width: '750rpx', height: '1334rpx', background: 'https://qiniu-image.qtshe.com/20190506share-bg.png', views: [ { type: 'image', url: 'https://qiniu-image.qtshe.com/1560248372315_467.jpg', css: { top: '32rpx', left: '30rpx', right: '32rpx', width: '688rpx', height: '420rpx', borderRadius: '16rpx' }, }, { type: 'image', url: this.data.userInfo.avatarUrl || 'https://qiniu-image.qtshe.com/default-avatar20170707.png', css: { top: '404rpx', left: '328rpx', width: '96rpx', height: '96rpx', borderWidth: '6rpx', borderColor: '#FFF', borderRadius: '96rpx' } }, { type: 'text', text: this.data.userInfo.nickName || '青团子', css: { top: '532rpx', fontSize: '28rpx', left: '375rpx', align: 'center', color: '#3c3c3c' } }, { type: 'text', text: `邀请您参与助力活动`, css: { top: '576rpx', left: '375rpx', align: 'center', fontSize: '28rpx', color: '#3c3c3c' } }, { type: 'text', text: `宇宙最萌蓝牙耳机测评员`, css: { top: '644rpx', left: '375rpx', maxLines: 1, align: 'center', fontWeight: 'bold', fontSize: '44rpx', color: '#3c3c3c' } }, { type: 'image', url: 'https://qiniu-image.qtshe.com/20190605index.jpg', css: { top: '834rpx', left: '470rpx', width: '200rpx', height: '200rpx' } } ] } }) }, onImgErr(e) { wx.hideLoading() wx.showToast({ title: '生成分享图失败，请刷新页面重试' }) //通知外部绘制完成，重置isCanDraw为false this.triggerEvent('initData') }, onImgOK(e) { wx.hideLoading() // 展示分享图 wx.showShareImageMenu({ path: e.detail.path, fail: err => { console.log(err) } }) //通知外部绘制完成，重置isCanDraw为false this.triggerEvent('initData') } } }) [代码] 那么我们该如何引用呢？ 首先json里引用我们封装好的组件share-box [代码]{ "usingComponents": { "share-box": "/components/shareBox/index" } } [代码] 以下示例为获取用户头像昵称后再生成图。 [代码]<button class="intro" bindtap="getUserInfo">点我生成分享图</button> <share-box isCanDraw="{{isCanDraw}}" userInfo="{{userInfo}}" bind:initData="handleClose" /> [代码] 调用的地方： [代码]const app = getApp() Page({ data: { isCanDraw: false }, // 组件内部关掉或者绘制完成需重置状态 handleClose() { this.setData({ isCanDraw: !this.data.isCanDraw }) }, getUserInfo(e) { wx.getUserProfile({ desc: "获取您的头像昵称信息", success: res => { const { userInfo = {} } = res this.setData({ userInfo, isCanDraw: true // 开始绘制海报图 }) }, fail: err => { console.log(err) } }) } }) [代码] 最后绘制分享图的自定义组件就完成啦~效果图如下： [图片] tips： 文字居中实现可以看下代码片段 文字换行实现（maxLines）只需要设置宽度，maxLines如果设置为1，那么超出一行将会展示为省略号 代码片段：https://developers.weixin.qq.com/s/J38pKsmK7Qw5 附上painter可视化编辑代码工具：点我直达，因为涉及网络图片，代码片段设置不了downloadFile合法域名，建议真机开启调试模式，开发者工具 详情里开启不校验合法域名进行代码片段的运行查看。 最后看下面大家评论问的较多的问题：downLoadFile合法域名在小程序后台 开发>开发设置里配置，域名为你图片的域名前缀 比如我文章里的图https://qiniu-image.qtshe.com/20190605index.jpg。配置域名时填写https://qiniu-image.qtshe.com即可。如果你图片cdn地址为https://aaa.com/xxx.png, 那你就配置https://aaa.com即可。