老规矩，先看效果图。
普通短信
带验证码的短信
今天被云开发官方告知云开发支持发短信的功能，然后迫不及待的想尝尝。
翻一下官方文档，可以看到云开发给我们开发者带来的好处真的不小。
您不仅可以轻松使用短信功能，还可以向我们发送1000条免费短信。不要白用。这1000条短信足够我们学习小程序短信和小程序短信验证码的功能了。
废话不多说，直接上代码吧。
一、使用云开发短信的条件
这个前提条件非常重要。前提条件不满足，就不能使用云端开发短信功能。
使用条件
1，必须是企业小程序，目前个人小程序无法使用短信发送2，必须开通静态网站功能（后面应该会逐步放开）3，必须开通云开发（这个没得说，不开通云开发你还用啥云开发功能啊）
以上条件全部满足后，我们就可以愉快地实现代码了。
第二，打开静态网站功能
如果不打开静态网站，直接拨打短信，会报错如下。
其实官方文档里也给出了这个错误。
那我们打开静态网站功能吧。在打开静态网站功能之前，必须打开云开发，配置云开发环境。这些我在《云开发入门》里讲过很多次了。还不知道的同学可以看看我之前的文章或者视频:
https://edu.csdn.net/course/detail/26572
这里开放云开发。我们用小程序开发者工具实现快速打开。
2-1，注册小程序
这里就不多说了。只有注册了小程序的appid才能开放云开发。
我们注册小程序后，就可以获取appid了，如上图。
2-2、创建小程序项目
这里就不多说小程序的创作了。前面的小程序基础课我讲过很多次了。小程序的基础学习
【/br/】这里强调一下，创建小程序一定要用自己的appid，不要用测试号。
如果一开始是用test appid创建的，也可以通过上面的方式将其改为自己applet的appid。
2-3、开放云开发
关于云开发的开放，这里就不做过多解释了。在我的云开发课程中也讲过很多次。你可以去看看。
只需点击开发者工具中的云开发按钮，按照提示一步一步快速打开云开发即可。
2-4、打开静态网站功能
我们的云开发打开后，可以在这里快速打开一个静态网站。
点击后，只需点击打开即可。
这个时候开是有条件的。
我们要按要求改变我们小程序的付费方式，把我们的付费方式改为按量付费。
这里不用担心。在这里，你按量付费，每个月都有免费名额。这些名额基本够我们发展和学习了。
这个时候我们的静态网站功能就开通成功了。
此时，我们的静态网站功能已经成功开通。
打开成功后，出现下图。
三，编写发送短信的云函数第三，写个云函数发短信
其实静态网站功能打开后，我们可以直接使用短信功能，不需要上传网站资源。【/br/】接下来我们用云开发的云函数来做短信发送功能。
一如既往，先看效果图。
代码编写也很简单。
其实发短信的代码很简单，就上面几行。下面教大家怎么写这个云函数。
3-1、初始化云开发环境的id
创建一个新的目录云，与pages同级别，存储云函数。
然后在project.config.json中添加cloudfunctionRoot选项
然后选择当前的云环境。
在app.js中配置环境变量
这个env环境id需要从云开发控制台获得。
3-2、创建云功能
右键单击云目录，新建Node.js云函数。
然后创建一个新的云函数，您可以自定义其名称。我这里用的是sendSms。
3-3，编写云函数
我把代码贴在这里。记得把env和定位器号码改成自己的。
const cloud = require('wx-server-sdk')cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV})exports.***in = async (event, context) => { try { const result = await cloud.openapi.cloudbase.sendSms({ env: 'xiao***ou-zfl2q', content: '编程小石头发布了新的能力', phoneNumberList: [ "+86156118235***" ] }) return result } catch (err) { return err }}
3-4，部署云功能
上面的云功能已经写好了，一定要部署下一个云功能。右键单击发送短信，然后单击下面的箭头。
上传部署成功后，系统会给出如下提示
第四，调用云功能发送短信
上面的云函数编写部署成功后，我们就可以调用这个云函数，发送短信了。
4-1，编写wxml文件
在wxml文件中编写一个按钮button和一个bindtap click事件。
4-2，编写js文件
在js文件中实现上述按钮的click事件，然后调用云函数。
调用云函数时，一定要记住这里的名称必须和你的云函数名称完全相同。
4-3，点击发送短信。
点击发送短信。
点击发送短信后，可以看到日志中打印了
open API . cloudbase . send***s:OK
，表示发送成功。
然后看看你的定位器，得到如下消息。
在这里，我们的短信发送功能就完全实现了。
其实这里应该实现的功能早就实现了。但是我们更多的是用短信发送验证码。那么下面给大家举一个发送短信验证码的例子。
实战案例~发送验证码短信
老规矩，先看效果图。
我们只需要获取用户输入的定位器号码，然后点击获取验证码，最后输入短信中收到的验证码进行验证即可。
1、编写wxml
页面很简单，只有两个输入框和两个按钮。
2.写js
Js主要是获取用户输入的定位器号码，然后发送验证码，调用云函数实现短信验证码的发送功能。用户输入验证码后，就可以验证了。
3.发送短信验证码
用户输入定位器号码后，点击发送，可以看到我们的***上收到了下面的消息。
然后用户输入获得的验证码并点击验证。
可以看到验证成功。验证成功后，可以自行设置后续操作，比如验证成功后跳转到登录成功页面。
这里我们实现了验证码发送功能。
一种生成随机验证码的方法
这里我把生成随机验证码的方法贴给你。
//获取随机验证码，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; }
本文来自莫失莫忘投稿，不代表舒华文档立场，如若转载，请注明出处：https://www.chinashuhua.cn/24/543910.html
微信扫一扫 
