最新最全的云开发入门教程,微信小程序云开发,云函数,云数据库学习,微信小程序云开发扩展功能学习 | 您所在的位置:网站首页 › 微信小程序云开发功能怎么开 › 最新最全的云开发入门教程,微信小程序云开发,云函数,云数据库学习,微信小程序云开发扩展功能学习 |
写在前面
1,讲解视频
https://edu.csdn.net/course/detail/26572 配套笔记会在csdn上免费给到大家,欢迎关注,笔记会持续更新。 https://blog.csdn.net/qiushi_1990 目前源码和配套的一些资源暂时不免费,如果有需要的同学可以私聊石头哥,拿米来换。 3-2,笔记电子书笔记我也有整理一套电子书,大家也可以私聊石头哥获取电子书版的配套笔记。电子书笔记方便后期查询知识点。 另外石头哥提供配套解答服务。当然了,知识付费时代石头哥解答是要米的,毕竟石头哥精力有限,石头哥也是要吃面包的。石头哥有推出包月,包年解答服务。你在学习过程中有任何问题,或者工作中遇到任何编程问题,都可以来找石头哥 石头哥目前可以解答如下问题 小程序方面的问题云开发方面的问题Java,springboot,Javaweb方面的问题毕设方面的问题安卓app开发方面的问题html+css+JavaScript方面的问题前端开发的问题后端开发的问题面试找工作方面的问题小程序·云开发是微信团队联合腾讯云推出的专业的小程序开发服务。 开发者可以使用云开发快速开发小程序、小游戏、公众号网页等,并且原生打通微信开放能力。 开发者无需搭建服务器,可免鉴权直接使用平台提供的API进行业务开发 小程序 云开发又简称tcb,是微信官方给我们提供的基于腾讯云的云服务器。目前云开发包含:云数据库,云函数,云存储,云调用。后面章节会具体给大家讲解这几个。 官方文档:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/getting-started.html 云开发相对于传统服务器的优势如下表 通过上面的对比,我们可以看出,如果你想快速创建一个小程序的后台,用云开发是不错的选择。 1-3,Serverless开发模式要想深入了解小程序云开发,就需要知道什么是Serverless开发模式,因为我们的小程序云开发就是采用的这个模式 官方视频有讲到:https://developers.weixin.qq.com/community/business/doc/000e8697e481208a2e3b31d6a5680d 所以我们接下来要深入了解下Serverless开发模式 1-3-1,前端开发模式的演进上图说完了这几个阶段,可以看到,每一次前端开发模式的变化,都因某个变革性的技术而起。先是 AJAX,而后是 Node.js。那么下一个变革性的技术是什么?不言而喻,个人觉得下一代前端开发模式就是 Serverless 其实 Serverless 早已和前端产生了联系,只是我们可能没有感知。 1、CDN: 相信大家都使用过 CDN,我们开发完成之后,直接将静态文件部署到 CDN 上,通过 CDN 进行内容分发、网络加速,在这个过程中,前端不需要关心 CDN 有多少个节点、如何做负载均衡,也不需要知道 CDN 的 QPS 是多少。所以从这个角度来说,CDN 是一种 serverless 的实现。 2、再比如对象存储,和 CDN 一样,我们只需要将文件上传到对象存储,就可以直接使用了,不需要关心它如何存取文件、如何进行权限控制,所以对象存储对前端来说是 Serverless。 3、甚至一些第三方的 API 服务,也是 Serverless,因为我们使用的时候,不需要去关心服务器。 1-3-2,什么是Serverless
BaaS(Backend as a Service)则是一些后端云服务,比如云开发数据库、对象存储、消息队列等。利用 BaaS,可以极大简化我们的应用开发难度。 Serverless 则可以理解为运行在 FaaS 中,使用了 BaaS 的函数。 1-3-3,Serverless 的主要特点1、事件驱动----函数在 FaaS 平台中,需要通过一系列的事件来驱动函数执行。 2、无状态----因为每次函数执行,可能使用的都是不同的容器 3、无运维----使用serverless我们不需要关心服务器,也不需要关心运维,这也是serverles思想的核心; 4、低成本----使用 Serverless 成本很低,因为我们只需要为每次函数的运行付费。函数不运行,则不花钱,也不会浪费服务器资源过度 1-3-4,serverless 开发流程
2、而基于 Serverless,后端变得非常简单了,以往的后端应用被拆分为一个个函数,只需要写完函数并部署到 Serverless 服务即可,后续也不用关心任何服务器的运维操作。后端开发的门槛大幅度降低了。因此,只需要一个前端就可以完成所有的开发工作。 当然,前端基于 Serverless 去写后端,最好也需要具备一定的后端知识。涉及复杂的后端系统或者 Serverless 不适用的场景,还是需要后端开发 1-3-5,serverless带来的价值1.降低运营复杂度 Serverless架构使软件应用和服务器实现了解耦,服务器不再是用户开发和运营应用的焦点。在应用上线前,用户无须再提前规划服务器的数量和规格。在运维过程中,用户无须再持续监控和维护具体服务器的状态,只需要关心应用的整体状态。应用运营的整体复杂度下降,用户的关注点可以更多地放在软件应用的体验和改进以及其他能带来更高业务价值的地方。 2.降低运营成本 服务器不再是用户关注的一个受管资源,运营的复杂度下降,应用运营所需要投入的时间和人力将大大降低。在最好的情况下,可以做到少数几个应用管理员即可管理一个处理海量请求的应用系统。 3、缩短产品的上市时间 在Serverless架构下,应用的功能被解构成若干个细颗粒度的无状态函数,功能与功能之间的边界变得更加清晰,功能模块之间的耦合度大大减小。这使得软件应用的开发效率更高,应用开发的迭代周期更短。 1-3-6,基于 Serverless 的小程序开发1、目前国内使用 Serverless 较多的场景可能就是小程开发了。具体的实现就是小程序云开发,支付宝小程序和微信小程序都提供了云开发功能。 2、在传统的小程序开发中,我们需要前端进行小程序端的开发;后端进行服务端的开发。小程序的后端开发和其他的后端应用开发,本质是是一样的,需要关心应用的负载均衡、备份冗灾、监控报警等一些列部署运维操作。如果开发团队人很少,可能还需要前端去实现服务端。 但基于云开发,就只需要让开发者关注于业务的实现,由一个前端就能够完成整个应用的前后端开发。因为云开发将后端封装为了 BaaS 服务,并提供了对应的 SDK 给开发者,开发者可以像调用函数一样使用各种后端服务。应用的运维也转移到了提供云开发的服务商。 下面分别是使用支付宝云开发的一些例子,函数就是定义在 FaaS 服务中的函数。 负载均衡(Load Balance)其意思就是分摊到多个操作单元上进行执行,例如Web服务器、FTP服务器、企业关键应用服务器和其它关键任务服务器等,从而共同完成工作任务 备份冗灾:就是为了防止出现自然或者社会灭害带来的对存储设备的损害而造成对数据丢失,而采取的备份. 1-3-7,通用 Serverless 架构
同时不管是在后端、FaaS 还是前端,我们都可以去调用云计算平台提供的 BaaS 服务,大大降低开发难度、减少开发成本。小程序云开发,就是直接在前端调用 BaaS 服务的例子。 一句话总结serverless - less is more 使用 Serverless,我们不需要再过多关注服务端的运维,不需要关心我们不熟悉的领域,我们只需要专注于业务的开发、专注于产品的实现。我们需要关心的事情变少了,但我们能做的事情更多了。 二,微信开发者工具的安装与使用工欲善其事必先利其器,我们在开发小程序之前,首先需要安装小程序开发者工具,今天就来教大家安装小程序开发者工具。 2-1,其实很简单,只需要进入小程序官网,然后点击工具,如下图所示。
我们前面虽然可以用测试号创建小程序,但是测试号有很多功能会受限,比如我们接下来要讲的云开发,必须是注册小程序后才可以使用,所以今天我们就来讲讲小程序的注册. 其实官方给的注册步骤很详细了
微信小程序注册地址:https://mp.weixin.qq.com/ 进去以后点击立即注册 进入注册页面时,跟着提示一步步来就可以了 今天我们就来正式的创建自己的第一个云开发项目,在创建云开发之前,有下面几个注意事项 1,必须注册小程序后才可以开通云开发2,一个小程序可以创建两个云开发环境 4-1,创建一个初始项目我们要开通云开发服务,必须先要进入小程序开发者工具才可以。最新版的开发者工具在创建项目时又多了一个模板选择,如果你用的是最新版的开发者工具,模板选择里就选择不使用模板即可。 如果你用的是最新版的开发者工具,创建项目时会多一个模板选择,这里一定要记得选择不使用模板。 和创建普通小程序一样,如上图所示,需要注意的就是这里必须要填写自己的appid,不可以用测试号. appid的获取如下图所示. 如果你不使用自己的appid创建项目,就会出现下面的问题,所以一定要先去注册一个小程序,然后用自己的appid。 由于云开发官方更新的太快,有些同学可能会遇到下面这样的问题
如果你出现上面的问题,再看这节,如果没出现这样的问题,直接跳过就行。 ![]() ![]() ![]() ![]() ![]() 在app.js里写入环境id,注意这里要用你自己的云开发环境id 初始化云开发环境前,先去云开发控制台,拿到云开发环境id,如下图 拿到环境id以后,就去app.js里做云开发环境初始化,如下 用时候云开发创建好以后,初始化可能需要一点时间,所以如果这里初始化有报错,记得关闭开发者工具,等几分钟再重新打开即可. 五,云开发~云数据库官方文档:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database/init.html 5-1,在数据库里新建集合(数据表)我们这里以新建一个商品列表为例 要想让用户查询到我们创建的商品数据,需要把权限改为所有用户可读 ![]() ![]() ![]() doc是用来查询单条数据的。比如商品详情页。 doc里面用到的参数就是我们数据里的_id字段 通过add可以实现数据的添加, 修改数据库里已存在的数据,结合doc进行修改单条数据 删除数据,结合doc删除单条数据 ![]() ![]() ![]() ![]() ![]() 用户输入新价格,调用update方法进行更新数据 用户删除数据是一个危险操作,所以操作之前最好给用户一个友好提示。 官方弹窗文档:https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showModal.html 如果这条商品不是你创建的,当你对这条商品做删除或者更新操作时,虽然也会返回成功,但是可以看到我们更新或者删除的条数是0。 其实这个时候也意味着没有更新或者删除成功,这里是因为操作权限的问题,因为这条数据不是你创建的。所以你只能对这条数据做查询操作,而不能做修改和删除操作。要想解决这个问题,就要借助云函数了。后面云函数讲解的部分,我会做具体讲解的。 我们还是先接着学习数据库操作的高级操作 5-6,常用快捷键我们在开发时为了提高代码编写效率,通常会使用一些快捷键。我们小程序开发工具里常用的快捷键如下。 设置—》快捷键设置 有的电脑上快捷键可能会有细微差距,以开发者工具默认自带的快捷键为准。 5-7,数据库排序orderByorderBy方法在做排序的时候,接受两个参数 1,根据那个字段排序2,排序规则(升序或者降序)。升序用asc,降序用desc如我们根据商品价格从低到高升序排列 limit用来指定查询结果集数量上限,比如我们有100条数据,只想返回前20条,我们可以通过limit(20)来指定只返回20条数据。 例如,只返回3条数据的写法如下 skip指定查询返回结果时从指定序列后的结果开始返回,常用于分页。比如我们有100条数据,想从第10条开始返回数据,可以通过skip(10)来实现 skip结合我们上面学的limit方法可以实现分页效果![]() 比如我们有100条数据,每次返回20条数据。那么就可以分5页返回。 第1页 limit(20).skip(0)第2页 limit(20).skip(20)第3页 limit(20).skip(40)第4页 limit(20).skip(60)第5页 limit(20).skip(80) 5-10,Command数据库操作符我门上面学完了数据库的增删改查,但是这些都是最基础最简单的操作,如果我们想实现复杂的数据查询操作,该怎么办呢 比如 查询价格大于100的商品?查询年龄小于18岁的学生?如何同时修改多条数据?如何同时删除多条数据?我们如果想实现上面这些复杂的操作,就需要用到数据库里的 Command数据库操作符,就是下面这位 比如查询价格大于5的所有商品 比如查询大于等于5元的商品 比如查询价格小于5的所有商品 比如查询价格小于等于5元的所有商品 比如查询价格大于5小于10元的所有商品 官方文档:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/functions.html 我们先来看下官方给出的云函数简介 我们下面以获取openid为例,来看看云函数,php,Java的实现对比 php获取用户openid![]() Java获取openid和上面的php步骤一样,也是需要上面7步。而我们用云函数获取openid呢,就只需要简单的3步就行了,代码量也能显著减少 6-1-1,云函数获取openid用云函数的话,只需要3步 1,编写云函数2,一键部署云函数3,调用云函数来看下云函数代码,只需要10行代码,即可轻松搞定 我们用云函数和上一章的云数据库进行下对比 操作云函数云数据库返回数据上限100条20条更新数据都可以更新只有自己创建的才可以更新删除数据都可以删除只有自己创建的才可以删除运行环境运行在云端Node.js环境运行在小程序本地实现功能丰富度非常丰富只能实现数据库增删改查 来看下官方文档是如何描述云函数的 云函数属于管理端,在云函数中运行的代码拥有不受限的数据库读写权限和云文件读写权限。需特别注意,云函数运行环境即是管理端,与云函数中的传入的 openId 对应的微信用户是否是小程序的管理员 / 开发者无关。 6-3,云函数调用演示官方文档:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/functions/Cloud.callFunction.html 6-3-0,初始化云函数的环境 1,创建一个文件夹cloud和pages平行![]() ![]() ![]() ![]() ![]() 调用云函数有两种写法 1,传统的success和fail![]() ![]() ![]() ![]() ![]() ![]() 注意:云函数只要有变动,就要重新部署,否则云函数不生效。 遇到了一个问题,如下 ![]() ![]() ![]() 本地小程序直接调用数据库修改会有问题 只能修改自己创建的数据,别人创建的数据,就没有办法修改了。 如何解决呢? 用云函数来修改就可以解决这个问题啦。 1,先创建云函数update0129 2,调用云函数就行修改 ![]() ![]() ![]() ![]()
首先来看下官方对云存储的介绍: 官方文档:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/storage.html ![]() 控制台也可以很方便的管理文件。 我们上传图片之前需要先选择图片,所以这里用到一个图片选择的功能 我们既然已经学完图片上传功能了,那么我们就可以改造下我们之前的商品列表了,给我们的商品列表添加商品图片。 上传视频之前同样需要先选择视频,选择视频的代码如下 选择文件的时候记得把type设置为file 在上面选择好文件以后,我们还是要调用uploadFile进行文件上传 使用wx.cloud.downloadFile下载文件 https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-client-api/storage/downloadFile.html 使用wx.openDocument打开文件 https://developers.weixin.qq.com/miniprogram/dev/api/file/wx.openDocument.html 我们需要在app.json获取页面对应的json里设置enablePullDownRefresh属性为true来开启下拉刷新。
我们在下拉刷新时,刷新动画一般很久才结束,正常情况下应该是数据请求成功后就结束刷新动画。所以我们通过wx.stopPullDownRefresh()方法来结束刷新动画。 官方文档:https://developers.weixin.qq.com/miniprogram/dev/api/ui/pull-down-refresh/wx.startPullDownRefresh.html 小程序数据库api和云函数调用数据的限制 小程序端直接调用云数据库时,每次最多可以获取20条,云函数里调用云数据库时每次最多获取100条。所以我们数据多的时候要做分页加载。 9-2,分页加载的核心方法我们做分页加载时,主要用到了skip和limit方法,对应的官方文档如下 skip:每页加载多少条 https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/database/collection/Collection.skip.htmllimit: 加载第几页的数据https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/database/collection/Collection.limit.html其实这个skip和limit我在数据库的那一节有做初步讲解,这一节我们就借助具体分页加载的案例来做综合讲解 9-3,导入108条数据 9-3-1,下载数据源这108条数据是石头哥提前为付费用户/年卡用户准备好的,如果你没有付费,可以自己去数据库里创建108条数据即可。 我这里导入到num数据表,导入成功如下: 把数据表(集合)的权限改为所有用户可读,仅创建者可读写。 我们的列表滑动到最后一个数据时,会执行下面的方法 直接调用数据库每次最多只能加载20条数据 通过云函数调用数据库,每次最多可以加载100条数据. 如果每页20条以内,不建议用云函数如果分页的时候,每页大于20条,就用云函数。![]() 今天来给大家讲讲小程序的搜索功能。我这里后台数据库用的是小程序云开发的云数据库。所以我们搜索的时候就要借助云开发来实现。 注意:我们存数据的数据表(集合)要把权限改成如下所示。 比如我这里有如下的一些数据 我们想实现如下搜索需求 1,搜索标题(title)包含‘小石头’的数据2,搜索标题(title)或者描述(desc)包含‘小石头’的数据3,搜索标题(title)描述(desc)都包含‘小石头’的数据我们知道数据库查询的时候有个where语句,但是where语句是查询某个字段全部包含你输入的内容时才可以,所以单纯用where语句来做搜索的话,结果太单一。所以我们今天就来学习下模糊搜索功能的实现。我们以上面三个需求为例,来一个个讲解。 10-2,实现原理我们做模糊搜索的时候,其实就是查询某个字段里是否包含我们的搜索词。而模糊搜索需要借助RegExp,来看看RegExp是什么。 ![]() 代码如下 由于我们要查询多个字段,所以我们这里用到了command高级操作符里的or ![]() 由于我们要查询多个字段,所以我们这里用到了command高级操作符里的and 代码如下: 查询结果: ![]() 为例方便大家使用,我把完整的代码贴到这里,后面大家使用时,直接复制这里的代码,略微改造下就可以了。 //我这里简单起见就把搜索词写死,正常应该用户输入的 let searchKey = '小石头' let db = wx.cloud.database() let _ = db.command db.collection('news') .where(_.or([ {//标题 title: db.RegExp({ //使用正则查询,实现对搜索的模糊查询 regexp: searchKey, options: 'i', //大小写不区分 }), }, {//描述 desc: db.RegExp({ regexp: searchKey, options: 'i', }), } ])).get() .then(res => { console.log('查询成功', res) }) .catch(res => { console.log('查询失败', res) }) 10-5,获取用户输入的搜索词显示搜索列表其实获取用户输入的内容,我们之前讲过很多遍了,就是用input组件,通过bindinput来获取用户输入的搜索词,然后点击搜索实现搜索功能。 要实现的效果图如下: 具体代码的编写请跟着石头哥的视频走 11-1, 注册页注册页主要用到了input组件获取用户输入,button组件实现注册功能,注册主要是把账号名和密码添加到云开发数据库 11-2, 登陆页登陆主要是获取用户输入的账号和密码,然后从数据库里读取相应的数据,做账号和密码的比对,如果账号和密码都一样,就可以直接登陆成功 11-3, 登陆成功跳转到首页登陆成功以后,会调整到首页 11-4, 保存登陆状态我们通常做登陆时,用户登陆成功后我们需要帮用户保存登陆状态,要不然用户下次再进入应用时还要重新登陆。所以我们要做下用户登陆状态的保存 十二,云开发实现点赞收藏评论功能具体代码的编写请跟着石头哥的视频走 12-1, 常用图标获取网站这里用了一个阿里巴巴矢量图库:https://www.iconfont.cn 12-2, 云函数里初始化云开发环境 cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV }) 十三,评论功能的简单实现具体代码的编写请跟着石头哥的视频走,这一节不在准备笔记 十四,CMS网页版管理后台 14-1,开通cms的准备工作如下图所示,直接点击开通内容管理(CMS)即可 点击完开通以后,会有如下弹窗,直接点击确定即可。不要被付费吓着,官方每月会送我们一定的免费额度的。学习得话基本上够用了。 上面开通好以后,就可以通过后台地址登录管理后台了。如下 第一次登录,我们还需要创建一个项目 到这里我们的cmd可视化网页管理后台就创建好了 14-5,内容模型
我们往内容模型里添加数据类型的时候可以选择如下一些类型 我们可以对上面创建好的内容模型(集合)进行可视化的管理,这也是cms的优点,可以让我们对数据库进行可视化的管理。 我会结合cms和云开发数据库,教大家实现一个简单的新闻小程序,有如下功能点 1,新闻列表2,新闻详情3,图文混排4,富文本编辑5,rich-text的学习rich-text官方文档: https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html 我会在视频里教大家一步步的实现这个综合案例,这个综合案例能跟着石头哥完整的做下来的话,你的小程序云开发的知识点也就学习的差不多了。 云开发实战案例···》 实战一,云开发实现订阅消息推送之前的通过formid发送模板消息推送,将在2020年1月10日下线,所以我们不得不使用订阅消息了。 我们先来看下订阅消息的官方简介。 这一步和我们之前的模板消息推送是一样的,也是先添加模板,然后拿到模板id 我们做订阅消息授权时,只能是用户点击或者支付完成后才可以调起来授权弹窗,官方是这么要求的: ![]() ![]() ![]() ![]() 这里用户允许后,我们就可以给用户推送消息了,接下来我们来借助云开发的云函数来实现消息推送功能。 3,获取用户的opneid先来看官方爸爸是怎么说的。 ![]() ![]() ![]() ![]() 我们只需要创建一个云函数如下,然后填入用户的openid,要跳转的小程序页面链接,模板内容,模板id即可。通常这些数据都应该传进来,简单起见,我就把这里的模板内容写成固定的。 注意:我在编写上面的代码时,推送内容的key必须和小程序模板里的key保持一致,否则就会报如下错误。 ![]() ![]() ![]() ![]() ![]()
到这里我们就完整的实现模板消息推送功能了,下面我把主要代码贴给大家,大家也可以私信我获取完整源码。 index.wxml 获取订阅消息授权 获取用户的openid并推送消息 index.js //编程小石头wechat:2501902696 Page({ //获取授权的点击事件 shouquan() { wx.requestSubscribeMessage({ tmplIds: ['CFeSWarQLMPyPjwmiy6AV4eB-IZcipu48V8bFLkBzTU'], //这里填入我们生成的模板id success(res) { console.log('授权成功', res) }, fail(res) { console.log('授权失败', res) } }) }, //获取用户的openid getOpenid() { wx.cloud.callFunction({ name: "getopenid" }).then(res => { let openid = res.result.openid console.log("获取openid成功", openid) this.send(openid) }).catch(res => { console.log("获取openid失败", res) }) }, //发送模板消息到指定用户,推送之前要先获取用户的openid send(openid) { wx.cloud.callFunction({ name: "sendMsg", data: { openid: openid } }).then(res => { console.log("推送消息成功", res) }).catch(res => { console.log("推送消息失败", res) }) } }) 推送对应的云函数 //编程小石头wechat:2501902696 const cloud = require('wx-server-sdk') cloud.init() exports.main = async(event, context) => { try { const result = await cloud.openapi.subscribeMessage.send({ touser: event.openid, //要推送给那个用户 page: 'pages/index/index', //要跳转到那个小程序页面 data: {//推送的内容 thing1: { value: '小程序入门课程' }, thing6: { value: '杭州浙江大学' }, thing7: { value: '第一章第一节' } }, templateId: 'CFeSWarQLMPyPjwmiy6AV4eB-IZcipu48V8bFLkBzTU' //模板id }) console.log(result) return result } catch (err) { console.log(err) return err } }后面我会分享更多小程序相关的知识出来,请持续关注。 注意:授权一次,只能发送一条消息。 5,发送订阅消息给多个用户 //发送订阅消息给多个用户 sendAll() { if (name == null || name == '') { wx.showToast({ icon: "none", title: '请输入课程名', }) return } let users = [ "oc4sa0Vp_s65LEItm4JSWT5WFQds", "oc4sa0dZ-pSCu95djiLCt7jo97bY" ] users.forEach(item => { console.log("for循环", item) this.sendFun(item, name) }) }, //封装的方式方法 sendFun(openid, name) { wx.cloud.callFunction({ name: "fasong", data: { openid: openid, name: name } }).then(res => { console.log("发送单条成功", res) }).catch(res => { console.log("发送单条失败", res) }) } 实战二,短信验证码 老规矩先看效果图普通短信 今天被云开发官方告知,云开发支持发短信功能了,然后就迫不及待的来尝下鲜。 官方文档: https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/cloudbase/cloudbase.sendSms.html 进入官方文档一看,云开发给咱们开发者的福利还真不小。 不仅仅可以很方便的使用短信功能,还送了咱们1000条免费短信。不用白不用嘛。这1000条短信足够咱们把小程序短信功能,和小程序短信验证码功能都学会了。 废话不多说了,咱们直接来撸代码 1,使用云开发短信的条件这个前置条件很重要,条件不满足,你就没法使用云开发短信功能。 使用条件 1,必须是企业小程序,目前个人小程序无法使用短信发送2,必须开通静态网站功能(后面应该会逐步放开)3,必须开通云开发(这个没得说,不开通云开发你还用啥云开发功能啊)上面条件都满足以后,我们就可以来愉快的撸代码了。 年卡福利 1,可以获取石头哥目前所有视频课2,未来一年内出的新课也可以获取3,一对一问题解答,远程协助4,可以借用石头哥的企业小程序感兴趣可以加石头哥微♥ 2501902696 备注年卡 2,开通静态网站功能如果你不开通静态网站,直接调用短信发送,会报如下错误。 这里开通云开发我们借助小程序开发者工具来实现快速开通。 2-1,注册小程序这里我就不再多说了,只有注册过小程序的appid才可以开通云开发 小程序项目的创建,我这里不再多说,我前面小程序基础课里有讲过很多遍。《小程序基础学习》 这里云开发的开通,我就不做过多讲解了,我云开发课程里也讲过很多遍。大家可以去翻看下
其实上面静态网站功能开通以后,我们不用上传网站资源,就可以直接来使用短信功能了。 下面我们就来使用云开发的云函数功能来做短信发送功能。 老规矩先看效果图 新建一个和pages平级的目录cloud,用于存放云函数 右键cloud目录,新建Node.js云函数
上面云函数编写好了,一定要记得部署下云函数。右键sendSms然后点击下面箭头所示的即可。 我们上面云函数编写并部署成功以后,就可以来调用这个云函数,发送短信了。 4-1,编写wxml文件在wxml文件里写一个button按钮,编写一个bindtap点击事件 在js文件里实现上面button的点击事件,然后调用云函数 点击发送短信 老规矩,先看效果图 页面比较简单,就两个输入框和两个按钮 js里主要是获取用户输入的手机号,然后发送验证码,发送验证码调用云函数实现短信验证码发送功能。用户输入验证码以后进行校验即可。 用户输入手机号以后,点击发送,可以看到我们手机上收到了如下短信。
到这里我们就实现了验证码发送功能了。 5-4,生成随机验证码的方法我这里把生成随机验证码的方法贴给大家。 字母和数字混合 //获取随机验证码,n代表几位 generateMixed(n) { let chars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']; let res = ""; for (var i = 0; i < n; i++) { var id = Math.ceil(Math.random() * 35); res += chars[id]; } return res; } 数字混合 //获取随机验证码,n代表几位 generateMixed(n) { let chars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']; let res = ""; for (var i = 0; i < n; i++) { var id = Math.ceil(Math.random() * 9); res += chars[id]; } return res; } 实战三,群发短信我们上面给单个手机发送验证码的功能实现了,接下来就教大家如何群发短信。 老规矩,先看效果图 这个前置条件很重要,条件不满足,你就没法使用云开发短信功能。 1,必须是企业小程序,目前个人小程序无法使用短信发送2,必须开通静态网站功能(后面应该会逐步放开)3,必须开通云开发(这个没得说,不开通云开发你还用啥云开发功能啊)上面条件都满足以后,我们就可以来愉快的撸代码了。 年卡福利 1,可以获取石头哥目前所有视频课2,未来一年内出的新课也可以获取3,一对一问题解答,远程协助4,可以借用石头哥的企业小程序感兴趣可以加石头哥微♥ 2501902696 备注年卡 1,编写wxml页面简单起见,我这里只定义一个输入手机号的输入框和一个button按钮 我这里以*来分割手机号,如下图所示。 我们分割字符串用到的是字符串的split()方法 去除字符串里的回车键语法如下 字符串.replace(/[\r\n]/g, "")可以看到我们只需要调用字符串.replace方法即可,后面括号里跟的是回车键对应的正则表达式。这里不需要记住,后面用的时候来我笔记这里复制就行了。 如果你有仔细阅读官方文档,可以看到我们群发的手机号前面必须以+86开头。并且每次群发的手机号不能超过1000条。 那么我们接下来要做的就是实现群发功能了。我们这里要想成功的实现群发,需要两个元素 要群发的短信内容要群发的手机号关于手机号和群发内容都有要求 这里其实就是一个input来获取用户输入的内容就行了。我不再多讲,直接把代码贴出来。 短信内容和群发的手机号都已经成功拿到了,我们接下来就要来编写群发的云函数了。 云函数编辑好,记得重新部署下。 8,调用云函数实现群发上面云函数编辑好了,也部署好了,接下来就是要调用云函数实现短信群发了。 接下来我们就要验证自己的劳动成果了。如下,我发这样的内容给两个手机号。为什么是两个呢,我这里是学习,要节省短信条数。官方只送我们1000条。所以要省着点用。 其实群发两个手机号,和群发1000个没区别,只要群发两个成果,那么群发1000个也一样的。 终于等到了第二天8点47,下面我们把昨天的群发短信再演示一遍,看这次能不能成功。 先来看我们的日志 第二个手机号是苹果手机 |
CopyRight 2018-2019 实验室设备网 版权所有 |