老規(guī)矩先看效果圖

普通短信

驗(yàn)證碼短信

今天被云開(kāi)發(fā)官方告知，云開(kāi)發(fā)支持發(fā)短信功能了，然后就迫不及待地來(lái)嘗下鮮。

進(jìn)入官方文檔一看，云開(kāi)發(fā)給咱們開(kāi)發(fā)者的福利還真不小。
不僅僅可以很方便地使用短信功能，還送了咱們1000條免費(fèi)短信。不用白不用嘛。這1000條短信足夠咱們把小程序短信功能，和小程序短信驗(yàn)證碼功能都學(xué)會(huì)了。
廢話不多說(shuō)了，咱們直接來(lái)擼代碼

一，使用云開(kāi)發(fā)短信的條件

這個(gè)前置條件很重要，條件不滿足，你就沒(méi)法使用云開(kāi)發(fā)短信功能。

使用條件

• 1，必須是企業(yè)小程序，目前個(gè)人小程序無(wú)法使用短信發(fā)送
• 2，必須開(kāi)通靜態(tài)網(wǎng)站功能（后面應(yīng)該會(huì)逐步放開(kāi)）
• 3，必須開(kāi)通云開(kāi)發(fā)（這個(gè)沒(méi)得說(shuō)，不開(kāi)通云開(kāi)發(fā)你還用啥云開(kāi)發(fā)功能?。?/li>

上面條件都滿足以后，我們就可以來(lái)愉快地?cái)]代碼了。

二，開(kāi)通靜態(tài)網(wǎng)站功能

如果你不開(kāi)通靜態(tài)網(wǎng)站，直接調(diào)用短信發(fā)送，會(huì)報(bào)如下錯(cuò)誤。

其實(shí)官方文檔里也有給出這個(gè)錯(cuò)誤。

那么我們就來(lái)開(kāi)通靜態(tài)網(wǎng)站功能。開(kāi)通靜態(tài)網(wǎng)站功能之前，必須開(kāi)通云開(kāi)發(fā)，配置好云開(kāi)發(fā)的環(huán)境。這些我在云開(kāi)發(fā)入門(mén)里講過(guò)很多遍。還不知道的同學(xué)可以翻看下我前面的文章或者視頻：https://edu.csdn.net/course/detail/26572

這里開(kāi)通云開(kāi)發(fā)我們借助小程序開(kāi)發(fā)者工具來(lái)實(shí)現(xiàn)快速開(kāi)通。

2-1，注冊(cè)小程序

這里我就不再多說(shuō)了，只有注冊(cè)過(guò)小程序的Appid才可以開(kāi)通云開(kāi)發(fā)

我們注冊(cè)好小程序后，就可以拿到appid了，如上圖

2-2，創(chuàng)建一個(gè)小程序項(xiàng)目

小程序項(xiàng)目的創(chuàng)建，我這里不再多說(shuō)，我前面小程序基礎(chǔ)課里有講過(guò)很多遍?！缎〕绦蚧A(chǔ)學(xué)習(xí)》

這里強(qiáng)調(diào)一點(diǎn)，就是創(chuàng)建小程序項(xiàng)目時(shí)一定要用我們自己的appid不要用測(cè)試號(hào)。

如果你一開(kāi)始是用測(cè)試appid創(chuàng)建的，也可以通過(guò)上圖的方式更換成自己的小程序的appid。

2-3，開(kāi)通云開(kāi)發(fā)

這里云開(kāi)發(fā)的開(kāi)通，我就不做過(guò)多講解了，我云開(kāi)發(fā)課程里也講過(guò)很多遍。大家可以去翻看下

只需要點(diǎn)擊開(kāi)發(fā)者工具里的云開(kāi)發(fā)按鈕，跟著提示一步步操作就可以快速開(kāi)通云開(kāi)發(fā)。

2-4，開(kāi)通靜態(tài)網(wǎng)站功能

我們上面云開(kāi)發(fā)開(kāi)通好以后，就可以在這里快速開(kāi)通靜態(tài)網(wǎng)站了。

點(diǎn)擊以后，直接點(diǎn)擊開(kāi)通即可

這時(shí)候開(kāi)通有個(gè)條件

我們必須按照要求改變自己小程序的付費(fèi)方式，把我們的付費(fèi)方式改成按量付費(fèi)即可。

這里不用擔(dān)心，這里的按量付費(fèi)，每月都有免費(fèi)額度。這些額度我們開(kāi)發(fā)學(xué)習(xí)基本上夠用了

這個(gè)時(shí)候我們的靜態(tài)網(wǎng)站功能就開(kāi)通成功了。

開(kāi)通成功以后如下圖。

三，編寫(xiě)發(fā)送短信的云函數(shù)

其實(shí)上面靜態(tài)網(wǎng)站功能開(kāi)通以后，我們不用上傳網(wǎng)站資源，就可以直接來(lái)使用短信功能了。
下面我們就來(lái)使用云開(kāi)發(fā)的云函數(shù)功能來(lái)做短信發(fā)送功能。
老規(guī)矩先看效果圖

