1. Requirements:
Realize WeChat authorization login, click the button, and a pop-up box for WeChat authorization login will appear at the bottom, click to authorize and jump to other pages
2. Steps and ideas:
(1) Typesetting:
<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) Define the variables of WeChat avatar and nickname, assign values, and fill in the user information in the interface
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) In methods, set the click event getUser()
<button class='Login_btn' @click="getUser()">确定登录</button>(4) Call api --- uni.getUserProfile to wake up the WeChat pop-up box and obtain user information. An authorization window will pop up for each request, and userInfo will be returned after the user agrees;
Click "Allow" or "Deny" to perform corresponding operations (pop-up prompt information, or jump to other pages)
//获取用户信息(授权)
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课程平台的授权！'); //点击“授权”按钮时触发
}
})
},
Supplementary knowledge:
uni.getUserProfile(OBJECT)
Get user information. An authorization window will pop up for each request, and userInfo will be returned after the user agrees. This API does not currently support asynchronous operations in events (only applicable to WeChat applets)
3. Effect display:
