老規矩先看效果圖

普通簡訊

驗證碼簡訊

今天被雲開發官方告知，雲開發支援發簡訊功能了，然後就迫不及待的來嘗下鮮。

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

一，使用雲開發簡訊的條件

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

使用條件

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

上面條件都滿足以後，我們就可以來愉快的擼程式碼了。

二，開通靜態網站功能

如果你不開通靜態網站，直接呼叫簡訊傳送，會報如下錯誤。

其實官方文件裡也有給出這個錯誤。

那麼我們就來開通靜態網站功能。開通靜態網站功能之前，必須開通雲開發，配置好雲開發的環境。這些我在雲開發入門裡講過很多遍。
這裡開通雲開發我們藉助小程式開發者工具來實現快速開通。

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;
  }

我後面會專門錄製講解影片