uniapp 微信小程序登录
2022年 uniapp 微信小程序登录方法
·
先配置uniapp的小程序应用ID跟密钥
然后看代码,登录页面:
<template>
<!-- login view html start -->
<view>
<view>
<view class="header">
<!-- <image src="/static/img/public/login-wx.png"></image> -->
</view>
<view class="content">
<view>申请获取以下权限</view>
<text>获得你的公开信息(昵称,头像、地区等)</text>
</view>
<button class="bottom" type="primary" withCredentials="true" @tap="getUserProfile">授权登录</button>
<!-- 注意,这里要用@tap -->
</view>
</view>
<!-- login view html end -->
</template>
<script>
export default {
data() {
return {
};
},
methods: {
getUserProfile() {
uni.getUserProfile({
desc: '登录',
success: (info) => {
console.log(info)
//这里取到的是用户的信息,自己安排自己的业务
uni.login({
provider: 'weixin',
success: (res) => {
console.log(res)
//这里获取的是用户的code,用来换取 openid、unionid、session_key 等信息,再将信息丢给后台自己的登录业务就行了
}
})
},
fail: (err) => {
console.log(err);
}
})
}
},
onLoad(options) {
//默认加载
// this.getUserProfile();
}
};
</script>
<style>
.header {
margin: 90rpx 0 90rpx 50rpx;
border-bottom: 1px solid #ccc;
text-align: center;
width: 650rpx;
height: 300rpx;
line-height: 450rpx;
}
.header image {
width: 200rpx;
height: 200rpx;
}
.content {
margin-left: 50rpx;
margin-bottom: 90rpx;
}
.content text {
display: block;
color: #9d9d9d;
margin-top: 40rpx;
}
.bottom {
border-radius: 80rpx;
margin: 70rpx 50rpx;
font-size: 35rpx;
}
</style>
方法:
更多推荐
已为社区贡献1条内容
所有评论(0)