个人案例
- 喂奶小账本
喂奶 记录
喂奶小账本扫码体验
- 百货小账本
666
百录扫码体验
- 截图组件(修正版,上篇删了,有bug)
刚才发的截图时发生错位,现在重新发 https://developers.weixin.qq.com/s/hzVM3BmU7Paz 以后有时间会出一整套原生的框架,开源 开源 开源,希望大神指点一二
2019-08-14 - 小程序云函数的高级玩法-路由
一般情况下,一个云函数完成单一的逻辑功能,就是一个类的方法一样,如图: [图片] 但是受限免费用户最多只能使用20个云函数,想要在单一云函数中实现多个复杂的功能就需要通过参数来区别,可读性差,不利于管理。通过路由,尝试将请求归类,一个云函数处理某一类的请求,比如有专门负责处理用户的,或者专门处理支付的云函数。如图: [图片] 为了方便大家试用,腾讯云 Tencent Cloud Base 团队开发了 tcb-router,云函数路由管理库方便大家使用。 基于 koa 风格的小程序·云开发云函数轻量级类路由库,主要用于优化服务端函数处理逻辑 使用 npm install --save tcb-router 云函数端 // 云函数的 index.js const TcbRouter = require(’./router’); exports.main = (event, context) => { const app = new TcbRouter({ event }); [代码]// app.use 表示该中间件会适用于所有的路由 app.use(async (ctx, next) => { ctx.data = {}; await next(); // 执行下一中间件 }); // 路由为数组表示,该中间件适用于 user 和 timer 两个路由 app.router(['user', 'timer'], async (ctx, next) => { ctx.data.company = 'Tencent'; await next(); // 执行下一中间件 }); // 路由为字符串,该中间件只适用于 user 路由 app.router('user', async (ctx, next) => { ctx.data.name = 'heyli'; await next(); // 执行下一中间件 }, async (ctx, next) => { ctx.data.sex = 'male'; await next(); // 执行下一中间件 }, async (ctx) => { ctx.data.city = 'Foshan'; // ctx.body 返回数据到小程序端 ctx.body = { code: 0, data: ctx.data}; }); // 路由为字符串,该中间件只适用于 timer 路由 app.router('timer', async (ctx, next) => { ctx.data.name = 'flytam'; await next(); // 执行下一中间件 }, async (ctx, next) => { ctx.data.sex = await new Promise(resolve => { // 等待500ms,再执行下一中间件 setTimeout(() => { resolve('male'); }, 500); }); await next(); // 执行下一中间件 }, async (ctx)=> { ctx.data.city = 'Taishan'; // ctx.body 返回数据到小程序端 ctx.body = { code: 0, data: ctx.data }; }); return app.serve(); [代码] } tips: 小程序云函数的 node 环境默认支持 async/await 语法,推荐涉及到的异步操作时像 demo 中那样使用 小程序端 // 调用名为 router 的云函数,路由名为 user wx.cloud.callFunction({ // 要调用的云函数名称 name: “router”, // 传递给云函数的参数 data: { $url: “user”, // 要调用的路由的路径,传入准确路径或者通配符* other: “xxx” } }); 完整的实例,请参考我的另一篇博客: 分享使用tcb-router路由开发的云函数短信平台SDK
2019-04-20 - 微信小程序注册、登录小功能都在这
微信小程序实现注册、登录页面的小功能整理,希望对大家有帮助。 1. 正则验证手机号码 [代码]var[代码] [代码]mobile = that.data.phone;[代码][代码] [代码][代码]var[代码] [代码]myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;[代码][代码] [代码][代码]if[代码] [代码](!myreg.test(mobile)) {[代码][代码] [代码][代码]wx.showToast({[代码][代码] [代码][代码]title: [代码][代码]'手机号有误!'[代码][代码],[代码][代码] [代码][代码]icon: [代码][代码]'success'[代码][代码],[代码][代码] [代码][代码]duration: 1500[代码][代码] [代码][代码]})[代码][代码] [代码][代码]return[代码] [代码];[代码][代码] [代码][代码]}[代码][代码] [代码][代码]wx.showToast({[代码][代码] [代码][代码]title: [代码][代码]'手机号正确!'[代码][代码],[代码][代码] [代码][代码]icon: [代码][代码]'success'[代码][代码],[代码][代码] [代码][代码]duration: 1500[代码][代码] [代码][代码]})[代码]2. 60秒倒计时 [图片] 发送短信验证码后会有60秒的倒计时功能。 网上有很多这种插件,很方便 比如: http://smsow.zhenzikj.com/doc/sdk.html [图片] 使用方法1.引入插件countdown.js [代码]var[代码] [代码]CountDown = require([代码][代码]'../../utils/countdown.js'[代码][代码]);[代码] 2.在 onLoad 周期初始化 [代码]onLoad: [代码][代码]function[代码] [代码]() {[代码][代码] [代码][代码]this[代码][代码].countdown = [代码][代码]new[代码] [代码]CountDown([代码][代码]this[代码][代码]);[代码][代码]}[代码] 3. 在获取验证码的按钮上增加captchaDisabled、captchaTxt 分别用于控制倒计时过程中是否可以点击、倒计时秒数提示 [代码]<button class=[代码][代码]'codeBtn'[代码] [代码]bindtap=[代码][代码]'getSmsCaptcha'[代码] [代码]disabled=[代码][代码]'{{captchaDisabled}}'[代码][代码]>{{captchaTxt}}</button>[代码] 4. 调用start方法触发倒计时 [代码]getSmsCaptcha(e) {[代码][代码] [代码][代码]this[代码][代码].countdown.start();[代码][代码]}[代码] 3. 发送短信验证码 小编使用的是榛子云短信(http://smsow.zhenzikj.com/doc/sdk.html)的发送验证码短信。 目前提供了普通版和云函数版,建议下载云函数版的。两个版本中都提供了对验证码的支持,你无需生成验证码,SDK已经帮你都弄好了。 如何使用 1)配置域名 在微信公众平台-小程序管理中配置域名https://smsdeveloper.zhenzikj.com,如下图: [图片] 2) 引入sdk [代码]var[代码] [代码]zhenzisms = require([代码][代码]'../../utils/zhenzisms.js'[代码][代码]);[代码] 3)初始化 [代码]zhenzisms.client.init([代码][代码]'https://sms_developer.zhenzikj.com'[代码][代码], [代码][代码]'你的榛子云appId'[代码][代码], [代码][代码]'你的榛子云appSecret'[代码][代码]);[代码] 4) 发送验证码短信 [代码]zhenzisms.client.sendCode([代码][代码]function[代码] [代码](res) {[代码][代码] [代码][代码]wx.showToast({[代码][代码] [代码][代码]title: res.data.data,[代码][代码] [代码][代码]icon: [代码][代码]'none'[代码][代码],[代码][代码] [代码][代码]duration: 2000[代码][代码] [代码][代码]})[代码][代码] [代码][代码]}, that.data.phone, [代码][代码]'验证码为:{code}'[代码][代码], [代码][代码]''[代码][代码], 60 * 5, 4);[代码] 参数1:请求后的用于接收返回结果的回调函数 参数number:接收者手机号码 参数3:短信模板,其中{code}为验证码占位符,会自动替换 参数messageId:该条信息的唯一标识,可用于查询 参数seconds:验证码有效期,单位是秒 参数length:验证码长度,比如4位或6位 返回结果是json格式的字符串, code: 发送状态,0为成功。非0为发送失败,可从data中查看错误信息 当然,你也可以使用云函数版的,请参考文档: http://smsow.zhenzikj.com/doc/weixinmp_yun_sdk_doc2.html
2019-07-29 - # 使用小程序云开发API更新数组中的单个数组元素
使用小程序云开发API更新数组中的单个数组元素 看了看mongoDB的更新数据方式,找到了解决办法,解决方法如下,亲测可用: 第一种方法:使用位置操作符$ [代码]代码,条件更新写在云函数中 [代码] [图片] [代码]test_api集合原始数据如下 [代码] [图片] [代码]在云函数中执行1中的代码,数组users中id为1001的用户添加了一个新的属性test [代码] [图片] [代码]原理分析 [代码] where条件是查找数组中id属性为1001的用户 update中的使用’users.$.test’: ‘test’ 注意里面的$符号,在mongoDB中,这个符号叫做位置操作符,代表数组的下标,如下引自《mongoDB实战》 [图片] 第二种方法:直接使用数组下标 云函数代码 [图片] test_api集合原始数据如下 [图片] 代码执行后 [图片] 相对于第一种方法,这种方法更加简单,只不过users.1.test这种写法有点颠覆js和java中的属性书写规则,让人感觉怪怪的,在mongoDB中,也支持点数字这种写法。 一个可能的疑惑 可不可以写作’users[1].test’:‘test’,测试结果如下: [图片] [图片] 可以看到’user[1]'无法被识别为数组的第二个元素,而是作为了属性名新增了一个属性,结论:必须写成”点数字“不能写成“中括号” 结论: 经过测试,使用这两种种方法可以更新数组中的一个元素。 方法一适合在不知道数组元素下标的情况下根据查询条件更新元素; 方法二适合在知道数组元素下标的情况下更新元素; 当然也存在既知道元素下标也可以通过属性查到的情况,想用哪个就看心情了-.- 但是暂未找到查询返回数组中的一个元素的方法,再探索探索吧 ——。——
2019-03-06