在小程序开发过程中经常涉及到一些图表类需求，其中环形进度条比较属于比较常见的需求 [图片] [中间的文字部分需要自己实现，因为每个项目不同，本工具只实现进度条] 上图中，一方面我们我们需要实现动态计算弧度的进度条，还需要在进度条上加上渐变效果，如果每次都需要自己手写，那需要很多重复劳动，所以决定为为小程序生态圈贡献一份小小的力量，下面来介绍一下整个工具的实现思路，喜欢的给个star咯 https://github.com/lucaszhu2zgf/mp-progress 环形进度条由灰色底圈+渐变不确定圆弧+双色纽扣组成，首先先把页面结构写好： .canvas{     position: absolute;     top: 0;     left: 0;     width: 400rpx;     height: 400rpx; } 因为进度条需要盖在文字上面，所以采用了绝对定位。接下来先把灰色底圈给画上： const context = wx.createContext(); // 打底灰色曲线 context.beginPath(); context.arc(this.convert_length(200), this.convert_length(200), r, 0, 2*Math.PI); context.setLineWidth(12); context.setStrokeStyle('#f0f0f0'); context.stroke(); wx.drawCanvas({     canvasId: 'progress',     actions: context.getActions() }); 效果如下： [图片] 接下来就要画绿色的进度条，渐变暂时先不考虑 // 圆弧角度 const deg = ((remain/total).toFixed(2))*2*Math.PI;      // 画渐变曲线 context.beginPath(); // 由于外层大小是400，所以圆弧圆心坐标是200,200 context.arc(this.convert_length(200), this.convert_length(200), r, 0, deg); context.setLineWidth(12); context.setStrokeStyle('#56B37F'); context.stroke(); // 辅助函数，用于转换小程序中的rpx convert_length(length) {     return Math.round(wx.getSystemInfoSync().windowWidth * length / 750); } [图片] 似乎完成了一大部分，先自测看看不是满圆的情况是啥样子，比如现在剩余车位是120个 [图片] 因为圆弧函数arc默认的起点在3点钟方向，而设计想要的圆弧的起点从12点钟方向开始，现在这样是没法达到预期效果。是不是可以使用css让canvas自己旋转-90deg就好了呢？于是我在上面的canvas样式中新增以下规则： .canvas{     transform: rotate(-90deg); } 但是在真机上并不起作用，于是我把新增的样式放到包裹canvas的外层元素上，发现外层元素已经旋转，可是圆弧还是从3点钟方向开始的，唯一能解释这个现象的是官方说：小程序中的canvas使用的是原生组件，所以这样设置css并不能达到我们想要的效果 [图片] 所以必须要在canvas画图的时候把坐标原点移动到弧形圆心，并且在画布内旋转-90deg [图片] // 更换原点 context.translate(this.convert_length(200), this.convert_length(200)); // arc原点默认为3点钟方向，需要调整到12点 context.rotate(-90 * Math.PI / 180); // 需要注意的是，原点变换之后圆弧arc原点也变成了0,0 真机预览效果达成预期 [图片] 接下来添加环形渐变效果，但是canvas原本提供的渐变类型只有两种： 1、LinearGradient线性渐变 [图片] 2、CircularGradient圆形渐变 [图片] 两种渐变中离设计效果最近的是线性渐变，至于为什么能够形成似乎是随圆形弧度增加而颜色变深的效果也只是控制坐标开始和结束的坐标位置罢了 const grd = context.createLinearGradient(0, 0, 100, 90); grd.addColorStop(0, '#56B37F'); grd.addColorStop(1, '#c0e674'); // 画渐变曲线 context.beginPath(); context.arc(0, 0, r, 0, deg); context.setLineWidth(12); context.setStrokeStyle(grd); context.stroke(); 来看一下真机预览效果： [图片] 非常棒，最后就剩下跟随进度条的纽扣效果了 [图片] 根据三角函数，已知三角形夹角根据公式radian = 2*Math.PI/360*deg，再利用cos和sin函数可以x、y，从而计算出纽扣在各部分半圆的坐标 const mathDeg = ((remain/total).toFixed(2))*360; // 计算弧度 let radian = ''; // 圆圈半径 const r = +this.convert_length(170); // 三角函数cos=y/r，sin=x/r，分别得到小点的x、y坐标 let x = 0; let y = 0; if (mathDeg <= 90) {   // 求弧度   radian = 2*Math.PI/360*mathDeg;   x = Math.round(Math.cos(radian)*r);   y = Math.round(Math.sin(radian)*r); } else if (mathDeg > 90 && mathDeg <= 180) {   // 求弧度   radian = 2*Math.PI/360*(180 - mathDeg);   x = -Math.round(Math.cos(radian)*r);   y = Math.round(Math.sin(radian)*r); } else if (mathDeg > 180 && mathDeg <= 270) {   // 求弧度   radian = 2*Math.PI/360*(mathDeg - 180);   x = -Math.round(Math.cos(radian)*r);   y = -Math.round(Math.sin(radian)*r); } else{   // 求弧度   radian = 2*Math.PI/360*(360 - mathDeg);   x = Math.round(Math.cos(radian)*r);   y = -Math.round(Math.sin(radian)*r); } [图片] 有了纽扣的圆形坐标，最后一步就是按照设计绘制样式了 // 画纽扣 context.beginPath(); context.arc(x, y, this.convert_length(24), 0, 2 * Math.PI); context.setFillStyle('#ffffff'); context.setShadow(0, 0, this.convert_length(10), 'rgba(86,179,127,0.5)'); context.fill(); // 画绿点 context.beginPath(); context.arc(x, y, this.convert_length(12), 0, 2 * Math.PI); context.setFillStyle('#56B37F'); context.fill(); 来看一下最终效果 [图片] 最后我重新review了整个代码逻辑，并且已经将代码开源到https://github.com/lucaszhu2zgf/mp-progress，欢迎大家使用

