老規矩先看效果圖

普通短信

驗證碼短信

今天被雲開發官方告知，雲開發支持發短信功能了，然後就迫不及待地來嘗下鮮。

進入官方文檔一看，雲開發給咱們開發者的福利還真不小。
不僅僅可以很方便地使用短信功能，還送了咱們1000條免費短信。不用白不用嘛。這1000條短信足夠咱們把小程序短信功能，和小程序短信驗證碼功能都學會了。
廢話不多說了，咱們直接來擼代碼

一，使用雲開發短信的條件

這個前置條件很重要，條件不滿足，你就沒法使用雲開發短信功能。

使用條件

• 1，必須是企業小程序，目前個人小程序無法使用短信發送
• 2，必須開通靜態網站功能（後面應該會逐步放開）
• 3，必須開通雲開發（這個沒得說，不開通雲開發你還用啥雲開發功能啊）

上麵條件都滿足以後，我們就可以來愉快地擼代碼了。

二，開通靜態網站功能

如果你不開通靜態網站，直接調用短信發送，會報如下錯誤。

其實官方文檔里也有給出這個錯誤。

那麼我們就來開通靜態網站功能。開通靜態網站功能之前，必須開通雲開發，配置好雲開發的環境。這些我在雲開發入門裡講過很多遍。還不知道的同學可以翻看下我前面的文章或者視頻：
https://edu.csdn.net/course/detail/26572

這裡開通雲開發我們藉助小程序開發者工具來實現快速開通。

2-1，註冊小程序

這裡我就不再多說了，只有註冊過小程序的appid才可以開通雲開發

我們註冊好小程序後，就可以拿到appid了，如上圖

2-2，創建一個小程序項目

小程序項目的創建，我這裡不再多說，我前面小程序基礎課里有講過很多遍。《小程序基礎學習》

這裡強調一點，就是創建小程序項目時一定要用我們自己的appid不要用測試號。

如果你一開始是用測試appid創建的，也可以通過上圖的方式更換成自己的小程序的appid。

2-3，開通雲開發

這裡雲開發的開通，我就不做過多講解了，我雲開發課程里也講過很多遍。大家可以去翻看下

只需要點擊開發者工具里的雲開發按鈕，跟着提示一步步操作就可以快速開通雲開發。

2-4，開通靜態網站功能

我們上面雲開發開通好以後，就可以在這裡快速開通靜態網站了。

點擊以後，直接點擊開通即可

這時候開通有個條件

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

這裡不用擔心，這裡的按量付費，每月都有免費額度。這些額度我們開發學習基本上夠用了

這個時候我們的靜態網站功能就開通成功了。

開通成功以後如下圖。

三，編寫發送短信的雲函數

其實上面靜態網站功能開通以後，我們不用上傳網站資源，就可以直接來使用短信功能了。
下面我們就來使用雲開發的雲函數功能來做短信發送功能。
老規矩先看效果圖

代碼編寫也很簡單

其實發送短信的代碼很簡單，就上面這幾行。下面就來教大家如何編寫這個雲函數。

3-1，初始化雲開發環境id

新建一個和pages平級的目錄cloud，用於存放雲函數

然後在project.config.json里添加cloudfunctionRoot選項。

然後對cloud選擇當前環境

在app.js里配置環境變量

這個env環境id需要你去雲開發控制台獲取

3-2，創建雲函數

右鍵cloud目錄，新建Node.js雲函數

然後新建一個雲函數，名字你可以自定隨便定。我這裡用sendSms

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，部署雲函數

上面雲函數編寫好了，一定要記得部署下雲函數。右鍵sendSms然後點擊下面箭頭所示的即可。

上傳部署成功後，會有下面這樣的提示

四，調用雲函數發送短信

我們上面雲函數編寫並部署成功以後，就可以來調用這個雲函數，發送短信了。

4-1，編寫wxml文件

在wxml文件里寫一個button按鈕，編寫一個bindtap點擊事件

4-2，編寫js文件

在js文件里實現上面button的點擊事件，然後調用雲函數

調用雲函數時，一定要記得這裡的name必須和你的雲函數名一模一樣。

4-3，點擊發送短信

點擊發送短信

點擊發送 短信以後，可以看到日誌里打印
openapi.cloudbase.sendSms: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;
  }