需求：在进行复杂程序操作的同时，毫秒级计时。 方案流程： 1. 使用setData进行毫秒级计时,以10s为例，代码很简单： [图片] Ok，搞定了，测试一下，ios正常，android性能欠佳的机型、在没有执行复杂运算的情况居然差了几秒。。。？(有的甚至更多) 我们再稍微加点东西： [图片] 结果：10s的计时跑到了20多秒 原因：主线程中有其他任务在执行导致setInterval延迟执行。 2. 既然这样，我们减去延迟带来的时间差 [图片] 结果：达到效果，只存在了毫秒级的误差了。 完美解决？我们来搞点事情 [图片] 页面渲染出现了卡顿，会看到计时不会连续的变化，出现跳跃减少。 原因分析：数据的setData通信，造成的延迟。 3. 既然setData会有延迟，那么还有什么办法可以更新页面？——canvas 马上动手写个： [图片] 完美决绝！！，requestAnimationFrame小程序之前不支持，若支持可替代，实现方案有多种。 效果对比： 普通方式：http://video.static.logan4846.com/public/1.mp4 canvas：http://video.static.logan4846.com/public/2.mp4 代码片段: https://developers.weixin.qq.com/s/CV8mctmn7AeE

2019年上半年微信发布了基于小程序页面的搜索，为了让我们更好地发现及理解小程序的页面，结合过去一段时间来我们遇到的各种情况，我们强烈建议各位开发者花一些宝贵的时间认真阅读本文：） 爬虫访问小程序内页面时，会携带特定的 user-agent "mpcrawler" 及场景值：1129 1. 小程序里跳转的页面 (url) 可被直接打开。 小程序页面内的跳转url是我们爬虫发现页面的重要来源，且搜索引擎召回的结果页面 (url) 是必须能直接打开，不依赖上下文状态的。特别的：建议页面所需的参数都包含在url 2. 页面跳转优先采用navigator组件。 小程序提供了两种页面路由方式：   a.navigator 组件      b. 路由 API，包括 navigateTo / redirectTo / switchTab / navigateBack / reLaunch 建议使用 navigator 组件，若不得不使用API，可在爬虫访问时屏蔽针对点击设置的时间锁或变量锁。 3.清晰简洁的页面参数。 结构清晰、简洁、参数有含义的 querystring 对抓取以及后续的分析都有很大帮助，但是将 JSON 数据作为参数的方式是比较糟糕的实现。 4. 必要的时候才请求用户进行授权、登录、绑定手机号等。 建议在必须的时候才要求用户授权（比如阅读文章可以匿名，而发表评论需要留名）。 5. 我们不收录 web-view 中的任何内容。 我们暂时做不到这一点，长期来看，我们可能也做不到。 6. 利用 sitemap 配置引导爬虫抓取，同时屏蔽无搜索价值的路径。 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html 7. 设置一个清晰的标题和页面缩略图。 页面标题和缩略图对于我们理解页面和提高曝光转化有重要的作用。 通过wx.setNavigationBarTitle或 自定义转发内容onShareAppMessage对页面的标题和缩略图设置，另外也为 video、audio 组件补齐 poster /poster-for-crawler属性。 8. 使用页面路径推送能力 可极大丰富微信可以收录的内容，进而提高小程序内容的曝光机会。请参考： https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/search/search.submitPages.html