一、创建账号目前有两条注册路线，分别是个人和企业。 个人：需先开通微信视频号并获得有效粉丝数100个，然后申请封面定制平台账号，用视频号管理员验证完成注册。 *有效粉丝数，个人猜测应该是系统按特定规则计算，会排除刷粉等异常数据，规则不会对外公开。 [图片] 企业：需注册公众号，并进行微信认证，然后申请封面定制平台账号，用公众号管理员验证完成注册。 [图片] *目前仅面向大陆境内的认证企业公众号，或已完成视频号认证的个人用户开放。 *且暂不对宗教、烟草、医疗、特殊医学用途配方食品、医疗器械、农药、兽药、保健食品及药品相关的主体开放。 二、封面定制个人定制：定制页面如下， [图片] [图片] 1，红包封面简称最多8个字，可以使用视频号名称，或自行命名。注意起名也需要提供相关证明材料。 2，个人LOGO支持PNG、JPG，尺寸是200*200像素，文件小于100KB。 虽然可以直接使用视频号头像，但如果你视频号头像图片是网图，也会管你索要版权证明的。 建议不使用LOGO，直接文字命名。 3，样式（即封面图片）封面图片直接使用一张图片即可，红包各个阶段的页面，都是从这一张图片中截取。 支持PNG、JPG，尺寸是957*1278像素，文件小于500KB。 注意第1张示例图底部的“开”字部分，会遮挡图片下面一部分内容。 第2张示例图，实际效果是可以下拉的，需要考虑下拉后的顶部显示内容，如果不合适还可以单独调整封面图上传。 第3张示例图、第4张示例图，可以直接编辑选择显示位置。 4，封面故事在红包打开后的红包详情页展示，该页下拉时，直接以图片或视频方式展示封面故事。 图片和视频，最多可设置5个，左右滑动观看效果。 图片支持PNG、JPG，尺寸是750*1250像素，文件小于300K。 视频支持MP4格式，编码是H.264/AVC，宽度≥720像素，宽高比是3:5-16:9之间，小于15秒时长，码率不高于1600kbit/s，文件小于10M。 同时支持用视频号上传素材。 故事的文字描述不得超过40个汉字。 个人号，支持跳转到视频号或表情封面； 暂时个人号没有跳转公众号或小程序的链接。 5，证明材料整个设计中，出现的名称、LOGO、图片等美术作品，以及涉及人像、字体等，都需要提供相关权属证明文件，以证明你有资格使用这些内容。 *涉及注册商标的，需提供《商标注册证》的扫描件或商标使用授权书（在授权情况下）； *美术作品涉及著作权的，需提供《作品登记证书》或《著作权登记证书》的扫描件；没有证书的，需提供该作品的psd格式文件，或人民法院确认权属的法律文书，或其他能证明作品权利人的发表链接等； *涉及肖像权的，需提供图中人物的身份证明，如身份证正反面或护照等扫描件或照片；或提供肖像权授权书。其中授权人为图中涉及肖像的人，被授权人为微信红包封面开放平台注册者； *涉及版权的，需提供作品版权证明，如著作权登记证、作品登记证；或版权授权书，其中授权人为版权所有者，被授权人是微信红包封面开放平台注册者； 以及版权所有者主体证明，企业请提交合法营业执照电子版扫描件或照片，个人请提交身份证正反面或护照等身份证明扫描件或照片； 没有上述证书，需提供该作品的psd格式文件，或人民法院确认权属的法律文书，或其他能证明作品权利人的发表链接等； 如果涉及资料文件较多，可打包上传。文件需小于25M（实际定制页面目前写的是小于80M）； 如果证明材料过大，可以写邮件发往wxcover_support@tencent.com（邮件名为【证明材料补充】+封面名称），并在提交审核时在「证明材料」处上传说明文档，列明发至邮箱的证明材料所包括的内容。 6，手机预览填完资料的封面，可以点击底部的“手机预览”按钮，手机扫描弹出的二维码，在手机上预览红包封面效果。 企业定制：和个人封面定制大体流程一致，只是在封面故事部分增加了小程序或公众号的跳转。 [图片] *可以关联企业主体下的小程序或公众号，其中小程序可以设置指定界面路径跳转。 三、封面审核1，审核周期原审核周期是1个工作日，后改为从1月2日起，至2021年2月26日，审核周期调整为3个工作日。 并且对特定情形的封面定制，会延长审核周期为1个月。 特定情形：（1）封面中存在外文、少数民族语言文字内容的，需要提供完整、准确的中文翻译。 （2）封面中存在任何宗教、民族、政治性质的图腾、人物、神兽、符号、法器等元素的，需要提供该等元素的详细说明。 2，审核标准肯定以官方实际审核为准。 从官方公开的审核标准中，个人归纳如下： 综合标准：（1）不违法；（2）符合未成年人保护标准；（3）不违背社会善良风俗或各民族感情；（4）格调健康，积极向上；（5）不得过度营销；（6）不能直接使用中国地图（除非相关部门授权）；（7）除党政和事业机关账号，其他不可使用政治军事以及其他主旋律推广内容；（8）不能使用全网封杀人物肖像 直接标准：（1）必须确保有权使用；（2）在先原则（不可与已发布封面雷同）； 3，提审数量最多可同时在审3款红包封面，待审核完成后可继续提交。 四、封面购买TODO 五、封面发放TODO 六、封面违规与侵权处理从官方原始购买后，定制方不得以任何形式向用户售卖微信红包封面。 TODO 七、相关参考资料*微信红包封面开放平台-帮助中心 https://cover.weixin.qq.com/cgi-bin/mmcover-bin/readtemplate?t=page/index.html#/doc?page=introduce&index=-1 *封面审核周期调整公告 https://cover.weixin.qq.com/cgi-bin/mmcover-bin/readtemplate?t=page/index#/notice_detail?id=1609588007_3773_1102306322 ====================================== 附：常见审核驳回原因整理1，所提交的封面素材和他人已发布的作品存在较高相似度，侵权风险较大。请提供早于他人作品发布时间的作品版权证明。 2，红包封面的图案应尽量避开头像、昵称、祝福语的区域。若无法避开，需避免图案过于复杂，影响文字识别。 3，需补充提供【XXXX公司/网站】享有著作权的证明材料。（即使你有其他平台的版权授权书也不行，需要他们著作权证明） 4，所提供的《XX图片授权书》中被授权方为【张三】，无法体现被授权方与【张三视频号】视频号之间的关系。请提供授权范围包含【张三视频号】视频号之红包封面定制场景的授权书后，再上传系统进行审核。（授权书需要有身份证号或其他证明，能让官方确认是授权给你，只有名字不行） 5，所提交的封面素材涉及版权，需提供《作品登记证书》或《著作权登记证书》的扫描件、作品源文件等版权证明材料。 6，PSD文件需要详细分层。 7，红包封面简称仅可以使用主体名称中的字号、公众号名称或注册商标名称。如使用注册商标请上传《商标注册证》的扫描件。可使用【XXX】等命名。 8，所提交的封面素材涉及他人的作品，需提供以下材料：1）《作品登记证书》或《著作权登记证书》的扫描件、作品PSD源文件等版权证明材料； 2）版权授权书（企业需盖章）；3）版权所有者是个人的，需提供身份证正反面或护照等扫描件。 9，不可出现除企业字号、商标名称、企业价值观、祝福语以外的文字。 10，红包封面的背景色不可与微信红包的文字色相接近，影响昵称、祝福语的识别。需更换背景色后再提交。 11，所提交的企业logo涉及他人的作品，需提供以下材料：1）《作品登记证书》或《著作权登记证书》的扫描件、作品PSD源文件等版权证明材料； 2）版权授权书（企业需盖章）；3）版权所有者是个人的，需提供身份证正反面或护照等扫描件。 12，仅可使用定制主体法人代表的肖像定制封面，需提供企业营业执照、法人代表实名信息（需本人手持身份证拍照），且该等情形的微信红包封面，审核期限将延长至一个月。 13，封面素材不可展示微信红包的固有元素，如祝福语、“开”按钮、用户昵称头像、弧形阴影等，需删除后再提交。 14，所提交的作品创作源文件无法充分证明你享有该作品的著作权，请补充其他证明材料，如作品的《作品登记证书》或《著作权登记证书》的扫描件等。 15，不可出现和他人已发表的作品雷同，或权利归属情况不明的内容（如未获得著作人合法授权的二次创作、同人作品等）。 16，发红包页、红包消息气泡、拆红包页、红包详情页的素材图需属于原始封面样式图的一部分，保持内容、风格、主题一致。 17，品牌logo仅可以使用你的注册商标，且需上传《商标注册证》的扫描件。如使用其他主体的注册商标，需提供有效的授权证明材料。若未注册商标或未取得授权，可删除品牌logo后再提交。 18，证明材料未上传成功，请重新提交。若文件过大无法上传，请将证明材料发邮件至wxcover_support@tencent.com（邮件名为【证明材料补充】+封面名称），可在邮件中留下你的联系方式，我们将与你联系。 19，不可出现真实的人名和地址信息。 20，仅可使用定制主体本人的肖像定制封面，请提供本人实名信息（需本人手持身份证拍照），且该等情形的微信红包封面，审核期限将延长至一个月。 21，建议调整封面中祝福语文案的位置，以免影响在其他机型或者大字体情况下的体验效果。 22，红包封面简称可使用微信视频号账号名称。如果使用其他名称命名，请提供相应的证明材料。 23，请提供有效的版权证明材料。应注意，根据《“微信红包封面”定制功能使用条款》第3.3.3条的约定：定制方不得以任何形式向用户售卖微信红包封面。 24，非党政机关事业单位，不可使用天安门、人民大会堂、华表等国家民族标志物。 25，所提交的《作品登记书》证明材料，需将登记的作品复印件一起上传。 26，所提交的封面故事视频音乐作品和他人已发布的作品存在较高相似度，侵权风险较大。请提供早于他人作品发布时间的作品版权证明。 27，不可包含直接或间接表明产品或服务或其特性的文字。（包括封面故事图片） 28，所提交的封面素材涉及他人的作品，需提供版权授权书，其中被授权人为微信红包封面开放平台注册者。 29，不可出现商品图、店铺图、服务内容截图等广告性质的内容。 30，需提供有拍摄信息的照片源文件。 （不断更新中...欢迎提供！欢迎点赞支持！） ====================================== 重要事项更新日志： *2021.01.20 更新封面故事跳转内容，增加了视频号和表情封面跳转。 *2021.03.23 移除了个人主体必须视频号认证要求。

