WeChatミニプログラムはどのようにしてユーザー情報とユーザーの電話番号を同時に取得するのか

WeChatミニプログラムはどのようにしてユーザー情報とユーザーの電話番号を同時に取得するのか

今日ログインページを書いていたとき、個人情報と携帯電話番号を認証する必要がありましたが、ページにボタンを 2 つだけ置くのは愚かではないでしょうか? ? ?

私は、ユーザーが携帯電話番号を認証できるようにするためのマスク レイヤーを作成しました。

1. WeChat ログイン ショートカットをクリックすると、最初にトリガーされるのは、ユーザー情報 userInfo を取得する WeChat ネイティブ メソッドであり、次に成功コールバックでマスク レイヤーが開かれます...

2. マスクレイヤーにボタンがあります。このボタンは、WeChat のネイティブ getPhoneNumber メソッドをトリガーして、ユーザーの携帯電話番号を取得します。これについては、これ以上説明する必要はありません。 。 。 。

コードを直接ダンプする

<!--クイックログイン-->
<ボタン open-type="getUserInfo" @tap="getUserProfile">
    <view class="アイテム列中央">
	<image class="iconc" src="/static/img/share/wx.png"></image>
    </ビュー>
</ボタン>
<!--ログインポップアップウィンドウ-->
<view class="modal-mask" catchtouchmove="preventTouchMove" v-if="showModal"></view>
    <view class="modal-dialog" v-if="showModal">
	<view class="modal-content">
	<view><image src='' class='show'></image></view>
	<view >携帯電話番号をバインドする</view>
	<view>この操作を実行する前に携帯電話番号をバインドしてください</view>  
	<ボタン open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
		<image src='/static/img/share/wx.png' class='iconWx'></image>WeChat ユーザーのワンクリックバインディング </button>
    </ビュー>
</ビュー>
メソッド: {
    ユーザープロファイルを取得する(){
    // ユーザー情報を取得するには wx.getUserProfile を使用することをお勧めします。開発者は、このインターフェイスを通じてユーザーの個人情報を取得するたびに確認する必要があります。// 開発者は、ポップアップが繰り返し表示されるのを避けるために、ユーザーがすばやく入力したアバターのニックネームを適切に保存する必要があります。wx.getUserProfile({
            desc: '会員情報を記入するために使用されます', //ユーザーの個人情報を取得する目的を宣言します。これは後でポップアップウィンドウに表示されますので、慎重に記入してください success: (res) => {
		this.showDialogBtn(); // ポップアップウィンドウを呼び出して、ワンクリックで携帯電話番号を取得します(自分で作成)
            }
	})
    },
    // ワンクリックで電話番号を取得するためのポップアップウィンドウを表示する showDialogBtn: function () {
            this.showModal = true
                    },
                    // ワンクリックで電話番号を取得するためのポップアップウィンドウを非表示にするhideModal: function () {
                             this.showModal = false
                    },
    //ユーザーの電話番号を取得するgetPhoneNumber(e) {
        コンソール、ログ(e.detael)
    },

要約する

WeChatミニプログラムがユーザー情報とユーザーの携帯電話番号を同時に取得する方法についての記事はこれで終わりです。WeChatミニプログラムがユーザー情報と携帯電話番号を取得する方法についての関連コンテンツについては、123WORDPRESS.COMの以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも123WORDPRESS.COMを応援していただければ幸いです。

以下もご興味があるかもしれません:
  • WeChat アプレット認証によるユーザー詳細の取得 OpenID の例の詳細な説明
  • WeChatアプレットがユーザー情報を取得し、ログイン状態を保存する
  • WeChatアプレットでユーザー情報を取得し、データベースに保存する操作例
  • WeChat ミニプログラムはどのようにしてユーザー情報を取得しますか?
  • WeChatミニプログラムは、ユーザーが個人情報の取得を再度承認する必要があるかどうかを決定します。
  • WeChatアプレット開発でユーザー情報を取得する2つの方法

<<:  MySQL の if 関数の正しい使い方の詳細な説明

>>:  中国語でのNginx設定パラメータの詳細な説明(負荷分散とリバースプロキシ)

推薦する

Vue.jsは音楽プレーヤーを実装します

この記事では、音楽プレーヤーを実装するためのVue.jsの具体的なコードを参考までに共有します。具体...

スライドボタン効果を実現するネイティブJS

Jsで作ったスライドボタンの具体的なコードは参考までに。具体的な内容は以下のとおりですまずエフェク...

CSS フィルターを使用してマウスオーバー効果を記述する例

CSSフィルターを使用してマウスオーバー効果を記述する <div class="fi...

Vuexはシンプルなショッピングカートを実装します

この記事では、参考までに、Vuex の具体的なコードを共有して、簡単なショッピングカートを実装します...

JavaScript でサウンド効果付きの花火効果を実装する

コードを書くのに 30 分かかりましたが、この HTML5 Canvas New Year Fire...

Echatsチャートの大画面適応を実装する方法

目次説明する成し遂げるプロジェクトのディレクトリ構造は次のとおりです。効果図は以下のとおりです要約す...

HTML の marquee 属性の詳細な説明

このタグはHTML3.2の一部ではなく、MSIE3以降のカーネルでのみサポートされているため、IEカ...

nginx をベースにした Web クラスター プロジェクトをすばやく構築する方法を説明します。

目次1. プロジェクト環境2. プロジェクトの説明3. プロジェクトの手順1. インストール2. 構...

Windows での MySQL のダウンロード、インストール、設定、使用に関するチュートリアル

MySQLの概要MySQL はリレーショナル データベース管理システムです。データベースは構造化され...

MySQL の binlog_format モードと設定の詳細な分析

MySQL レプリケーションには、SQL ステートメント ベースのレプリケーション (SBR)、行ベ...

Dockerfileの指示と基本構造の説明

Dockerfile を使用すると、ユーザーはカスタム イメージを作成できます。基本構造Docker...

MySQLのトランザクション特性とレベル原則の分析

1. トランザクションとは何ですか?データベース トランザクション (略称: トランザクション) は...

HTML入力で値が変更されたときにリスナーイベントを追加することの簡単な分析

達成される効果多くの場合、入力ボックスの値の変化をリアルタイムで監視し、ブラウザを誘導してウェブサイ...

TypescriptとAxiosに基づくインターフェースリクエスト管理の詳細な説明

目次アイデア傍受を要求するレスポンスインターセプションhttpClient.tsを使用してリクエスト...

JavaScript クロージャの説明

目次1. クロージャとは何ですか? 1.2 クロージャのメモ化: 関数は定義された環境を記憶する1....