首先回顾一下上期的分享 云开发还可以这么玩！从红包外卖券薅羊毛说起... 其中聊到了如何使用 tcb cli 及tcb framework，并对其进行扩展，以更高效、更便捷的进行项目的切换及部署。 今日偶逛社区，意外发现有同学提出了这样一个问题： 小程序云开发的环境切换，如何快速把云函数、存储导入到新环境？ 看到这个帖子，我不禁又陷入了沉思： [图片] 仔细看看，其实需求的解决方案在上期的分享中已经阐述的很清楚了。难道我的帖子没人看？难道我的SEO做的不够好？ 然而，回头再思考一下，通过修改配置文件、扩展cli命令的方式，其实并不是一种特别友好的方式。一是有一定的开发门槛，二是对操作人员，黑气吗黑的命令行也不是人见人爱...... 那么有没有一种方案既能做到配置简单，又对想要快速部署的新手甚至一窍不懂的小白友好呢？ 答案是肯定的。 来，首先快速体验一下快速部署的魅力！ 这是一个简单的博客小程序，基本的分类、文章、检索、浏览。 简陋，但是五脏俱全。 [图片] 你也想快速拥有并部署一个？没问题，请做以下准备工作： 1 一个开通了云开发并创建了云环境的小程序，复制他的appId备用； 2 小程序后台，开发管理-开发设置-小程序上传管理中，生成小程序上传密钥，下载密钥文件备用，同时关闭代码上传ip保护； 接下来，点击下方按钮，按照步骤进行（请在pc浏览器下进行此操作，移动端体验并不好）： [图片] 选择云环境： [图片] 输入小程序appid，访问链接上传密钥文件生成base64字符串，并填写： [图片] 点击“完成”，稍等片刻，等待构建部署完成，见证奇迹的时刻到了！ 进入腾讯云控制台，云函数及db创建部署完成： [图片] 进入小程序管理后台，版本管理。会发现已经上传了小程序版本： [图片] 还等什么？扫码体验吧！ 那么，这一切是怎么做到的？这个神奇的“部署到云开发”的按钮背后究竟隐藏着什么秘密？走进云开发即将为你揭晓...（跑题了） 有请今天的主角登场： 云开发一键部署按钮 正如一键部署的介绍中说： 一键部署按钮可以让公开的 Git 项目一键部署到云开发 CloudBase 上，大大简化用户部署的门槛，方便用户快速使用和体验应用。一键部署功能支持 Github，Gitlab，Coding，Gitee 等 Git 仓库地址。 一键部署其实就是在tcb framework的基础上，通过引入git项目，读取配置，从而能够快速的部署项目到云。 更多详细的，请大家参阅文档，有一个基础的认识。接下来针对此博客小程序来剖析一下详细的配置，相关git代码文末将放出。 1 DB插件配置： [图片] 部署的时候会自动生成分类（categories), 文章（articles），及数据库迁移记录（mirgates)三个集合，如果已存在，则会跳过创建； 2 云函数插件配置： [图片] api是整个博客的云函数接口，migrate是每次deploy时候执行的db迁移脚本，方便进行数据初始化、数据清洗。 3 小程序部署插件配置： [图片] 简单易懂。唯一需要注意的是{{env.WX_APPID}}和{{env.WX_CI_KEY}}。 没错，这就是之前准备工作中提到的小程序appid和小程序上传密钥了。 这里用到的是模板变量的概念：模板变量 所谓模板变量，实际是通过读取项目下的.env, .env.local,或者是用户自定义的.env.xxx配置文件，注入变量到cloudbaserc中，这样就可以方便的进行模式切换。 同时，也可以通过framework配置中requirement的environment配置，在一键部署的时候，通过用户的输入注入到配置文件中，实现自定义： [图片] [图片] 4 framework的hook配置： [图片] 所谓hook，即是在部署前后执行的钩子动作，可以进行一些预编译，或者在部署完成后执行相关的云函数进行一些操作。 这里postdeploy在部署完成后执行了migrate云函数，进行了db数据的一些初始化工作，感兴趣的可以看一下源码。 至此，一个可以完美支持一键部署的云开发小程序就配置ok了，可以进行一键部署了。 看，是不是很方便？ tcb Framework及一键部署，想象的空间还有很多，当然也存在一定的局限性，优点缺点都有待各位看官去进一步挖掘了。 无论如何，值得你去用！ 本项目源码见：https://github.com/yautah/cloudblog，欢迎指正、star、fork、pr，请勿用于商业用途，不然挖地三尺也要追则到底。

众所周知目前自开发小程序暂时不支持关联视频号。但是现在甲方爸爸需要真个功能，跟甲方爸爸说微信不支持，甲方爸爸不满意，给甲方爸爸实现这个功能，小程序不支持，掉了三根头发后终于想出了一个折中的办法：借用公众号。 具体思路如下：1，公众号添加一篇文章，插入视频号视频2，小程序webview 加载这篇公众号链接。具体操作： 1，添加公众号文章插入视频号视频 [图片] 2，添加好文章后，微信打开这篇文章，复制该文章链接 [图片] 3，微信小程序用webview 加载该链接，效果如下 [图片]

