WeChatアプレットがSMSログインを実装

WeChatアプレットがSMSログインを実装

このプロジェクトでは、SMSログインと顔認識ログイン機能の追加が必要です。以下のSMSログイン機能を実装してみましょう。

1. インターフェース効果のプレビュー

2.uViewのインストール

uView公式サイト: https://www.uviewui.com
npmインストールを例にとると、 npm install uview-uiを実行します。

3.uViewの設定

3.1 main.js での紹介

「uview-ui」から uView をインポートします。
Vue.use(uView);

3.2 uni.scssの紹介

@import 'uview-ui/theme.scss';

3.3 App.vue での紹介

<スタイル lang="scss">
	/* 最初の行に記述する必要があり、スタイルタグに lang="scss" 属性を追加する必要があることに注意してください */
	@import "uview-ui/index.scss";
</スタイル>

3.4 pages.json での設定

"イージーコム": {
		"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue",
	},

easycom に他の構成がある場合、uView スタイルの読み込みに失敗する可能性があることに注意してください。

4. SMSログインインターフェース

<テンプレート>
  <view class="wrap">
    <view class="ログイン">
      <view class="login-logo">
        <画像 src="../../../../static/img/logo.png"
               モード=""></image>
      </ビュー>
      <view class="form-view"></view>
    </ビュー>

    <u-form :model="モデル"
            ref="uフォーム">
      <u-form-item :rightIconStyle="{ color: '#888', fontSize: '32rpx' }"
                   :label-position="ラベルの位置"
                   label="携帯電話番号"
                   プロパティ="電話"
                   ラベル幅="150">
        <u-input :border="境界線"
                 placeholder="電話番号を入力してください"
                 v-model="モデル.phone"
                 type="number"></u-input>
      </u-form-item>
      <u-form-item :label-position="ラベルの位置"
                   label="確認コード"
                   prop="コード"
                   ラベル幅="150">
        <u-input :border="境界線"
                 placeholder="確認コードを入力してください"
                 v-model="モデルコード"
                 タイプ="テキスト"></u-input>
        <u-ボタンスロット="右"
                  タイプ="成功"
                  サイズ="ミニ"
                  @click="getCheckNum">{{ codeTips }}</u-button>
      </u-form-item>

      <view class="bot-view">

        <button class="btn btn-submit"
                @click="doLogin">ログイン</button>
      </ビュー>
    </u-フォーム>
    <u-検証コード秒数="60"
                         ref="uコード"
                         @change="codeChange"></u-verification-code>
  </ビュー>
</テンプレート>

5. クリックして認証コードインターフェースを取得します

'../../../../utils/UtilTools.js' から utilTools をインポートします。
'../../../../utils/validate.js' から { isMobile } をインポートします。
	チェック番号を取得する() {
			obj = utilTools.getParams(); とします。
			obj.method = 'xxx';
			obj.message = JSON.stringify({ mobile_phone: this.model.phone });
			this.$Api.getDataFromWeb(obj).then(データ => {
					if (!!data && data['success'] == 'true') {
						this.$refs.uCode.start();
					} それ以外 {
						this.$Api.messHint(`${data.detail}`);
					}
				})
				.catch(エラー => {
					 this.$Api.messHint(`${err.errMsg}`);
				});
		}

UtilTools にカプセル化されたメソッド

'./request.js' からリクエストをインポートします。
定数 request = 新しい Request().http;

ホストアドレス:'xxxx',

getDataFromWeb:関数(データ){
		リクエストを返します(`${this.hostAddress}`,data,'POST')
	}

「検証コードを取得」ボタンをクリックして、バックエンド インターフェイスを呼び出します。バックエンド インターフェイスは、Alibaba Cloud SMS を呼び出すメソッドをカプセル化し、現在渡されている携帯電話番号に固定のテンプレート情報を送信します。検証コードは、バックエンドによってランダムに生成され、テンプレートに書き込まれます。

WeChatミニプログラムでのSMSログインの実践的な実装に関するこの記事はこれで終わりです。ミニプログラムでのSMSログインに関する関連コンテンツの詳細については、123WORDPRESS.COMの以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も123WORDPRESS.COMを応援していただければ幸いです。

以下もご興味があるかもしれません:
  • WeChat アプレットのシンプルなログイン ページの実装 (ソース コード付き)
  • WeChatアプレットでセッションを維持する方法
  • WeChat アプレットのセッション ID の不一致問題の解決
  • WeChat アプレット開発ワンクリックログインで session_key と openid インスタンスを取得
  • WeChat アプレット ログインの無効なセッション キーの解決策

<<:  MySQL ファジークエリの使用法 (通常、ワイルドカード、組み込み関数)

>>:  SpringBootをDockerにデプロイし、jarパッケージを置き換える方法の詳細な説明

推薦する

JavaScriptエンジンV8の実行プロセスの詳細な説明

目次1. V8ソース2. V8サービスターゲット3. V8の初期アーキテクチャIV. V8の初期アー...

関連するプロパティのリストを含む HTML エリア イメージ ホットスポットの使用の概要

<area> タグは主にイメージマップで使用されます。イメージマップにアクティブ領域 (...

Nginx のアンチホットリンクを設定する方法

実験環境• 最小限のインストール済みの CentOS 7.3 仮想マシン• 構成: 1 コア/512...

docker run -v はデータボリュームを異常にマウントし、コンテナのステータスは常に再起動になります。

問題点: docker run に -v パラメータを追加すると、コンテナは常に再起動状態になります...

AngularパイプラインPIPEの紹介と使い方

序文PIPE、パイプラインと翻訳されます。 Angular パイプは、HTML コンポーネントで宣言...

レスポンシブWebデザイン学習(3) - モバイルデバイスでのWebページのパフォーマンスを向上させる方法

序文モバイル デバイスでは、帯域幅とプロセッサ速度の制限により、Web ページのパフォーマンスに対す...

MySQL の自動増分 ID (主キー) が不足した場合の解決策

MySQL で使用される自動インクリメント ID には多くの種類があり、各自動インクリメント ID ...

CSS セレクタの 4 つのカテゴリ: 基本、組み合わせ、属性、疑似クラス

セレクターとは何ですか?セレクターの役割は、セレクターを介して要素を見つけ、CSS スタイルを要素に...

mysqlはルートユーザーと一般ユーザーを作成し、機能を変更および削除します。

方法1: SET PASSWORDコマンドを使用する mysql -u ルート mysql> ...

Linuxフラッシュのインストール方法

Linuxにフラッシュをインストールする方法1. Flashの公式サイトにアクセスし、ダウンロードを...

Linux でジャンプ サーバー経由でリモート サーバーに接続し、ファイルを転送する方法

最近、Linux ホストに環境を展開する際に多くの問題に遭遇しました。最初の問題は、ジャンプ サーバ...

CSSスタイルで実現されるHTML背景色のグラデーション効果

エフェクトのスクリーンショット:実装コード:コードをコピーコードは次のとおりです。 <!DOC...

VueのID認証管理とテナント管理の詳細な説明

目次概要ボタンレベルの権限アイデンティティ認証管理R/U 権限権限の更新テナント管理テナント切り替え...

MySQL 5.7 でパスワードを忘れた場合の解決方法の詳細な説明

環境: [root@centos7 ~]# uname -r 3.10.0-514.el7.x86_...

さまざまなReact状態マネージャーの解釈と使用方法

まず、状態マネージャーとは何か、そしてそれが何をするのかを知る必要があります。複数のページで同じプロ...