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

普通短信

驗證碼短信

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

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

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

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

使用條件

• 1，必須是企業(yè)小程序，目前個人小程序無法使用短信發(fā)送

• 2，必須開通靜態(tài)網(wǎng)站功能（后面應該會逐步放開）

• 3，必須開通云開發(fā)（這個沒得說，不開通云開發(fā)你還用啥云開發(fā)功能?。?/p>

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

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

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

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

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

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

2-1，注冊小程序

這里我就不再多說了，只有注冊過小程序的appid才可以開通云開發(fā)

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

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

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

這里強調(diào)一點，就是創(chuàng)建小程序項目時一定要用我們自己的appid不要用測試號。

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

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

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

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

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

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

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

這時候開通有個條件

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

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

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

開通成功以后如下圖。

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

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

代碼編寫也很簡單

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

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

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

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

然后對cloud選擇當前環(huán)境

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

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

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

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

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

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

我這里把代碼貼給大家，記得把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: '編程小石頭發(fā)布了新的能力', ? ? ?phoneNumberList: [ ? ? ? ?"+8615611823564" ? ? ?] ? ?}) ? ?return result ?} catch (err) { ? ?return err ?} }

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

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

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

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

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

4-1，編寫wxml文件

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

4-2，編寫js文件

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

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

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

點擊發(fā)送短信

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

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

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

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

我們只需要獲取用戶輸入的手機號，然后點擊獲取驗證碼，最后輸入短信里接收到的驗證碼，進行驗證即可。

1，編寫wxml

頁面比較簡單，就兩個輸入框和兩個按鈕

2，編寫js

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

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

用戶輸入手機號以后，點擊發(fā)送，可以看到我們手機上收到了如下短信。

然后用戶輸入獲取到的驗證碼，點擊驗證。

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

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

生成隨機驗證碼的方法

我這里把生成隨機驗證碼的方法貼給大家。

?//獲取隨機驗證碼，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; ?}

我后面會專門錄制講解視頻

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

付費視頻（含源碼和筆記）：
https://edu.csdn.net/course/detail/26572

完整免費視頻（記得三連）：https://www.bilibili.com/video/BV1Ca4y1n73j/