作者：王国洗、邓坤力 ​ 随着用户量的不断增多，用户需求的不断变多，云开发的迭代速度也越来越快，云开发推出了不少的新功能，这篇文章，将历数这些云开发的新功能，看看你都用上了没。 云开发数据库基础能力概览 云开发数据库主要提供的是一个 JSON 文档型数据库， JSON 数据格式让他对于前端开发十分的油耗，开发者可以轻松的完成数据的修改。此外，在数据库基础之上，云开发还提供了丰富的数据类型和多个平台的 SDK，让开发者可以在各个平台完成自己的业务开发。不仅如此，云开发数据库还提供数据库的安全规则控制，让开发者得以实现更加细粒度的权限控制。对云开发概念不熟悉的同学可以查看产品文档。 ​ [图片] 当然，除了上面提到的这些基础能力以外，还有很多其他的特色能力，可以帮助你更好的完成自己的业务开发。接下来，我们来看看这些特色能力。 自定义告警 为了辅助业务监控服务质量，云开发为数据库提供了自定义告警能力，开发者可以借助监控能力，来实现监控服务的可用性。 对于开发者来说，可以借助云开发提供的自定义告警能力，来完成业务质量的监控、问题的快速触达，将问题扼杀在摇篮之中。 ​ [图片] 权限管理 脱离了安全，业务就没有任何保证可言。在数据库权限设置方面，云开发提供了两种设置，第一种是初期提供的基础的四种简易权限设置，第二种是灵活的、可自定义的权限控制，即数据库安全规则。每个集合可以拥有一种权限配置，权限配置的规则是作用在集合的每个记录上的。 通过不同粒度的权限控制方式，开发者可以十分简单的实现各种不同权限控制能力。不仅如此，因为有了权限控制能力，云开发的数据库可以在前端直接操作，可以有效的提升研发效率。 ​ [图片] 导入导出管理 针对不同的业务，云开发提供了数据导入、数据导出、数据回档功能。 针对有需求从传统业务迁移至云开发上的开发者，可以选用云开发提供的数据导入能力，通过将数据转换成 JSON 或 CSV 格式，来导入到云开发数据库中。类似的，如果业务需要对数据进行离线统计分析的时候，就可以借助数据导出的功能，实现本地的数据分析。 除此之外，从安全的角度考虑，我们面向开发者开放了数据回档的功能，简单的几下点击，就可以实现数据的快速回档，告别删库跑路。 ​ [图片] 索引管理 数据库索引可以提升数据库查询的性能，云开发也提供了相应的索引管理功能，帮助开发者方便快捷的完成索引的创建，优化数据库查询的性能。目前云开发数据库索引支持键值索引和地理位置索引，后续也有可能会支持 Hash 索引和全文索引等。 开发者可以借助云开发提供的索引功能，优化数据库查询的性能，提升产品的体验。 ​ [图片] 如何创建高效的数据库索引 最佳实践1：每个生产环境查询都应有索引支持 首先我们需要记得，每一个我们放到线上生产环境的查询，都应该配有索引支持，只有有索引支持才能尽可能规避数据量和请求量上涨带来的慢查询风险。 最佳实践 2：尽可能使用组合索引 如果我们的查询条件包含多个字段，那么为这些字段创建一个组合索引后的查询效率是比只使用单字段索引要高很多的。像下图这个case ​ [图片] 最佳实践 3：组合索引字段顺序策略 要注意组合索引中字段的顺序。比如下图这样一个包含两个查询字段，一个排序字段的这么一个查询语句，那我们在创建组合索引的时候是不是任意顺序都可以呢？确认任意顺序都能让这个查询语句用到索引，但那不一定是最优的顺序。最优的顺序是b，c，a，为什么呢？在创建组合索引时，我们应遵循这么一个字段顺序原则：等于>排序>范围查询字段 ​ [图片] 最佳实践4：注意组合索引升降 要注意组合索引的升降序，这个升降序也并不是可以随意指定的，特定的升降序组合只可以满足特定的排序查询。以下面这个查询为例。 ​ [图片] 最佳实践 5：利用覆盖索引高效查询 可以利用好覆盖索引。什么是覆盖查询，就是当查询条件和查询要返回的所有字段都在索引中的时候，就是覆盖查询，当命中覆盖查询的时候，查询不再需要去读取数据，直接从索引中取得结果，可以进一步更加的高效。下面这个查询是一个例子： ​ [图片] 最佳实践 6：数组查询也要建索引 要记住数组也可以使用索引，像下图中的示例，a 字段是个数字数组，b字段是个对象嵌套数组，它们其实都可以利用到索引，像a字段我们可以直接建个索引，如果需要查b数组里面的x字段，那可以建个b.x的字段索引。 ​ [图片] 最佳实践 7：去除多余索引 要去除多余的索引。什么是多余的索引呢？首先当然是没用到的索引，过时的索引，这些都可以去掉，但还有一类多余的索引需要特别提及，那就是重复前缀的索引和相反升降序的索引，这些也是多余的索引。 ​ [图片] 最佳实践 8：大数据量下避免使用低区分度操作符 在大数据量下避免使用低区分度的操作符，这些都是取反的操作符，他们的区分度通常都很低，因此很难高效的使用索引，因此只应该在少量的时候使用。 希望以上的能力介绍和最佳实践建议，可以帮助到大家更好地使用到云开发数据库。如果你对上面8个最佳实践建议还无法很好地理解，这也没有关系，因为微信开发者工具很快就会推出一个自动分析数据库查询语句，然后自动给出索引建议的能力，这项能力可以让大家在偏离数据库索引最佳实践的时候给出提示和警告，从而让小程序的数据库查询都尽可能有正确、完整的索引保障，并且还是遵循最佳实践的方式建立的索引。 本分享课程视频可以在这里查看：https://cloud.tencent.com/developer/salon/live-1234 【相关指引】 云开发（CloudBase）是云端一体化的后端云服务，采用 serverless 架构，免去了移动应用构建中繁琐的服务器搭建和运维。同时云开发提供的静态托管、命令行工具（CLI）、Flutter SDK 等能力极大的降低了应用开发的门槛。使用云开发可以快速构建完整的小程序/小游戏、H5、Web、移动 App 等应用。 产品文档：https://cloud.tencent.com/product/tcb 技术文档：https://cloudbase.net 技术交流加Q群：601134960 最新资讯关注微信公众号【腾讯云云开发】 ​ [图片]