开门见山 工具地址 点我直达>>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✨✨ 谢谢 ~

先看效果： [图片] 纯云开发实现，下面说使用步骤： 一：开通商户的企业付款到领取功能 说明地址： https://pay.weixin.qq.com/wiki/doc/api/tools/mch_pay.php?chapter=14_1 使用条件 1、商户号（或同主体其他非服务商商户号）已入驻90日 2、截止今日回推30天，商户号（或同主体其他非服务商商户号）连续不间断保持有交易 使用条件是第一难，第二难在下面这里 [图片] 在网上找了很多，感觉是云开发这里的一个不完善地方，如果不填ip，会报这种错 [代码]{"errorCode":1,"errorMessage":"user code exception caught","stackTrace":"NO_AUTH"} [代码] [代码]<xml> <return_code><![CDATA[SUCCESS]]></return_code> <return_msg><![CDATA[此IP地址不允许调用接口，如有需要请登录微信支付商户平台更改配置]]></return_msg> <mch_appid><![CDATA[wx383426ad9ffe1111]]></mch_appid> <mchid><![CDATA[1536511111]]></mchid> <result_code><![CDATA[FAIL]]></result_code> <err_code><![CDATA[NO_AUTH]]></err_code> <err_code_des><![CDATA[此IP地址不允许调用接口，如有需要请登录微信支付商户平台更改配置]]></err_code_des> </xml> [代码] 云开发没有ip这个概念，所以这里有些无从下手，不过这里我采用了个替代方案，参考了社区帖子： https://developers.weixin.qq.com/community/develop/doc/00088cff3a40d87d80f7267b65b800 之后我也亲自验证了，基本上就是这几个，当然肯定不够，但是可以自己在逻辑上进行处理，ip以下： [代码]172.81.207.12 172.81.212.74 172.81.236.99 172.81.235.12 172.81.245.51 212.64.65.131 212.64.84.22 212.64.85.35 212.64.85.139 212.64.87.134 [代码] 接着，可以动手了 二、云开发部分 1、设置云存储 证书配置地址： [图片] 下载后有三个文件，我们只需要p12结尾的那个 [图片] 然后，将这个apiclient_cert.p12文件上传到你的云存储 [图片] 这里处理完了，我们只需要一个东西，就是fileID也就是常说的云存储ID（上图红框内容） 2、配置云函数 新建云函数ref云函数 [图片] 代码如下： [代码]const config = { appid: 'wx383426ad9ffe1111', //小程序Appid envName: 'zf-shcud', // 小程序云开发环境ID mchid: '1111111111', //商户号 partnerKey: '1111111111111111111111', //此处填服务商密钥 pfx: '', //证书初始化 fileID: 'cloud://zf-shcud.11111111111111111/apiclient_cert.p12' //证书云存储id }; const cloud = require('wx-server-sdk') cloud.init({ env: config.envName }) const db = cloud.database(); const tenpay = require('tenpay'); //支付核心模块 exports.main = async(event, context) => { //首先获取证书文件 const res = await cloud.downloadFile({ fileID: config.fileID, }) config.pfx = res.fileContent let pay = new tenpay(config,true) let result = await pay.transfers({ //这部分参数含义参考https://pay.weixin.qq.com/wiki/doc/api/tools/mch_pay.php?chapter=14_2 partner_trade_no: 'bookreflect' + Date.now() + event.num, openid: event.userinfo._openid, check_name: 'NO_CHECK', amount: parseInt(event.num) * 100, desc: '二手书小程序提现', }); if (result.result_code == 'SUCCESS') { //如果提现成功后的操作 //以下是进行余额计算 let re=await db.collection('user').doc(event.userinfo._id).update({ data: { parse: event.userinfo.parse - parseInt(event.num) } }); return re } } [代码] 需安装的依赖：wx-server-sdk、tenpay 这里只是实现了简单原始的提现操作，关于提现后，比如防止重复提交，提现限额这些，在开源二手书商城上有完整流程，地址： https://github.com/xuhuai66/used-book-pro 这种办法，不是每次都能成功提现，小概率遇到ip未在白名单情况，还是希望，云开发团队能尽快出一个更好的解决方案吧

