老规矩先看效果图

普通短信

验证码短信

今天，我从云开发官方获悉，云开发支持发送短信的功能，然后我就迫不及待地想尝试一下。

翻看官方文档，云开发给我们开发者带来的好处确实不小。

不仅可以非常方便的使用短信功能，还给了我们1000条免费短信。 不需要什么。 这1000条短信足够我们学习小程序的短信功能和小程序的短信验证码功能。

废话不多说，直接上代码

1、利用云开发短信的条件

这个前提非常重要。 如果不满足条件，则无法使用云端开发短信功能。

使用条件

满足了上面的条件之后，我们就可以愉快的编码了。

2.启用静态网站功能

如果不打开静态网站，直接调用短信发送，会报如下错误。

其实官方文档中也给出了这个错误。

然后我们启用静态网站功能。 在启用静态网站功能之前，您必须启用云开发并配置云开发环境。 我在云开发的介绍中多次谈到过这一点。 还不知道的同学可以看我之前的文章或者视频：

这里为了实现云开发，我们使用小程序开发者工具来实现快速激活。

2-1、注册小程序

这里就不多说了，只有注册了小程序的才可以开启云开发

我们注册小程序后就可以获取到了，如上图

2-2、创建小程序项目

关于小程序项目的创建这里就不多说了。 我在小程序基础课程中已经讲过很多次了。 《小程序基础学习》

这里要强调的一点是，在创建小程序项目时腾讯官方小程序开发，一定要用我们自己的，而不是测试号。

如果你一开始是用测试创建的，也可以按照上图的方式替换成自己的小程序。

2-3、开放云开发

关于云开发的开放这里我就不过多解释了。 我在我的云开发课程里也讲过很多次了，大家可以看看

您只需点击开发者工具中的云开发按钮，按照提示一步一步操作即可快速激活云开发。

2-4、开启静态网站功能

我们上面开启了云开发之后，我们就可以在这里快速的打开一个静态网站了。

点击后直接点击打开即可

这时候有一个条件

我们必须按照要求改变我们小程序的支付方式，只需将我们的支付方式改为按量付费即可。

这里不用担心，这里的按量付费每个月都有免费额度。这些额度基本够我们开发学习了

此时我们的静态网站功能就已经成功激活了。

打开成功后，如下图所示。

3. 编写云函数发送短信

其实，启用上述静态网站功能后，我们就可以直接使用短信功能，无需上传网站资源。

接下来我们使用云端开发的云函数功能来做短信发送功能。

老规矩先看效果图

代码编写也很简单

其实发送短信的代码很简单，就是上面几行。 下面就教大家如何编写这个云函数。

3-1、初始化云开发环境id

新建一级目录，用于存放云函数

然后在..json中添加选项。

然后选择当前环境

在app.js中配置环境变量

需要去云开发控制台获取这个env环境id

3-2、创建云函数

右键该目录，新建Node.js云函数

然后新建一个云函数，名字可以自定义。我这里用的

3-3、编写云函数

我把代码贴在这里给大家，记得把env和接收短信的手机号码替换成自己的。

const cloud = require('wx-server-sdk') cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV }) exports.main = async (event, context) => { try { const result = await cloud.openapi.cloudbase.sendSms({ env: 'xiaoshitou-zfl2q', content: '编程小石头发布了新的能力', phoneNumberList: [ "+8615611823564" ] }) return result } catch (err) { return err } }

3-4、部署云功能

上面的云函数写完之后，一定要记得部署云函数。 右键单击并单击下面的箭头。

上传部署成功后会有如下提示

4.调用云功能发送短信

当我们成功编写并部署了上述云函数后，我们就可以调用这个云函数并发送短信了。

4-1、编写wxml文件

在wxml文件中写一个按钮，并写一个点击事件

4-2、编写js文件

在js文件中实现上面的点击事件，然后调用云函数

在调用云函数的时候，一定要记住，这里的名称必须和你的云函数名称完全一致。

4-3、点击发送短信

点击发送短信

点击发送短信后，可以在日志中看到打印..: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; }

稍后我会录制一个视频来解释

官方文档：

付费视频（含源码及注释）：

完整的免费视频（记住三重）：