代碼編寫(xiě)也很簡(jiǎn)單

其實(shí)發(fā)送短信的代碼很簡(jiǎn)單，就上面這幾行。下面就來(lái)教大家如何編寫(xiě)這個(gè)云函數(shù)。

3-1，初始化云開(kāi)發(fā)環(huán)境id

新建一個(gè)和pages平級(jí)的目錄cloud，用于存放云函數(shù)

然后在project.config.json里添加cloudfunctionRoot選項(xiàng)。

然后對(duì)cloud選擇當(dāng)前環(huán)境

在app.js里配置環(huán)境變量

這個(gè)env環(huán)境id需要你去云開(kāi)發(fā)控制臺(tái)獲取

3-2，創(chuàng)建云函數(shù)

右鍵cloud目錄，新建Node.js云函數(shù)

然后新建一個(gè)云函數(shù)，名字你可以自定隨便定。我這里用sendSms

3-3，編寫(xiě)云函數(shù)

我這里把代碼貼給大家，記得把env和接收短信的手機(jī)號(hào)換成你自己的。

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: '編程小石頭發(fā)布了新的能力',
      phoneNumberList: [
        "+8615611823564"
      ]
    })
    return result
  } catch (err) {
    return err
  }
}

3-4，部署云函數(shù)

上面云函數(shù)編寫(xiě)好了，一定要記得部署下云函數(shù)。右鍵sendSms然后點(diǎn)擊下面箭頭所示的即可。

上傳部署成功后，會(huì)有下面這樣的提示

四，調(diào)用云函數(shù)發(fā)送短信

我們上面云函數(shù)編寫(xiě)并部署成功以后，就可以來(lái)調(diào)用這個(gè)云函數(shù)，發(fā)送短信了。

4-1，編寫(xiě)wxml文件

在wxml文件里寫(xiě)一個(gè)button按鈕，編寫(xiě)一個(gè)bindtap點(diǎn)擊事件

4-2，編寫(xiě)js文件

在js文件里實(shí)現(xiàn)上面button的點(diǎn)擊事件，然后調(diào)用云函數(shù)

調(diào)用云函數(shù)時(shí)，一定要記得這里的name必須和你的云函數(shù)名一模一樣。

4-3，點(diǎn)擊發(fā)送短信

點(diǎn)擊發(fā)送短信

點(diǎn)擊發(fā)送 短信以后，可以看到日志里打印openapi.cloudbase.sendSms:ok
這就代表發(fā)送成功了。
然后再看下手機(jī)，收到下面的短信。

到這里我們的短信發(fā)送功能就完整地實(shí)現(xiàn)了。
其實(shí)到這里該實(shí)現(xiàn)的功能，就已經(jīng)實(shí)現(xiàn)了。但是我們使用短信場(chǎng)景更多的是用短信發(fā)送驗(yàn)證碼。所以接下來(lái)給大家做一個(gè)發(fā)送短信驗(yàn)證碼的例子出來(lái)

實(shí)戰(zhàn)案例~發(fā)送驗(yàn)證碼短信

老規(guī)矩，先看效果圖

我們只需要獲取用戶輸入的手機(jī)號(hào)，然后點(diǎn)擊獲取驗(yàn)證碼，最后輸入短信里接收到的驗(yàn)證碼，進(jìn)行驗(yàn)證即可。

1，編寫(xiě)wxml

頁(yè)面比較簡(jiǎn)單，就兩個(gè)輸入框和兩個(gè)按鈕

2，編寫(xiě)js

js里主要是獲取用戶輸入的手機(jī)號(hào)，然后發(fā)送驗(yàn)證碼，發(fā)送驗(yàn)證碼調(diào)用云函數(shù)實(shí)現(xiàn)短信驗(yàn)證碼發(fā)送功能。用戶輸入驗(yàn)證碼以后進(jìn)行校驗(yàn)即可。

3，發(fā)送短信驗(yàn)證碼

用戶輸入手機(jī)號(hào)以后，點(diǎn)擊發(fā)送，可以看到我們手機(jī)上收到了如下短信。

然后用戶輸入獲取到的驗(yàn)證碼，點(diǎn)擊驗(yàn)證。

可以看到驗(yàn)證成功，驗(yàn)證成功以后后面的操作就可以自己定了，比如驗(yàn)證成功以后跳轉(zhuǎn)到登錄成功頁(yè)。

到這里我們就實(shí)現(xiàn)了驗(yàn)證碼發(fā)送功能了。

生成隨機(jī)驗(yàn)證碼的方法

我這里把生成隨機(jī)驗(yàn)證碼的方法貼給大家。

  //獲取隨機(jī)驗(yàn)證碼，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;
  }

我后面會(huì)專(zhuān)門(mén)錄制講解視頻

官方文檔：
https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/cloudbase/cloudbase.sendSms.html