在云开发的使用过程中，有不少的用户会提出自己的疑问，我如何才能在自己的云开发应用中加入一个回调地址？ 在实际开发过程中，不少涉及到支付、订单等异步操作的场景，会需要提供一个回调 URL，以确保在用户完成自己的支付过程后，由支付服务器对回调的 URL 发起请求，确认调用成功。因此，不少用户在使用时提出了自己的疑问，应该如何实现这样的功能？ 由于目前云开发云函数尚未对外提供 HTTP 调用的能力，因此，我们可以借助腾讯云提供的云函数和 API 网关，来实现类似的功能。 架构介绍 [图片] 在进行调用时开发者所设置的回调地址是一个 API 网关的地址，微信支付等服务的服务器在完成操作以后，会执行 HTTP 请求，请求 API 网关。 API 网关对应的是腾讯云云函数，我们可以在腾讯云云函数中调用云开发的 SDK，或者是云开发的 HTTP API，完成对云开发数据库的操作。 具体实现 依赖 腾讯云账号 小程序的 AppID 和 App Secret 实现 1. 创建云函数 访问 https://console.cloud.tencent.com/ ，使用你的腾讯云账号登陆，在顶部菜单栏中找到「云产品」— 「Serverless」—「云函数」 [图片] 在云函数中，选择「函数服务」，并在函数服务页面点击「新建」 [图片] 创建一个新的云函数，其中函数名称根据你的需要填写 [图片] 运行环境选择 Node.js 8.9,创建方式选择空白函数，完成后点击下一步。 在下一页不需要做修改，直接点击完成。 2. 创建 API 网关调用 在创建完成云函数以后，我们会进入到这样的界面，在这个界面中选择「触发方式」 [图片] 在触发方式页面新增一个触发方式，使用 「API 网关触发」，请求方法选择「ANY」，发布环境选择「发布」，鉴权方法选择「免鉴权」。 [图片] 填写完成后，点击保存，然后你会获得一个地址，这个地址就是你后续的回调地址。 [图片] 你可以将这个地址在浏览器中打开，可以看到这样的数据 [图片] 则说明我们的云函数完成了配置。 3. 编写程序调用 当我们完成了云函数的配置以后，接下来我们可以修改云函数，使其完成我们自己想要的功能。 我们希望云函数可以从外部发来的请求中获取到参数，并借助云开发提供的 API，对云开发数据库中的数据进行更新。则我们可以这样操作 我们在本地新建一个目录，并在其中执行如下命令(需要你提前安装了 N ode.js 环境) [代码]cd 新建文件夹 npm init -y npm install -y got [代码] 然后创建一个文件[代码]index.js[代码]，并在其中加入如下代码，并设置其中的 APPID、SECRET、ENV_ID 等字段。 [代码]'use strict'; const got = require('got'); const APPID = ''; // 小程序 APPID const SECRET = ''; // 小程序 Secret const ENV_ID = '' const TOKEN_URL = `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${APPID}&secret=${SECRET}` const QUERY_URL = 'https://api.weixin.qq.com/tcb/databasecollectionget?access_token=' exports.main_handler = async (event, context, callback) => { // 1. 提取参数 可以从 URL?id=1&status=2 中提取出 1 和 2 const id = event.queryString.id; const status = event.queryString.status; // 2. 获取 Token，用于后续的调用 let token_resp = await got(TOKEN_URL); let token = JSON.parse(token_resp.body).access_token const url = QUERY_URL + token; // 执行云开发命令 let result = await got(url, { method: 'POST', json: true, headers: { 'content-type': 'applicaiton/json', 'accept-encoding':'gzip' }, body: { "env": ENV_ID } }) return result.body }; [代码] 配置完成后，保存文件。 4. 上传代码 打包完成后，重新访问腾讯云控制台，找到刚刚创建的云函数，进入到「函数代码」中，选择其中的「本地上传文件夹」，选择你刚刚创建的文件夹，等待其自动压缩完成后，点击保存上传。 [图片] 上传完成后，会自动进行部署。 你可以重新访问刚刚生成的 API 网关地址，并在其后加入 id 和 status 参数，比如我的最后的地址是 [代码]https://service-51pn7koc-1251337088.gz.apigw.tencentcs.com/release/myFunction?id=1&status=2[代码] [图片] 访问以后，得到的结果是这样的 [图片] 这样就说明我成功的从云函数中访问了云数据库，并且通过一个无需鉴权的 API 地址获取到了信息。 总结 实际上，借助于 API 网关、云函数以及云开发的 API & SDK，你可以实现非常多的功能，能不能实现，就看你的想象力有没有达到啦。

