#微信小计算# #uni-app# uni.getUserProfileを使用してWeChat認証ログインを実現する（ソースコード付き）

1. 要件:

WeChat認証ログインを実現し、ボタンをクリックすると、WeChat認証ログインのポップアップボックスが下部に表示されます。クリックして認証し、他のページにジャンプします

2. 手順とアイデア:

(1) 植字：

<template>
	<view class="login">
		<view class="login_infor">
			<img :src="avatarUrl" alt="">
		</view>
		<view class="name" >{
   
   {nickName}}</view>
		<view class="tip">将使用微信登录CHUJUNJUN课程平台</view>
		<button class='Login_btn' @click="getUser()">确定登录</button>
		<view class="cancel_btn" @click="exitApplet()">取消</view>
	</view>
</template>

(2) WeChat アバターとニックネームの変数を定義し、値を割り当て、インターフェースにユーザー情報を入力します

data() {
	return {
        //设置初始值
	    nickName:'用户昵称',
		avatarUrl:'https://gimg2.baidu.com/image_searchxxxx'
},

<template>
	<view class="login">
		<view class="login_infor">
			<img :src="avatarUrl" alt="">
		</view>
		<view class="name" >{
   
   {nickName}}</view>
		<view class="tip">将使用微信登录CHUJUNJUN课程平台</view>
	</view>
</template>

(3)メソッド内にクリックイベントgetUser()を設定

<button class='Login_btn' @click="getUser()">确定登录</button>

(4) API --- uni.getUserProfile を呼び出して WeChat ポップアップボックスを起動し、ユーザー情報を取得します。リクエストごとに認証ウィンドウがポップアップ表示され、ユーザーが同意すると userInfo が返されます。

[許可] または [拒否] をクリックして、対応する操作 (ポップアッププロンプト情報、または他のページへのジャンプ) を実行します。

		//获取用户信息(授权)
		getUser() {
				uni.getUserProfile({
				desc: "获取你的昵称、头像、地区及性别",
				success: (res) => {
                    console.log("所有",res);
					this.nickName = res.userInfo.nickName; //获取微信昵称
					this.avatarUrl = res.userInfo.avatarUrl; //获取微信头像
					uni.$u.route({
						url: 'pages/binding/binding', //跳转到其他页面
					})
				},
				fail() {
					uni.$u.toast('您已拒绝CHUJUNJU课程平台的授权！'); //点击“授权”按钮时触发
					}
				})		
		    },

補足知識:

uni.getUserProfile(OBJECT)

ユーザー情報を取得します。各リクエストに対して認証ウィンドウがポップアップし、ユーザーが同意した後に userInfo が返されます。この API は現在、イベントでの非同期操作をサポートしていません (WeChat アプレットにのみ適用可能)

3.エフェクト表示：

#微信小计算# #uni-app# uni.getUserProfileを使用してWeChat認証ログインを実現する（ソースコード付き）

uni.getUserProfile(OBJECT)

おすすめ