- 小程序app.onLaunch与page.onLoad异步问题的最佳实践
场景: 在小程序中大家应该都有这样的场景,在onLaunch里用wx.login静默登录拿到code,再用code去发送请求获取token、用户信息等,整个过程都是异步的,然后我们在业务页面里onLoad去用的时候异步请求还没回来,导致没拿到想要的数据,以往要么监听是否拿到,要么自己封装一套回调,总之都挺麻烦,每个页面都要写一堆无关当前页面的逻辑。 直接上终极解决方案,公司内部已接入两年很稳定: 1.可完美解决异步问题 2.不污染原生生命周期,与onLoad等钩子共存 3.使用方便 4.可灵活定制异步钩子 5.采用监听模式实现,接入无需修改以前相关逻辑 6.支持各种小程序和vue架构 。。。 //为了简洁明了的展示使用场景,以下有部分是伪代码,请勿直接粘贴使用,具体使用代码看Github文档 //app.js //globalData提出来声明 let globalData = { // 是否已拿到token token: '', // 用户信息 userInfo: { userId: '', head: '' } } //注册自定义钩子 import CustomHook from 'spa-custom-hooks'; CustomHook.install({ 'Login':{ name:'Login', watchKey: 'token', onUpdate(token){ //有token则触发此钩子 return !!token; } }, 'User':{ name:'User', watchKey: 'userInfo', onUpdate(user){ //获取到userinfo里的userId则触发此钩子 return !!user.userId; } } }, globalData) // 正常走初始化逻辑 App({ globalData, onLaunch() { //发起异步登录拿token login((token)=>{ this.globalData.token = token //使用token拿用户信息 getUser((user)=>{ this.globalData.user = user }) }) } }) //关键点来了 //Page.js,业务页面使用 Page({ onLoadLogin() { //拿到token啦,可以使用token发起请求了 const token = getApp().globalData.token }, onLoadUser() { //拿到用户信息啦 const userInfo = getApp().globalData.userInfo }, onReadyUser() { //页面初次渲染完毕 && 拿到用户信息,可以把头像渲染在canvas上面啦 const userInfo = getApp().globalData.userInfo // 获取canvas上下文 const ctx = getCanvasContext2d() ctx.drawImage(userInfo.head,0,0,100,100) }, onShowUser() { //页面每次显示 && 拿到用户信息,我要在页面每次显示的时候根据userInfo走不同的逻辑 const userInfo = getApp().globalData.userInfo switch(userInfo.sex){ case 0: // 走女生逻辑 break case 1: // 走男生逻辑 break } } }) 具体文档和Demo见↓ Github:https://github.com/1977474741/spa-custom-hooks 祝大家用的愉快,记得star哦
2023-04-23 - 蓝牙wx.writeBLECharacteristicValue能发送gb2312指令给单片机?
const val = gb.encodeToGb2312('测试') const num = that.data.value console.log(val); var buffer = util.stringToBytes('+$CCTXA,' + num + ',1,2,A4' + val + '*7C\n'); console.log(buffer); wx.writeBLECharacteristicValue({ deviceId: app.globalData.deviceId, serviceId: app.globalData.serviceId, characteristicId: '0000FFE2-0000-1000-8000-00805F9B34FB', value: buffer, success: function () {}, })
2022-09-16 - 201 商户订单号重复 问题解决
我们在做支付时,如果第一次吊起支付,用户没有支付,下次再进入订单列表重新支付时,就会报这个错误。 201 商户订单号重复 [图片] 解决办法呢,就是每次支付的时候,不管是新下单支付,还是第一次没有支付成功,再次吊起支付,我们都做一个随机的处理,就是每一次提交的outTradeNo都不一样。 pay云函数 [代码]// 云函数代码 const cloud = require('wx-server-sdk') cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV }) exports.main = async (event, context) => { let orderId = event.outTradeNo.substring(0, 15) + new Date().getTime() await cloud.database().collection('mh-dingdan') .doc(event.outTradeNo) .update({ data: { orderId: orderId } }) const res = await cloud.cloudPay.unifiedOrder({ "body": event.goodName, //商品名称或商品描述 "outTradeNo": orderId, //订单号 "spbillCreateIp": "127.0.0.1", "subMchId": "1615986178", //****** 微信支付商户号 "totalFee": event.totalFee * 100, //支付的金额,单位分 "envId": "cloud1-3g5spw8wbb2af38f", "functionName": "payCallBack" //支付成功的回调 }) return res } [代码] 对应的payCallBack云函数做定当状态更新 [代码]// 云函数入口文件 const cloud = require('wx-server-sdk') cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV }) // 云函数入口函数 exports.main = async (event, context) => { //订单号 event.outTradeNo return await cloud.database().collection('mh-dingdan') .where({ orderId: event.outTradeNo }) .update({ data: { status: 1 } }).then(res => { return { errcode: 0, errmsg: '支付成功' } }).catch(res => { return res }) } [代码]
2022-03-20 - 小程序云开发:使用云函数实现模糊搜索功能
[图片] 做小程序的时候大家都会需要到搜索的功能,今天就把我这边测试成功的案例给大家。 微信官方文档:获取一个集合的数据如果要获取一个集合的数据,比如获取 todos 集合上的所有记录,可以在集合上调用 [代码]get[代码] 方法获取,但通常不建议这么使用,在小程序中我们需要尽量避免一次性获取过量的数据,只应获取必要的数据。为了防止误操作以及保护小程序体验,小程序端在获取集合数据时服务器一次默认并且最多返回 20 条记录,云函数端这个数字则是 100。开发者可以通过 [代码]limit[代码] 方法指定需要获取的记录数量,但小程序端不能超过 20 条,云函数端不能超过 100 条。话不多说,代码开始: search云函数部分(PS:记得上传云函数) // 云函数入口文件 const cloud = require('wx-server-sdk') cloud.init() const db = cloud.database(); // 云函数入口函数 exports.main = async (event, context) => { const wxContext = cloud.getWXContext() let keyWords = event._keyword try { //这里的keyWords是前端小程序访问的参数_keyword return await db.collection('softshow').limit(50).where( db.command.or([{ //使用正则查询,实现对‘name’字段的搜索的模糊查询 name: db.RegExp({ regexp: keyWords, options: 'i', //大小写不区分 }), } //下面可以增加更多的选项,可以做多字段的选择 ]) ).get() } catch (e) { console.log(e) } return { event, } } search.wxml部分代码 <view class="page-box"> <view class="page-content"> <view class="search-wrap radius-border"> <view class="search-type"> <icon class="searchcion" size='20' type='search'></icon> </view> <input class="search-input" bindinput="bindSearchKey" placeholder="请输入关键字" value="{{searchValue}}" /> <view class="search-button"> <view class='sousuo' catchtap="see" style="font-size:32rpx">搜索</view> </view> </view> </view> <!-- 搜索列表 --> <block wx:if='{{obj}}' wx:for='{{obj}}' wx:key=''> <view class="list-box"> <view class="img-wrap"> <image class="img-h5" src="{{item.logo}}"></image> </view> <view class="info"> <view class="title">{{item.name}}</view> </view> </view> </block> </view> search.wxss部分代码 .page-content{ padding-top: 15rpx; margin-bottom: 20px; } .search-wrap{ overflow: hidden; border-radius: 8rpx; height: 40px; display: flex; align-items: center; border-radius: 5px; background-color: #fbfbfb; font-size: 0; line-height: 1; position: relative; } .search-input{ margin: 0 8px; flex: 1; height: 100%; font-size: 16px; } .search-button{ background-color: #00ae65; width: 70px; height: 100%; display: flex; align-items: center; justify-content: center; color: #fff; border-radius:0 5px 5px 0; } .search-type{ width: 40px; height: 100%; display: flex; align-items: center; justify-content: center; color: #333; font-size: 14px; position: relative; background-color: #e4e4e4; } /* 列表样式 */ .list-box{ position: relative; padding: 12px 16px; padding-left: 70px; height: 40px; background-color: #fff; margin-bottom: 10px; } .img-wrap{ position: absolute; left: 16px; top: 12px; width: 40px; height: 40px; border-radius: 3px; overflow: hidden; background-color: #eee; } .img-h5{ position: absolute; width: 100%; height: 100%; background-position: 50%; background-size: cover; background-repeat: no-repeat; background-color: #eee; border-radius: inherit; } .info{ height: 98%; flex-direction: column; justify-content: space-between; } .title{ font-size: 16px; color: #333; line-height: 40px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zaiyao{ font-size: 13px; color: #999; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } search.js部分代码 // pages/search/search.js var text='' Page({ /** * 页面的初始数据 */ data: { }, see(){ wx.cloud.callFunction({ name: 'search', data: { //this.data.searchKey由页面输入框的内容 _keyword: this.data.searchKey, }, complete: res => { console.log(res) let resources = res.result.data this.setData({ obj: resources }) }, fail: res => { }, }) }, bindSearchKey: function(e) { this.setData({ searchKey: e.detail.value }) }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, })
2022-03-28 - 【物流助手】云开发logistics.addOrder,圆通快递报9300501?
通过物流助手生成圆通快递的运单,报错 errCode: 9300501 errMsg: "openapi.logistics.addOrder:fail delivery logic fail rid: 61cf7920-4b20a5a7-47d232c1" appid wx1a87d6c4bee8214c 云函数调用成功 返回结果 {"errCode":9300501,"errMsg":"openapi.logistics.addOrder:fail delivery logic fail rid: 61cf7920-4b20a5a7-47d232c1"} 日志 START REPORT RequestId:7776eb63-6a82-11ec-af27-3e24585222e7 Duration:628ms Memory:256MB MemUsage:26.455406MB END errCode 的合法值: 9300501快递侧逻辑错误,详细原因需要看 delivery_resultcode, 请先确认一下编码方式,python建议 json.dumps(b, ensure_ascii=False),php建议 json_encode($arr, JSON_UNESCAPED_UNICODE) 使用的是云开发。 还请帮我看看,什么情况导致的?
2022-01-05 - 生成运单报:fail delivery logic fai?
通过物流助手生成圆通快递的运单,报错 errCode: 9300501 errMsg: "openapi.logistics.addOrder:fail delivery logic fail rid: 61cf7920-4b20a5a7-47d232c1" appid wx1a87d6c4bee8214c 云函数调用成功 返回结果 {"errCode":9300501,"errMsg":"openapi.logistics.addOrder:fail delivery logic fail rid: 61cf7920-4b20a5a7-47d232c1"} 日志 START REPORT RequestId:7776eb63-6a82-11ec-af27-3e24585222e7 Duration:628ms Memory:256MB MemUsage:26.455406MB END errCode 的合法值: 9300501快递侧逻辑错误,详细原因需要看 delivery_resultcode, 请先确认一下编码方式,python建议 json.dumps(b, ensure_ascii=False),php建议 json_encode($arr, JSON_UNESCAPED_UNICODE) 使用的是云开发。 还请帮我看看,什么情况导致的?
2022-01-01 - 如何批量下载云开发存储文件到本地
有人说打开云开发,存储点击文件有下载地址,这对于少量资源是可以的,下面的方法是下载上万文件的方法: 通过访问官方:https://docs.cloudbase.net/cli-v1/install [图片] [图片] 第四步、云存储文件路径:/qrcode/20220311 ==》需要下载到本地:如 E:\qrcode 1、首先在本地: E:\qrcode\文件内创建一个名为:cloudbaserc.json 的json文件。 { "envId":"你的云开发环境的id" } 2、通过命令访问E盘: e: 3、访问需要下载到本地文件路径 cd qrcode 4、开始下载云端文件到本地,执行命令,对于云端文件路径有子目录可以通过 / 进行访问。 tcb storage download qrcode/20220311 . --dir 5、等等文件下载中,直至文件全部下载。
2022-03-11 - 分账比例最高只有30%?是否还能更高?如何申请高比例分账?
关于高分账比例申请的渠道,可通过以下的流程进行咨询: 1、微信关注"腾讯客服"公众号,在公众号内进行提问或输入'人工'转人工解答 2、拨打微信支付服务热线(95017转2)
2024-09-13 - 云开发云函数定时触发器讲解
任何可以产生事件,触发云函数执行的均可以被称为触发器,而定时触发器则是可以处理周期性的事情,比如时报、日报、周报等通知提醒,也可以处理倒计时任务,比如节假日、纪念日以及你可以指定一个具体时间的倒计时任务,除此之外,定时触发器还可以用来周期性处理一些定时任务。比如定期清理一些不必要的数据,定期更新集合内的数据。 13.5.1 定时触发器使用说明1、定时触发器的配置与部署配置了定时触发器的云函数,会在相应时间点被自动触发,云函数的返回结果不会返回给调用方。在对某个云函数使用定时触发器前,首先要保证该云函数在小程序端可以调用成功,更准确的说是能够在不传入参数的情况下在云开发控制台的云端测试能调试成功(小程序端调用有登录态)。 云函数目录里的 config.json 文件可以用来配置权限和定时触发器,如果你的云函数目录下面没有这个配置文件,可以自己创建一个,创建的结构目录如下: test //云函数目录 ├── config.json //权限和定时触发器等的配置文件 ├── index.js //云函数 ├── package.json //云函数的依赖管理 然后再来在配置文件 config.json 里进行类似如何格式的配置,config.json 严格遵循配置文件所要求的格式,比如数组最后一项不能有逗号[代码],[代码];配置文件里不能有注释等 triggers 字段是触发器数组,但是目前云函数只支持一个触发器,即数组只能填写一个,不可添加多个;name 是触发器的名字,最大支持 60 个字符,支持 a-z, A-Z, 0-9, - 和 _,必须以字母开头;type 为触发器类型,timer 是定时触发器config 是触发器的定时配置,里面为 cron 表达式(后面有介绍),cron 有七个必需字段,不能多也不能少(以下为每天早上 9 点到 12 点每隔 5 秒触发一次);{ "triggers": [ { "name": "tomylove", "type": "timer", "config": "*/5 * 9-12 * * * *" } ] } 当我们在修改触发器配置文件 config.json 后,首先鼠标右键 config.json 选择“云函数增量上传:更新文件”,然后再右键 config.json 选择“上传触发器”。这里的“云函数增量上传:更新文件”是让云函数端的触发器文件更新;而“上传触发器”则是让触发器开始生效执行。如果在云函数端的触发器没有更新的情况下就“上传触发器”来执行定时触发,文件可能没有更新,执行的还是旧的触发器内容。当我们想暂停或删除触发器时,可以右键选择“删除触发器”。 2、Cron 表达式语法Cron 表达式有七个必填字段,按空格分隔,既不能多写也不能少写,每一个字段都有它的含义对应着不同的时间点,表达式的取值都为整数且为时间制的范围(注意月在星期的前面): 第一位第二位第三位第四位第五位第六位第七位秒(0-59 )分钟(0-59)小时(0-23)日(1-31)月(1-12或三个字母的英文缩写)星期(0-6或三个字母的英文缩写)年(1970~2099 ) 下面是 cron 表达式的案例,以及我们需要了解一下 cron 表达式里的通配符以及直接写数字的含义: [代码],[代码],表示并集,在时间的表述里是“和”的意思,比如在“小时”字段中, [代码]1,2,3[代码]表示 1 点、2 点和 3 点;[代码]-[代码],指定范围的所有值,在时间的表述里是“到”的意思,比如在“日”字段中,[代码]1-15[代码]包含指定月份的 1 号到 15 号;[代码]*[代码],表示所有值,在时间的表述里是“每”的意思,比如在“小时”字段中,[代码]*[代码]表示每小时;[代码]/[代码],指定步长,在时间的表述里是“隔”的意思,比如在“秒”字段中,[代码]*/5[代码]表示每隔 5 秒;直接写数字,在时间的表述里是“第”(时间点)的意思,比如在“月”字段中,[代码]5[代码]表示每月的第 5 日;//表示每隔5秒触发一次, */5 * * * * * * //表示在每月的1日的凌晨2点触发 0 0 2 1 * * * //表示在周一到周五每天上午10:15触发 0 15 10 * * MON-FRI * //表示在每天上午10点,下午2点,4点触发 0 0 10,14,16 * * * * //表示在每天上午9点到下午5点内每半小时触发 0 */30 9-17 * * * * //表示在每个星期三中午12点触发 0 0 12 * * WED * 定时触发器的 Cron 语法没法实现每隔 90 秒钟或 90 分钟发送一次这样的效果,因为 90 秒超过了秒的时间制上限 60,而 cron 在跨位组合(比如 90 秒需要结合秒和分)上无法覆盖所有的时间;除此之外,云开发的触发器暂时不支持多个定时触发器的叠加;在 Cron 表达式中的“日”和“星期”字段同时指定值时,两者为“或”的关系,即两者的条件均生效;值得一提的是,尽管云函数的时区为 UTC+0 时区,但是定时触发器的时间还是北京时间。 13.5.2 用定时触发器调用云函数定时触发器的使用非常简单,使用开发者工具新建一个云函数比如 trigger,然后在 index.js 里输入以下代码: const cloud = require("wx-server-sdk"); cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV, }); exports.main = async (event, context) => { console.log(event); return event; }; 再在 trigger 云函数目录下的 config.json(如果没有这个文件,就创建一个),然后输入以下触发器,为了调试方便,我们可以每隔 5 秒触发一次: { "permissions": { "openapi": [ ] }, "triggers": [ { "name": "tomylove", "type": "timer", "config": "*/5 * * * * * *" } ] } 然后分别右键 index.js 和 config.json,选择“云函数增量上传:更新文件”,然后再来右键 config.json 选择“上传触发器”。云函数就会每隔 5 秒自动触发,相关的日志我们可以在开发者工具的云开发控制台以及腾讯云云开发网页控制台的云函数的日志里查看。 注意小程序端调用 trigger 云函数返回的 event 对象,和使用定时触发器返回的 event 对象的不同,用定时触发器触发云函数是获取不到 openId 的,同时这里有一个 Time 时间是时区为 UTC+0 的时间,比北京时间晚 8 个小时: //在小程序端调用trigger云函数之后返回的event对象 { "userInfo":{ "appId":"wxda99******7046", "openId":"oUL-m5F******buEDsn8" } } //使用定时触发器触发云函数之后返回的event对象 { "Message":"", "Time":"2020-06-11T11:43:35Z", "TriggerName":"tomylove", "Type":"timer", "userInfo":{ "appId":"wxda99********46" } } 13.5.3、定时触发器的应用定时触发器的应用非常广泛,以下仅举一些常用案例,并加以说明: 1、结合消息推送这里的消息推送不仅仅只是指订阅消息,还可以是统一服务消息、公众号的消息(可以用云函数开发微信公众号)、小程序内自己开发的通知(只是用户只有在打开小程序时才能看到)、Email 邮件等等。 比如用户订阅了日报、周报、月报等周期性的通知提醒或者我们需要给用户发送一些汇总信息,就可以固定写一个定时触发器,比如我们需要给指定用户发送工作周报,每周五晚上 17 点 30 分就定时从数据库获取数据发送消息,cron 表达式写法如下: * 30 17 * * FRI * 还可以用来处理一些倒计时(指定时间点)的任务,比如节假日、纪念日以及一些活动时间节点(定时触发器目前只能一个云函数配一个触发器,但是可以提前管理),比如我们希望在六一儿童节的早上 9 点调用云函数给指定用户群体发送消息: 0 0 9 1 6 * * 当然这样的具体时间点显得过于的不灵活,但是如果把时间与云开发数据库结合起来,灵活性就会大很多,比如在运营上每天早上 11 点是你们用户访问最多的时间点,你只需要写一个云函数,把所有的活动都在这个时间点来推送,让定时触发器每天这个时间点都触发,有活动(数据库里有数据)就会发消息,如果没有就不发(云函数调用一次的成本极低)。 如果是实时数据,我们还可以把定时触发器的频率调高,每 5 秒就触发一次,比如我们的数据库只要有最新的数据,就会发消息给指定用户。尽管不是完全的实时,但是 5 秒的频率和实时的差别也就不大了。你也可以根据情况,来调整触发器的频率,毕竟 5 秒和 1 分钟的频率给用户的体验差异并没有太大,但是成本却是 12 倍的关系。 可能你还希望在指定的时间段才触发云函数,比如你只希望在工作日、或者在早上 9 点到晚上 18 点才触发,在指定的时间段才触发既可以让触发更精准不扰民,也可以节约成本,比如下面的触发器就是工作日早上 9 点到 12 点和下午 14 点到 18 点这个时间段,每 5 秒触发一次。 */5 * 9-12,14-18 * MON,TUE,WED,THU,FRI * 从以上案例我们可以了解到,云函数的定时触发可以来自于 cron 表达式的配置,我们可以指定时间点时间段和频率来达到我们想要的效果,同时这个时间“也可以来自于数据库的配置”(伪装),意思是我们可以设置触发器的时间段或频率,如果数据库里有数据就发送,没有数据就不发送,这样就可以达到触发器在时间上的灵活性了。 2、实时获取数据有的时候我们的数据并不是来自于数据库,而是来自于第三方服务,比如前面介绍过的历史上的今天的 API,天气的 API,知乎日报的 API 等等,以及一些 webhook,这些 API 和第三方服务提供的是 json 格式的文件,API 的数据也会随时更新,但是它们更新了却并不会主动通知我们,这时我们可以使用定时触发器向这些 API 发起请求,如果数据出现更新,我们就可以将更新的数据存储到我们的数据库或者进行其他处理,比如企业微信的机器人等机器人通知服务就是如此。 当然定期获取的数据还可以是爬虫,比如我们可以定期抓取指定关键词的新闻或者指定网站的动态,当爬虫获取到了不同的数据的时候,就将最新的动态以机器人消息或者其他方式进行及时的处理。 也就是说,我们无法实时监听到第三方 API 或者网站数据的变动,但是可以用定时触发器来发起请求或者爬虫抓取数据,通过数据的变化来达到“实时”获取数据的目的。 3、自动化处理在数据库的设计里,我们就提到有时候需要对数据库里的数据进行定期的备份与删除等清理维护工作,比如超过一定时间的日志,具有很强时效性的活动数据,以及为了性能考虑而做的虚假删除(数据库性能与优化有介绍)等,毕竟数据库有一定的存储成本而且过多无用数据也会影响数据库的性能,我们可以写一个云函数用定时触发器来执行此类任务。 我们还可以在用户并发比较少的时间段(比如凌晨几点)来处理一些比较耗云函数、数据库性能的任务,比如图片的审核与裁剪、缩略等处理,用户评论是否包含敏感词汇(尽管经过安全处理,但是有时候我们还会设置特别的敏感词),数据的汇总,云存储里废弃文件的删除,用户信息是否完整等等。 也就是说,结合定时触发器,我们可以实现一些任务的自动化处理。 4、密集型任务分流我们知道云函数在处理一些复杂性的任务时是有一些限制的,一是执行时间的限制,建议在设置时执行时间一般不要超过 20s,最长不要超过 60s;二是并发的限制,云函数最大的并发为 1000;三是云函数在查询数据库时一次可以获取最多 1000 条的数据,面对这三个限制,我们应该如何处理密集型的任务呢,比如发送 100 万封邮件,导出几百万条数据到 Excel,发送十万级的订阅消息或消息等等,这个时候就可以使用到定时触发器来处理了。 借助于定时触发器,我们可以将需要耗时较长、对并发要求较高以及数据库请求等的任务进行分批处理,比如我们要给 100 万人发邮件:云函数发起数据库请求,一次只请求 1000 条未发送过邮件的用户(用 where 条件查询某个字段,比如[代码]status:false[代码]),然后将邮件发给 1000 个人(可以参考前面的邮件发送),发完邮件并对这 1000 条数据进行标记(比如使用更新指令将 status 改为 true),这样下次查询未发送过邮件的用户时,就不会重复发送了。通过定时触发器,每 2 秒执行一次发送任务,几十分钟就可以处理完任务。
2021-09-10