上一篇介绍了云函数的初步使用，对于新手来说，可能有点迷糊，没关系，多创建几个项目试试，慢慢就会熟悉了。 对于云函数的开发，更多的是编写服务端的代码，而服务器又不能完全被我们掌控，所以，出现 BUG 的时候，会有一点刺手。而熟练掌握测试的方法，会较大的提高我们的开发效率。 下面就来介绍云函数的本地测试以及云端测试。 本地测试 还是以上一篇创建的云函数 [代码]history[代码] 为例，右键目录，点击「本地调试」。 [图片] 将会进入一个专门用来调试的界面，如下图： [图片] 如果有多个云函数的话，都会显示在左侧边栏上，中间是主要的调试区域，最常用的就是 [代码]console[代码] 标签以及 [代码]Source[代码] 标签。[代码]Console[代码] 就是控制台打印，代码中的打印语句都会显示在这里，也是最常用的调试方法。 [图片] [代码]Source[代码] 部分可以进行代码单步调试，对于复杂的逻辑，可以采用这种方法，使用方法与 Chrome 浏览器的调试几乎一致。 [图片] 最右侧用来触发云函数，也就是模拟调用，支持传入参数。 [图片] 注意：开启本地调试的时候，会检查本地是否安装相应的依赖，如果没有安装的话，需要以命令行的形式，进入该云函数的目录，运行 [代码]npm i[代码] 命令。 这个示例不需要任何的依赖，保持默认，点击调用，控制台得到如下图所示结果： [图片] 说明数据返回正常，第三方接口的调用应该没有问题。 云端测试 在本地测试没有问题，不代表在云端上也没问题。因为很有可能发生，云函数部署到腾讯云服务器上这个环节出现了问题。例如：代码部署不完整，环境变量错了等等。 下面来看看云端测试如何操作？首先打开云开发界面。 [图片] 选择云函数，并点击「云端测试」，进行云端调试界面。 [图片] 云端调试界面相对本地调试，要简单得多了，编辑传入的参数，然后耐心等待结果返回即可。如下图： [图片] 一定要耐心等待，因为调用是从云服务器上发起，也许服务器运行很快，但是返回结果到开发工具很慢很慢。嗯，写完这句话，结果返回了，如下图： [图片] 看到这一堆乱码，恭喜你，证明数据请求成功了，显示成这样，只能说明，开发工具这块还需要优化。 总结 这一块的内容非常重要，所以我单独出一篇文章用来讲解。 Debug 是编程最重要的能力，没有之一。发现问题，能够快速定位到问题所在，这是老手与新手最大的差别，而不是记住了多少 API。 云函数是微信小程序特有的一块功能，它把 Node开发 + 开发工具 + 腾讯云三者结合起来了。其中一块出现问题，都会导致云函数的功能失效，如果出现问题，需要我们一步一步去排查。 下面是我总结的排查顺序，供参考： 本地调试是否成功，成功：Next；不成功：检查本地依赖，检查云函数代码 云端调试是否成功，成功：Next；不成功：检查部署，重新部署等会再试试看 小程序端调用是否成功，成功：Sucess；不成功：检查云函数调用代码 更多文章：https://github.com/pengloo53/miniprogram-articles