说一下项目过程：后端返回的数据里面包含了 html 标签，据说是富文本粘贴过来的文字和图片，拿到手的肯定的都会带有粘的样式在标签上，这样的简单点的操作就使用小程序自带的 rich-text 组件即可，但是发现文字是有了，图片却显示的非常大，而且标签上自带 style 和 width 参数，这样的话就很难直接填充了。 解决问题： 首先想到的是用插件，找了一款 wxParse 转换插件，但是发现非常的大，而且很多不必要的操作，我就直接替换一下图片而已，放弃。第二个插件 Parser 虽然体积小，但是也不是我选择的对象，最后想到了如果能在图片的样式替换一下自己想要的样式那就可以了，话不多说，直接看代码。 新建 wxs 文件，需要的图片有很多，所以这里直接使用 wxs 文件写入的方法操作 先把所有的单引号转换为双引号，找到 img 标签，然后在 img 标签里找到 style 样式属性，替换原有的属性。这样的操作下来发现图片就可以正常显示大小而且能自适应了，这里暂没做点击图片的处理，小程序 rich-text 自动屏蔽点击操作，如果有好的方法，请留言，学习学习，感激。 function replaceImg(content) {   content = content.replace(getRegExp('"', 'g'), '"');   content = content.replace(getRegExp(']*>', 'gi'), function(match) { // 判断没有 style 样式     if(match.indexOf('style') === -1) {       var index = match.indexOf('src');       var reg = getRegExp('(.{' + index + '})');       return match.replace(reg, '$1 style="max-width:100%;height:auto;display: block;" ')     }     return match.replace(getRegExp('style\s*?=\s*?([‘"])[\s\S]*?\1', 'gi'), 'style="max-width:100%;height:auto;display: block;"')   });   return content; } module.exports.replaceImg= replaceImg;

日常开发中，我们经常遇到剪贴蒙版样式的进度条效果，通过限制上方图层的显示长度，达到视觉差的效果。代码里主要通过[代码]overflow:hidden[代码]的属性，元素的内容若超出了给定的宽度和高度，那么超出的部分将会被隐藏。 例如： [图片] 这张图可以分为三层， 最低层的背景色+加上底部的文字 [图片] 中间层是张进度条的图片，根据不同进度长短覆盖在底层上面 [图片] 最上面还有一行白色的文字，位置跟底层的文字重合，通过限制长度部分显示左边内容，形成一段文字两种颜色的视觉差。 [代码] <view class="container"> <!-- 垫底文字 --> <text>这是一段文字</text> <!-- 进度条图片 --> <image class="ic-progress" style="width: {{percent}};" src="../../img/ic_progress.png" /> <!-- 白色文字内容区，与垫底文字位置重合 --> <view class="upTxt" style="width: {{percent}};"> <text class="txt">这是一段文字</text> </view> </view> [代码] [代码].container{ width: 460rpx; height: 50rpx; line-height: 50rpx; position: relative; background: rgba(247,29,81,0.1); border-radius: 25rpx; font-size: 28rpx; color: #F71D51; text-align: center; margin-top: 100px } .upTxt, .ic-progress { overflow: hidden; position: absolute; left: 0; top: 0rpx; height: 50rpx; line-height: 50rpx; border-radius: 25rpx; text-align: center; } .txt{ display: inline-block; width: 460rpx; height: 50rpx; border-radius: 25rpx; color: #fff; text-align: center; } [代码] js代码里设置不同的[代码]percent[代码]百分比可以看出不同的效果。 非常简单方便的一个处理方法。 欢迎关注我的个人博客：https://www.manjiexiang.cn/ 更多精彩欢迎关注微信号：春风十里不如认识你 一起学习，一起进步，欢迎上车，有问题随时联系，一起解决！！！ [图片]

微信小程序虽然开放了自定义的tabbar 因为他用的是fixed定位布局 导致每个tabbar页都要去动态计算padding-bottom 或者bottom值，之前尝试过 wx.getSystemInfo({ success: function(res) { console.log(res) if (res.model.search('iPhone X') != -1) { that.globalData.isIphoneX = true } }, }) 在app.js中判断是不是iphone X ok这个时候是完美适配的 但是有一天测试同学拿着iphone 11 pro max找我 说页面的padding-bottom值会盖住，在我的排查中发现res.model.search('iPhone X') != -1 这句代码拿到的结果为-1 我之前是这么处理的 我判断机型为iphonex的时候 tabbar 页面的padding-bottom为100rpx+64rpx 但是iphone 11pro 系列手机在这个判断中无效 经过排查并反复改 终于拿到了完美适配的方案！！！！我们只需要在外层的view padding-bottom: calc(100rpx + env(safe-area-inset-bottom))就好了 有需要的同学点个关注吧！！！ 对了 再次说明下 custom-tab-bar.wxss 中.tar-bar里的height我自己改成了100rpx 微信官方的是50px

UI组件库合集，大家有遇到好的组件库，欢迎留言评论然后加入到文档里。 第一款： 官方WeUI组件库，地址 https://developers.weixin.qq.com/miniprogram/dev/extended/weui/ 预览码： [图片] 第二款： ColorUI：地址 https://github.com/weilanwl/ColorUI 预览码：   [图片] 第三款： vantUI（又名：ZanUI）：地址 https://youzan.github.io/vant-weapp/#/intro 预览码： [图片] 第四款： MinUI： 地址 https://meili.github.io/min/docs/minui/index.html 预览码： [图片] 第五款： iview-weapp：地址 https://weapp.iviewui.com/docs/guide/start 预览码： [图片] 第六款： WXRUI：暂无地址 预览码： [图片] 第七款： WuxUI：地址https://www.wuxui.com/#/introduce 预览码： [图片] 第八款： WussUI：地址 https://phonycode.github.io/wuss-weapp/quickstart.html 预览码： [图片] 第九款： TouchUI：地址 https://github.com/uileader/touchwx 预览码: [图片] 第十款： Hello UniApp： 地址 https://m3w.cn/uniapp 预览码： [图片] 第十一款： TaroUI：地址 https://taro-ui.jd.com/#/docs/introduction 预览码： [图片] 第十二款： Thor UI： 地址 https://thorui.cn/doc/ 预览码： [图片] 第十三款： GUI：https://github.com/Gensp/GUI 预览码： [图片] 第十四款： QyUI：暂无地址 预览码： [图片] 第十五款： WxaUI：暂无地址 预览码： [图片] 第十六款： kaiUI： github地址 https://github.com/Chaunjie/kai-ui 组件库文档：https://chaunjie.github.io/kui/dist/#/start 预览码： [图片] 第十七款： YsUI：暂无地址 预览码： [图片] 第十八款： BeeUI：git地址 http://ued.local.17173.com/gitlab/wxc/beeui.git 预览码： [图片] 第十九款： AntUI： 暂无地址 预览码： [图片] 第二十款： BleuUI：暂无地址 预览码： [图片] 第二十一款： uniydUI：暂无地址 预览码： [图片] 第二十二款： RovingUI：暂无地址 预览码： [图片] 第二十三款： DojayUI：暂无地址 预览码： [图片] 第二十四款： SkyUI：暂无地址 预览码： [图片] 第二十五款： YuUI：暂无地址 预览码： [图片] 第二十六款： wePyUI：暂无地址 预览码： [图片] 第二十七款： WXDUI：暂无地址 预览码： [图片] 第二十八款： XviewUI：暂无地址 预览码： [图片] 第二十九款： MinaUI：暂无地址 预览码： [图片] 第三十款： InyUI：暂无地址 预览码： [图片] 第三十一款： easyUI：地址 https://github.com/qq865738120/easyUI 预览码: [图片] 第三十二款 Kbone-UI： 地址 https://wechat-miniprogram.github.io/kboneui/ui/#/ 暂无预览码 第三十三款 VtuUi： 地址 https://github.com/jisida/VtuWeapp 预览码： [图片] 第三十四款 Lin-UI 地址：http://doc.mini.talelin.com/ 预览码： [图片] 第三十五款 GraceUI 地址： http://grace.hcoder.net/ 这个是收费的哦～ 预览码： [图片] 第三十六款 anna-remax-ui npm：https://www.npmjs.com/package/anna-remax-ui/v/1.0.12 anna-remax-ui 地址： https://annasearl.github.io/anna-remax-ui/components/general/button 预览码 [图片] 第三十七款 Olympus UI 地址：暂无 网易严选出品。 预览码 [图片] 第三十八款 AiYunXiaoUI 地址暂无 预览码 [图片] 第三十九款 visionUI npm：https://www.npmjs.com/package/vision-ui 预览码： [图片] 第四十款 AnimaUI(灵动UI) 地址：https://github.com/AnimaUI/wechat-miniprogram 预览码： [图片] 第四十一款 uView 地址：http://uviewui.com/components/quickstart.html 预览码： [图片] 第四十二款 firstUI 地址：https://www.firstui.cn/ 预览码： [图片]