このプロジェクトでは、SMSログインと顔認識ログイン機能の追加が必要です。以下のSMSログイン機能を実装してみましょう。 1. インターフェース効果のプレビュー2.uViewのインストールuView公式サイト: https://www.uviewui.com 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を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL ファジークエリの使用法 (通常、ワイルドカード、組み込み関数)
>>: SpringBootをDockerにデプロイし、jarパッケージを置き換える方法の詳細な説明
初めての投稿ですので、間違いや問題点などありましたら、コメント欄で指摘していただければ、今後改善させ...
目次問題のシナリオ:解決: 1. フィールドを個別にチェックする2. フォームフィールドの下のフィー...
Visual Studio Code の最新の Insider バージョンには、コードのリモート デ...
目次執筆の背景プロジェクトの説明事前準備注記執筆の背景以前のプロジェクトではTencent Maps...
CSS ウェブページレイアウトを行う場合、XHTML1.0 仕様に準拠する必要があることは誰もが知っ...
MySQLをインストールした後、ターミナルでmysql -u root -pと入力してEnterを押...
サーバーデータがSSL証明書を使用して暗号化および認証されていない場合、ユーザーのデータはプレーンテ...
最近、フロントエンドの vue.js ドッキング機能モジュールに取り組んでいたとき、画像をダウンロー...
目次テーブルの競合を見つけて修正するインデックス統計の更新テーブルの競合を見つけて修正するデータ テ...
目次コンポーネントの基本概念オブジェクトとコンポーネントの違い成分属性属性とプロパティ属性:財産:ク...
禅コーディングテキストエディタプラグインです。 Zen Coding を使用するテキスト エディター...
MyISAM と InnoDB は、MySQL で最も一般的なストレージ エンジンです。前回の記事で...
新しいserver.jsを作成する糸初期化 -y 糸を追加エクスプレスノードモン -D var ex...
目次ブロックレベル関数オブジェクトのプロトタイプを直接変更すると呼び出された人発信者評価ブロックレベ...
目次1. グローバルガード1. グローバル前線警備2. グローバル解像度ガード3. グローバルポスト...