微信小程序canvas 波浪背景组件 wave-bg-weapp 前言 最近的项目中坑爹的设计师设计了一个波浪的背景效果, 本着高度还原设计稿的原则打算用canvas实现一下, 一番百度之后并没有找到满意的效果, 所以自己撸了一个感觉还不错共享给大家. 效果 [图片] 演示片段 https://developers.weixin.qq.com/s/g9tWlAmG7st8 依赖 组件依赖simplex-noise Simplex噪声算法 npm 安装 安装之后开发者工具点击npm构建 [代码]npm i wave-bg-weapp --production [代码] 引入 在app.json或index.json中引入组件 [代码]"usingComponents": { "bg": "/miniprogram_npm/wave-bg-weapp/bg/index" } [代码] 页面结构 [代码]<bg class="bg" color="#d13435" percent="90" position="top" amp="20"></bg> [代码] 参数 参数 说明 类型 默认值 版本 color 波浪填充颜色 String [代码]#d13435[代码] 1.0.2 percent 高度百分比 如:90(即波浪高度为canvas高度的90%) Number 50 1.0.2 position 波浪填充位置 可设置 [代码]top[代码]: 在上部填充颜色, [代码]bottom[代码]: 在下部填充颜色 String top 1.0.2 amp 波浪振幅 Number 20 2.0.2 插槽 不知道为何canvas写完之后发现层级很高,但是看官方文档支持同层渲染阿 没研究明白,弄了个插槽可以将一些元素覆盖上去,本质上是写了cover-view,所以插槽里只能用cover-view下支持的组件,而且开发者工具看不到覆盖的东西,真机测试有效果 [代码]<bg class="bg" style="height: 50vh;" color="#d13435" percent="90" position="top" amp="20"> <cover-view>插槽内容</cover-view> </bg> [代码] 仓库 https://github.com/wzs28150/wave-bg-weapp

效果展示 先上图，有图有真相。 [图片] 需求实现分析 需求：根据打卡天数进行排序，实现累积排行榜，查询前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：官方文档传送门

前言 花了3个月，一共输出 40 篇文章，这也算是一个阶段性的总结。在此做个文章分类集合，希望对大家有所帮助。 小程序前端 《专治按钮效果不明显（扩散动画效果）》 《小程序开发必备，这 5 款超实用开源插件！》 《仿抽奖助手奖品详情页面向上翻页效果》 《推荐 5 款高仿知名应用的开源项目！》 《生成海报很复杂？有它轻松搞定！》 《推荐一个自定义导航栏开源库》 《前端开发，必备的学习网站！》 《情侣券-领取动画分析》 《通过玩游戏来学习CSS》 《CSS不规范导致的布局显示问题》 《微信小程序如何引入npm包？》 《情侣券-选中卡片翻转动画》 《CSS：实现卡片洗牌效果》 《情侣券 v2.0 使用的 4 款开源组件》 小程序云开发 《使用聚合函数实现打卡排行榜》 《使用云开发做内容安全检查》 《云开发-实现分页功能》 《云开发-实现维护用户表》 《云开发-实现模糊搜索》 《云开发实战：实现订阅消息推送》 《如何优雅的调用云函数？》 《云开发实战-如何维护用户表？（优化版）》 《推荐 10 款使用云开发的开源项目》 《云开发：CloudBase CMS 实战使用指南》 小程序产品 《如何利用小程序提高10倍活动效果？》 《实战：让数据说话之自定义埋点分析》 《#小程序云开发挑战赛#-情侣券》 《小程序运营必备的 3 款官方小程序》 《小程序云开发挑战赛：情侣券 v1.1 版本迭代》 《云开发挑战赛复赛：情侣券介绍PPT》 《参加#小程序云开发挑战赛#复赛收获》 《云开发挑战赛决赛：情侣券介绍PPT》 通用知识 《如何重构？》 《如何高效学习？》 《如何看懂时序图？》 《为什么优秀的程序员都写博客？》 《我从 Android 转到 微信小程序 的思考》 最后 后续计划会写更多云开发相关的文章以及小程序基础系列学习文章。

Parser - 富文本解析 GitHub：https://github.com/jin-yufeng/Parser [图片] calendar - 预约日历 GitHub：https://github.com/jasondu/wxa-plugin-calendar [图片] cropper - 图片裁剪 GitHub：https://github.com/wx-plugin/image-cropper [图片] wxSearch - 搜索框 Github：https://github.com/icindy/wxSearch [图片] WxValidate - 表单验证 Github：https://github.com/wux-weapp/wx-extend/blob/master/docs/components/validate.md [图片] 如有收获，记得点赞、收藏 如有补充或者疑问，欢迎进行留言讨论

目前真机调试设置了2.10.4~2.11.2，在开发工具上是行的，但是真机不行，麻烦微信那边解决一下，毕竟到4月份了wx.getUserInfo接口改了，如果wx.getUserProfile还是不行的话怎么办。。。。 真机版本： [图片] 代码输出： [图片] 输出结果： [图片]

更新时间：2小时