1.wxml部分
<view class="content">
<view class="login-m">
<view class="login-item">
<view class="logo">
<!-- #ifndef MP-TOUTIAO -->
<open-data type="userAvatarUrl"></open-data>
<!-- #endif -->
<!-- #ifdef MP-TOUTIAO -->
<!-- <image class="toutiao-logo" :src="logoImage"></image> -->
<!-- #endif -->
</view>
</view>
<view class="login-tip">
<view class="login-tip-big">
申请获取以下权限
</view>
<view class="login-tip-small">
获得你的公开信息 (昵称、头像等)
</view>
</view>
</view>
<view class="login-b flc">
<!-- #ifdef MP-WEIXIN -->
<button class="auth-btn refuse" bindtap="handleRefuse">拒绝</button>
<button class="auth-btn " open-type="getUserInfo" bindtap="getUserProfile" hover-class="btn-hover">允许</button>
<!-- #endif -->
<!-- #ifdef MP-ALIPAY -->
<!-- <button class="auth-btn " bindtap="getALICode" hover-class="btn-hover">授权登录</button> -->
<!-- #endif -->
<!-- #ifdef MP-TOUTIAO -->
<!-- <text class="auth-btn " bindtap="ttLogin()" hover-class="btn-hover">授权登录</text> -->
<!-- #endif -->
</view>
</view>
2.wxss
.content {
background-color: #fff;
height: 100vh;
padding: 100rpx 60rpx 0;
}
.login-item {
display: flex;
justify-content: center;
padding-bottom: 40rpx;
border-bottom: 1rpx solid #dddddd;
}
.logo {
display: block;
width: 180rpx;
height: 180rpx;
border-radius: 50%;
overflow: hidden;
border: 2px solid #fff;
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
}
.login-tip {
padding: 60rpx 0;
}
.login-tip-big {
font-size: 28rpx;
line-height: 80rpx;
}
.login-tip-small {
font-size: 12px;
color: #9e9e9e;
}
.app-name {
font-size: 28rpx;
color: #999;
}
.login-b {
display: flex;
}
.login-b .btn-g {
margin-top: 40rpx;
}
.auth-btn {
flex: 1;
display: block;
width: 100rpx;
height: 80rpx;
line-height: 80rpx;
text-align: center;
font-size: 12px;
color: #FFF;
background: #1aad19;
border-radius: 40rpx;
}
.refuse {
background: #999;
margin-right: 40rpx;
}
.toutiao-logo {
width: 100%;
height: 100%;
}
3. js部分
// pages/login/login.js
var e = require("../../common/promise.js"),
a = getApp()
Page({
/**
* 页面的初始数据
*/
data: {},
onLoad: function (options) {
},
wxGetUserProfile: function () {
return new Promise((resolve, reject) => {
wx.getUserProfile({
lang: 'zh_CN',
desc: '用户登录',
success: (res) => {
resolve(res)
console.log(res);
// res.encryptedData,
// res.iv
},
// 失败回调
fail: (err) => {
reject(err)
}
})
})
},
wxSilentLogin: function () {
return new Promise((resolve, reject) => {
wx.login({
success(res) {
resolve(res.code)
console.log(res.code);
},
fail(err) {
reject(err)
}
})
})
},
getUserProfile: function (e) {
let p1 = this.wxSilentLogin()
let p2 = this.wxGetUserProfile()
Promise.all([p1, p2]).then((res) => {
let code = res[0]
let iv = res[1].iv
let encryptedData = res[1].encryptedData
// 保存用户头像和昵称到本地
wx.setStorageSync('userName', res[1].userInfo.nickName)
wx.setStorageSync('avatar', res[1].userInfo.avatarUrl)
// wx.setStorageSync('userInfo', res[1].userInfo)
// 请求服务器
wx.request({
url: 'https://viencoding.com/api/v1/wx/login',
method: 'post',
data: {
code: code,
encrypted_data: encryptedData,
iv: iv
},
header: {
'content-type': 'application/json' // 默认值
},
success(res) {
// console.log(res.data)
wx.navigateBack({
delta: 1,
})
}
})
}).catch((err) => {
console.log(err)
wx.navigateTo({
url: '/pages/index/index',
})
})
},
// 拒绝
handleRefuse() {
wx.showToast({
title: '未授权',
icon: 'none',
duration: 1000,
})
setTimeout(() => {
wx.hideToast();
wx.switchTab({
url: '/pages/index/index',
})
}, 1000);
},
})
只需要把wx.request那部分中的url换成自己后端给的地址
4.效果图
判断本地是否存在token,没有就弹出登录界面
5.点击允许按钮后弹起微信的授权登录