老规矩先看效果图普通短信验证码短信

菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技

老规矩先看效果图普通短信验证码短信

老规矩是先看效果图

普通短信

验证码短信

今天接到云开发官方通知，云开发支持短信功能，我迫不及待地想尝试一下。

看一下官方文档，我们可以看到云开发给我们开发带来了相当多的好处。

不仅可以非常方便的使用短信功能，还给我们提供了1000条免费短信。 如果你不使用它，那就是白费力气。 这1000条短信足够我们学习小程序短信功能和小程序短信验证码功能了。

废话不多说，我们直接上代码

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

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

使用条件

满足了上面的条件之后教育微信小程序开发，我们就可以愉快的编码了。

2.激活静态网站功能

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

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

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

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

2-1、注册小程序

这里我就不多说了。 只有注册了小程序的appid才能激活云开发。

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

2-2. 创建一个小程序项目

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

这里需要强调的一点是，在创建小程序项目时，一定要使用自己的appid，而不是测试号。

如果你一开始就用测试appid创建的，也可以通过上面的方法修改为自己小程序的appid。

2-3、启用云开发

关于云开发的激活这里就不做过多介绍了。 我在云开发课程里也讲过很多次了，你可以看看

只需点击开发工具中的云开发按钮，按照分步说明即可快速启用云开发。

2-4. 激活静态网站功能

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

点击后直接点击激活即可

目前已具备开通条件

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

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

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

激活成功后，如下图所示。

3. 编写发送短信的云函数

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

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

老规矩是先看效果图

写代码也很简单

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

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

新建一个与页面同级的目录云，用于存放云功能

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

然后选择云当前的环境

在app.js中配置环境变量

您需要到云开发控制台获取该env环境id。

3-2. 创建云函数

右键cloud目录，新建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;
  }

稍后我会录制视频讲解。

官方文档：

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

完整的免费视频（记住连续三个视频）：

炫佑科技专注互联网开发小程序开发-app开发-软件开发-网站制作等