[图片] 工作中有时候会遇到一些关于“抽奖”的需求，这次以“刮刮乐项目”举例，分享一个实战抽奖功能。 本人对之前网上流传的一些H5刮刮乐JS插件版本进行了一些改造，使其能适用于实际项目，并且支持小程序canvas 2D的新API，这里顺便提下2D API和实际H5 canvas中JS写法非常类似，只有少数不同。 [图片] 1、方法介绍： 1.1 刮刮乐JS组件 [代码]class Scratch { constructor(page, opts) { opts = opts || {}; this.page = page; this.canvasId = opts.canvasId || 'canvas'; this.width = opts.width || 300; this.height = opts.height || 300; this.bgImg = opts.bgImg || ''; //覆盖的图片 this.maskColor = opts.maskColor || '#edce94'; this.size = opts.size || 15, //this.r = this.size * 2; this.r = this.size; this.area = this.r * this.r; this.showPercent = opts.showPercent || 0.2; //刮开多少比例显示全部 this.rpx = wx.getSystemInfoSync().windowWidth / 750; //设备缩放比例 this.scale = opts.scale || 0.5; this.totalArea = this.width * this.height; this.startCallBack = opts.startCallBack || false; //第一次刮时触发刮奖效果 this.overCallBack = opts.overCallBack || false; //刮奖完触发 this.init(); } init() { let self = this; this.show = false; this.clearPoints = []; const query = wx.createSelectorQuery(); //console.log(this.canvasId); query.select(this.canvasId) .fields({ node: true, size: true }) .exec((res) => { //console.log(res); this.canvas = res[0].node; this.ctx = this.canvas.getContext('2d') this.canvas.width = res[0].width; this.canvas.height = res[0].height; //const dpr = wx.getSystemInfoSync().pixelRatio; //this.canvas.width = res[0].width * dpr; //this.canvas.height = res[0].height * dpr; self.drawMask(); self.bindTouch(); }) } async drawMask() { let self = this; if (self.bgImg) { //判断是否是网络图片 let imgObj = self.canvas.createImage(); if (self.bgImg.indexOf("http") > -1) { await wx.getImageInfo({ src: self.bgImg, //服务器返回的图片地址 success: function (res) { imgObj.src = res.path; //res.path是网络图片的本地地址 }, fail: function (res) { //失败回调 console.log(res); } }); } else { imgObj.src = self.bgImg; //res.path是网络图片的本地地址 } imgObj.onload = function (res) { self.ctx.drawImage(imgObj, 0, 0, self.width * self.rpx, self.height * self.rpx); //方法不执行 } imgObj.onerror = function (res) { console.log('onload失败') //实际执行了此方法 } } else { this.ctx.fillStyle = this.maskColor; this.ctx.fillRect(0, 0, self.width * self.rpx, self.height * self.rpx); } //this.ctx.draw(); } bindTouch() { this.page.touchStart = (e) => { this.eraser(e, true); } this.page.touchMove = (e) => { this.eraser(e, false); } this.page.touchEnd = (e) => { if (this.show) { //this.page.clearCanvas(); if (this.overCallBack) this.overCallBack(); this.ctx.clearRect(0, 0, this.width * this.rpx, this.height * this.rpx); //this.ctx.draw(); } } } eraser(e, bool) { let len = this.clearPoints.length; let count = 0; let x = e.touches[0].x, y = e.touches[0].y; let x1 = x - this.size; let y1 = y - this.size; if (bool) { this.clearPoints.push({ x1: x1, y1: y1, x2: x1 + this.r, y2: y1 + this.r }) } for (let item of this.clearPoints) { if (item.x1 > x || item.y1 > y || item.x2 < x || item.y2 < y) { count++; } else { break; } } if (len === count) { this.clearPoints.push({ x1: x1, y1: y1, x2: x1 + this.r, y2: y1 + this.r }); } //添加计算已清除的面积，达到标准值后，设置刮卡区域刮干净 let clearNum = parseFloat(this.r * this.r * len) / parseFloat(this.scale * this.totalArea); if (!this.show) { this.page.setData({ clearNum: parseFloat(this.r * this.r * len) / parseFloat(this.scale * this.totalArea) }) }; if (this.startCallBack) this.startCallBack(); //console.log(clearNum) if (clearNum > this.showPercent) { //if (len && this.r * this.r * len > this.scale * this.totalArea) { this.show = true; } this.clearArcFun(x, y, this.r, this.ctx); } clearArcFun(x, y, r, ctx) { let stepClear = 1; clearArc(x, y, r); function clearArc(x, y, radius) { let calcWidth = radius - stepClear; let calcHeight = Math.sqrt(radius * radius - calcWidth * calcWidth); let posX = x - calcWidth; let posY = y - calcHeight; let widthX = 2 * calcWidth; let heightY = 2 * calcHeight; if (stepClear <= radius) { ctx.clearRect(posX, posY, widthX, heightY); stepClear += 1; clearArc(x, y, radius); } } } } export default Scratch [代码] 1.2 JS 调用方法 [代码]new Scratch(self, { canvasId: '#coverCanvas', //对应的canvasId width: 600, height: 300, //maskColor:"", //封面颜色 showPercent: 0.3, //刮开多少比例显示全部，比如0.3为 30%面积 bgImg: "./cover.jpg", //封面图片 overCallBack: () => { //刮奖刮完回调函数 }, startCallBack: () => { //当用户触摸canvas板的时候触发回调 } }) [代码] 实际中还支持其他很多的配置项，比如缩放比例，刮开比例，放置区域等等，大家可以根据实际需求设置。 1.3 实际页面中的JS调用方法： [代码]//引入刮刮乐部分 import Scratch from './scratch.js'; const app = getApp() Page({ data: { firstTouch: 0, isOver: 0, }, onLoad() { let self = this; new Scratch(self, { canvasId: '#coverCanvas', width: 600, height: 300, //maskColor:"", //封面颜色 bgImg: "./cover.jpg", //封面图片 overCallBack: () => { this.setData({ isOver: "结束啦" }) //this.clearCanvas(); }, startCallBack: () => { this.setData({ firstTouch: "开始刮啦" }) //this.postScratchSubmit(); } }) }, //刮卡已刮干净 clearCanvas() { let self = this; console.log("over"); }, }) [代码] 1.4 HTML/CSS [代码]<-- html --> <view class="wrap"> <canvas class="cover_canvas" type="2d" disable-scroll="false" id='coverCanvas' bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd"></canvas> <image class="img" src="reward.jpg" mode="widthFix" /> </view> /* css */ .wrap { width: 600rpx; height: 300rpx; margin: 100rpx auto; border: 1px solid #000; position: relative; } .cover_canvas { width: 600rpx; height: 300rpx; z-index: 9; } .wrap .img { position: absolute; left: 0; top: 0; z-index: 1; width: 600rpx; height: 300rpx; } [代码] 这里注意 type=“2d” 写法，这里使用的是新的2D canvas。 2、注意事项 canvas一些效果不支持真机调试，直接预览就行了 如果刮奖结果是通过第一次触碰canvas触发的，这里的请求需要写一个同步方法 刮刮乐JS的配置会优先判断bgImg这个属性，再判断maskColor 需要反复刮奖，可以反复new 它。 3、代码片段 地址： https://developers.weixin.qq.com/s/RxiaHam574or 建议将IDE工具升级到 1.03.24以上，避免一些BUG [图片] 觉得有用，请点个赞，这是我继续分享的动力~

官方api并没有关于图片exif信息提取的api，搜索各种资料无果 不过发现了一个js版本的exif.js 直接拿到小程序上并不能使用，经过修改现在可以使用。并没有太多的测试，如果有发现bug希望共同维护一下 直到官方出了可以获取exif的api 使用方法： 1，引入js var myexif = require('../../libs/myexif.js'); 2，调用handleBinaryFile()方法（方法参数是bufferArray） wx.chooseImage({//选择图片     sizeType: ['compressed'],//图片不能经过压缩处理     success(res) {         var array = wx.getFileSystemManager().readFileSync(res.tempFilePaths[0] );;         var r =myexif.handleBinaryFile(array);         console.log(r);     } }); 百度网盘（myexif.js）： 链接: https://pan.baidu.com/s/1Z84kyPHowXlgyg1czKyu7A 提取码: we9d

本文因为社区编辑器markdown功能暂有问题，格式上比较混乱，大家将就看吧： 目前小程序支持的直播方式有两种，一种是纯原生方案（小程序提供推流拉流服务器，主播端和收播端页面都已提供好，你直接使用即可），一种是自己搭建推流服务器（只是使用小程序端提供的live-pusher和live-player组件而已，里面的直播页面和功能都自己独立开发！），这里说的是第一种方案：   一、准备工作   1、一个已经申请开通和正常使用的实实在在的小程序   PS：如果开通了直播功能，但是没有审核上架成功过，直播间分享出去的二维码点击会提示页面不存在！！！原因很简单，因为你新开发的直播页面正式版的小程序上并没有新加进去，必须要提审上架到正式版才能生效！   二、小程序直播准入门槛   微信小程序直播功能准入要求（官方文档链接>>） 一、类目要求： 1. 小程序开发者为国内非个人主体开发者； 2. 小程序开发者为下述类目品类，类目具体信息可参考《微信小程序开放的服务类目》： 1）电商平台：电商平台 2）商家自营：百货、食品、初级食用农产品、酒/盐、图书报刊/音像/影视/游戏/动漫、汽车/其他交通 工具的配件、服装/鞋/箱包、玩具/母婴用品(不含食品)、家电/数码/手机、美妆/洗护、珠宝/饰品/眼镜 /钟表、运动/户外/乐器、鲜花/园艺/工艺品、家居/家饰/家纺、汽车内饰/外饰、办公/文具、机械/电子 器件、电话卡销售、预付卡销售、宠物/农资、五金/建材/化工/矿产品； 3）教育：培训机构、教育信息服务、学历教育（学校）、驾校培训、教育平台、素质教育、婴幼儿教 育、在线教育、教育装备、出国移民、出国留学、特殊人群教育、在线视频课程； 4）金融业：证券/期货投资咨询、保险； 5）出行与交通：航空、地铁、水运、城市交通卡、打车（网约车）、顺风车（拼车）、出租车、路况、 路桥收费、加油/充电桩、城市共享交通、高速服务、火车、公交、长途客运、停车、代驾、租车； 6）房地产：房地产、物业管理、房地产经营、装修/建材； 7）生活服务：丽人、宠物（非医药类）、宠物医院/兽医、环保回收/废品回收、摄影/扩印、婚庆服务、 搬家公司、百货/超市/便利店、家政、营业性演出票务、生活缴费； 8）IT科技：硬件与设备、基础电信运营商、电信业务代理商、软件服务提供商、多方通信； 9）餐饮：餐饮服务场所/餐饮服务管理企业、点餐平台、外卖平台、点评与推荐、菜谱、餐厅排队； 10）旅游：旅游线路、旅游攻略、旅游退税、酒店服务、公寓/民宿、门票、签证、出境WiFi、景区服 务； 11）汽车：养车/修车、汽车资讯、汽车报价/比价、车展服务、汽车经销商/4S店、汽车厂商、汽车预售 服务； 12）体育：体育场馆服务、体育赛事、体育培训、在线健身 二、运营要求： 1、主体下小程序近半年没有严重违规 2、小程序近90天存在支付行为 以上2个运营条件和类目同时满足的前提下，下面3个条件满足其一即可 3、主体下公众号累计粉丝数大于100 4、主体下小程序近7日dau大于100 5、主体在微信生态内近一年广告投放实际消耗金额大于1w 以上准入要求于 2020 年 02 月 24 日进行公示生效。为营造良好健康的微信生态，腾讯公司有权对《微信 小程序直播功能准入要求》不时予以调整并公布，请予以关注。 腾讯公司   tip：如果你的小程序刚刚满足上面门槛，请T+2后刷新再试试。   三、进入小程序后台直播，创建直播间 [图片]   如果你的小程序满足了第二点。小程序后台会有一个直播的入口（没有的话自己找找原因）   点击进入后->创建直播间   按提示操作（要输入主播人的微信号，对方初次使用要活体检测+实名认证）即可成功创建直播间。（注意点：开播时间最早不能早于当前时间10分钟后）   创建成功后，会有一个开播码。注意这个开播码是给主播用的，主播开播的入口小程序码。主播可以扫码进入直播间开播。 [图片]   四、小程序端开发   完成上面3步算是完成主播端的配置了，接下来是收播端（观看直播的小程序端）的开发了。这个是要小程序开发者完成的。所以下面操作都在小程序开发端完成。下面就简单介绍开发逻辑和顺序，具体的要用到的API和接口都不细说，在后面相关链接里面可以点击官方链接查看！（小程序直播 | 微信开放文档）https://developers.weixin.qq.com/miniprogram/dev/framework/liveplayer/live-player-plugin.html）   （1）引入直播插件（直接按官方介绍文档操作）   正常引入后开发者工具会弹出这个窗口，如果不弹出请认真，静下心来按照官方文档检查自己的引入代码： [图片]   （2）开发后端（如果你没有小程序端自建直播列表和直播间入口的需求2、3、4都可以跳过，届时你的小程序直播间可以用分享方式进入）   后端目前官方只提供了2个接口。一个是获取直播间列表，一个是获取直播间直播完后的相关回放信息，其中第一个接口必须先完成。就是获取到直播间列表，列表里面有带返回直播间的roomid，小程序端必须需要接收到这方面的返回才能接下来的开发。   （3）进入直播页面   引入直播插件后并对接第二步的后端接口后，你可以直接编码进入直播页面了。像进入普通页面一样，可以通过wxml里面的navigator url="xxxx"的方式和js里的wx.navigateTo跳转页面代码进入直播页面。但是他这个url比较特殊，是下面这样的格式：    url: `plugin-private://${provider}/pages/live-player-plugin?room_id=${roomId}&custom_params=${encodeURIComponent(JSON.stringify(customParams))}`   provider:插件appid（1）小步里面获取到的   rommId:直播间id（2）小步里面获取列表后里面的roomId   customParams:自定义的进入页面参数。（根据需要自己定义的传入直播间收播页面的参数）  进入直播间收播页面后的开发量为0，因为这个是由直播间插件接管并完成相关功能。   （4）几个注意点：   4.1、后端获取直播间列表接口几个跟官方文档介绍不一致的地方 [图片]   4.2、 livePlayer.getLiveStatus获取直播间状态这个API官方介绍：首次获取立马返回直播状态，往后间隔1分钟或更慢的频率去轮询获取直播状态。实际使用过程中建议也这么干，如果需要轮询直播间状态，建议间隔时间1分钟以上，如果少于这个值，基本上就是卡在这里后面的代码都不执行了。还有，有时候即使超过1分钟后再轮询，也会偶发性出现获取不到卡住的情况。解决方法，大家可以看看开发者工具里面的本地Storage相关的值，然后后面怎么做你懂的。。   4.3订阅组件subscribe的样式问题。不多说，你懂的，你加上去就能看到效果   4.4后端接口每日调用次数限制的问题。要做好相关缓存到本地的架构设计。   4.5运营上一定要注意，按要求直播。别整那些没用的，很容易被禁播的。   （5）回放功能开发   1.0.4版本后支持0开发的回放功能了。参考后面新增的专门介绍回放功能的使用教程。   五、跑路   这里的跑路是指代码写累了，带上口罩和吉娃娃去公园跑一圈路回来继续码。   最新：1.0.4版本后的回放功能说明，回放功能是这样的   1、后台开启该直播间的回放功能 [图片]   2、收播端还是原来的直播入口进行回放，小程序端是  plugin-private://${liveplayId}/pages/live-player-plugin?room_id=${roomId}&custom_params=${encodeURIComponent(JSON.stringify(customParams))}`   这里的页面链接，链接到回放页面。获取分享方式，分享出去的直播页面，点击后进入回放。 [图片]   还有一个口，点击原来的分享链接后的直播完成页面，也有一个查看回放的入口，如上图。   Tip:如果刚刚直播完可能需要稍等生成回放视频后再次进入相关页面才能看到回放。   相关链接：   小程序直播 | 微信开放文档（开发必看，而且要熟读，基本有所有你要的开发资料）   https://developers.weixin.qq.com/miniprogram/dev/framework/liveplayer/live-player-plugin.html   微信小程序直播功能准入要求 | 微信开放文档   https://developers.weixin.qq.com/miniprogram/product/live/access-requirement.html   “小程序直播”接入指引 | 微信开放社区   https://developers.weixin.qq.com/community/develop/doc/0008ce654c4450244c1a7e5de5b801?highLine=%25E7%259B%25B4%25E6%2592%25AD%2520%25E6%25B1%25BD%25E8%25BD%25A6   相关知识科普：   小程序直播单日直播上限是50场，同时直播上限50场，单场的直播时长上限是12小时。