古いルールは最初にレンダリングを調べます
通常のSMS
検証コードSMS
今日、クラウド開発担当者から、クラウド開発はテキストメッセージングをサポートしているとの連絡があり、試してみるのが待ちきれません。
公式ドキュメントを入力してください。開発者にとってのクラウド開発のメリットは決して少なくありません。
SMS機能は非常に便利に使用できるだけでなく、1000件のフリーテキストメッセージが送信されました。何もする必要はありません。これらの1,000個のテキストメッセージは、アップルトのSMS機能とアップルトのSMS検証コード機能を学習するのに十分です。
あまり意味がないので、コードを書いてみましょう
1.クラウドを使用してSMSを開発するための条件
この前提条件は非常に重要です。条件が満たされない場合、クラウドを使用してSMS機能を開発することはできません。
利用条件
- 1.エンタープライズアップルである必要があり、現在、個人用の小冊子をSMSで送信することはできません。
- 2.静的Webサイト機能をアクティブにする必要があります（後で徐々にリリースする必要があります）
- 3.クラウド開発をアクティブ化する必要があります（これは、クラウド開発をアクティブ化しない場合にどのクラウド開発機能を使用するかということではありません）
上記の条件が満たされた後、私たちは喜んでコードを書くことができます。
次に、静的Webサイト機能を開きます
静的なWebサイトを開かずに、SMS送信を直接呼び出すと、次のエラーが報告されます。
実際、このエラーは公式ドキュメントにも記載されています。
次に、静的Webサイト機能を開きます。静的Webサイト機能を有効にする前に、クラウド開発を有効にし、クラウド開発環境を構成する必要があります。クラウド開発の紹介で、これらについて何度も話しました。知らない学生は私の以前の記事やビデオを読むことができます：https：//edu.csdn.net/course/detail/26572
ここでは、小さなプログラム開発者ツールを使用してクラウド開発を開始し、迅速なアクティベーションを実現します。
2-1、リンゴを登録する
ここでは詳しく説明しません。クラウド開発を開くことができるのは、ミニプログラムを登録したappidのみです。ミニプログラム
を登録すると、上の図に示すように、appidを取得できます。
2-2、小さなプログラムプロジェクトを作成する
ここでは、ミニプログラムプロジェクトの作成については詳しく説明しません。以前のミニプログラム基本コースで何度も話しました。「ミニプログラムの基本学習」
では、ここで1つのポイントを強調します。つまり、ミニプログラムプロジェクトを作成するときは、テスト番号ではなく、独自のappidを使用する必要があります。
最初にテストappidを使用して作成した場合は、上記の方法で独自のappletのappidに置き換えることもできます。
2-3、オープンクラウド開発
ここではクラウド開発の開始についてはあまり説明しませんが、クラウド開発コースでは何度も取り上げてきました。次のページに移動して
、開発者ツールのクラウド開発ボタンをクリックし、プロンプトに従ってステップバイステップでクラウド開発をすばやく開始できます。
2-4、静的Webサイト機能を開く
クラウドの開発が完了したら、ここで静的なWebサイトをすばやく開くことができます。
クリック後、直接アクティベートをクリックすることができます。現時点
では、
ミニプログラムの支払い方法を必要に応じて変更し、支払い方法をボリュームで支払うように変更する必要があるという条件があります。
ここでは心配しないでください。従量制で、毎月無料の割り当てがあります。これらの割り当ては、基本的に開発と学習に十分です。
この時点で、静的Webサイト機能は正常にアクティブ化されています。
正常に開くと、次の図が表示されます。
3、SMSを送信するためのクラウド関数を作成します
実際、上記の静的なWebサイト機能を開いた後は、WebサイトのリソースをアップロードせずにSMS機能を直接使用できます。
クラウドが開発したクラウド機能機能を使ってSMS送信機能をやってみましょう。
古いルールでは、最初にレンダリングを確認します。
コードの記述も非常に単純です。
実際、SMSを送信するためのコードは非常に単純で、上記の行だけです。このクラウド関数の書き方を教えましょう。
3-1、クラウド開発環境IDを初期化する
ページと同じレベルに新しいディレクトリクラウドを作成してクラウド機能を保存し
、project.config.jsonにcloudfunctionRootオプションを追加します。
次に、クラウドの現在の環境を選択し、
app.jsで環境変数を構成します。
この環境環境IDを取得するには、クラウド開発コンソールに移動する必要があります。
3-2、クラウド関数を作成する
クラウドディレクトリを右クリックし、新しいNode.jsクラウド関数
を作成してから、新しいクラウド関数を作成します。名前はカスタマイズできます。ここでsendSmsを使用します
3-3、クラウド関数を書く
ここにコードを投稿します。SMSを受信する環境と携帯電話番号を自分のものに変更することを忘れないでください。
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、クラウド機能を呼び出してSMSを送信します
クラウド関数が正常に作成および展開されたら、このクラウド関数を呼び出してSMSを送信できます。
4-1、wxmlファイルを書き込む
wxmlファイルにボタンボタンを書き込み、bindtapクリックイベントを書き込みます
4-2、jsファイルを書く
上記のボタンのクリックイベントをjsファイルに実装してから、クラウド関数を
呼び出してクラウド関数を呼び出す場合、ここでの名前はクラウド関数の名前と完全に同じである必要があることに注意する必要があります。
4-3、クリックしてSMSを送信
[SMSの送信
]をクリックし、[SMSの送信]をクリックすると、openapi.cloudbase.sendSms：ok
がログに出力され、送信が成功したことがわかります。
それから私は自分の電話をもう一度見て、以下のテキストメッセージを受け取りました。
この時点で、SMS送信機能は完全に実現されています。
実際、ここで実現すべき機能はすでに実現されています。ただし、SMSシナリオを使用して、SMSで確認コードを送信します。それでは、SMS確認コードを送信する例を見てみましょう
実例〜確認コードSMSを送信
古いルールでは、最初にレンダリング
を確認します。ユーザーが入力した携帯電話番号を取得し、クリックして確認コードを取得し、最後にSMSで受信した確認コードを入力して確認するだけです。
1.wxmlを作成します
このページは比較的シンプルで、2つの入力ボックスと2つのボタンだけです。
2.jsを書く
jsの主な目的は、ユーザーが入力した携帯電話番号を取得し、確認コードを送信し、確認コードを送信してクラウド機能を呼び出し、SMS確認コード送信機能を実現することです。ユーザーは確認コードを入力した後に確認できます。
3.SMS確認コードを送信します
ユーザーが携帯電話番号を入力して[送信]をクリックすると、次の短いメッセージが携帯電話で受信されたことがわかります。
次に、ユーザーは取得した確認コードを入力し、[確認]をクリックします。
検証が成功したことがわかります。検証が成功した後、検証が成功した後にログイン成功ページにジャンプするなど、後続の操作を自分で決定できます。
この時点で、検証コード送信機能を実現しました。
ランダム検証コードの生成方法
ここでは、ランダムな検証コードを生成する方法をすべての人に投稿します。
//获取随机验证码，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.51cto.com/course/19575.html
完全な無料ビデオ（3つのリンクを覚えておいてください）：https：//www.bilibili.com/video/BV1Ca4y1n73j/