1. Requisitos:
Realice el inicio de sesión con autorización de WeChat, haga clic en el botón y aparecerá un cuadro emergente para el inicio de sesión con autorización de WeChat en la parte inferior, haga clic para autorizar y saltar a otras páginas
2. Pasos e ideas:
(1) Composición tipográfica:
<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) Defina las variables del avatar y apodo de WeChat, asigne valores y complete la información del usuario en la interfaz
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) En los métodos, configure el evento de clic getUser()
<button class='Login_btn' @click="getUser()">确定登录</button>(4) Llame a api --- uni.getUserProfile para activar el cuadro emergente de WeChat y obtener información del usuario. Aparecerá una ventana de autorización para cada solicitud y se devolverá userInfo después de que el usuario esté de acuerdo;
Haga clic en "Permitir" o "Denegar" para realizar las operaciones correspondientes (información emergente o saltar a otras páginas)
//获取用户信息(授权)
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课程平台的授权！'); //点击“授权”按钮时触发
}
})
},
Conocimientos complementarios:
uni.getUserProfile(OBJETO)
Obtener información del usuario. Aparecerá una ventana de autorización para cada solicitud y se devolverá información de usuario después de que el usuario esté de acuerdo. Esta API actualmente no admite operaciones asincrónicas en eventos (solo aplicable a subprogramas WeChat).
3. Visualización de efectos:
