详解使用uni-app开发微信小程序之登录模块

网友投稿 544 2023-11-13

从微信小程序官方发布的公告中我们可获知：小程序体验版、开发版调用 wx.getUserInfo 接口，将无法弹出授权询问框，默认调用失败，需使用 <button open-type="getUserInfo"></button> 引导用户主动进行授权操作：

详解使用uni-app开发微信小程序之登录模块

1.当用户未授权过，调用该接口将直接报错

2.当用户授权过，可以使用该接口获取用户信息

但在实际开发中我们可能需要弹出授权询问框，因此需要我们自己来写模拟授权弹框（主要是对<buttonopen-type="getUserInfo"></button>的包裹+用户是否是第一次授权判断来显示该页面），代码如下：

1.页面结构

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<template>
<view>
<!-- #ifdef MP-WEIXIN -->
<view v-if="isCanUse">
<view>
<view class=header>
<image src=../../static/img/wx_login.png></image>
</view>
<view class=content>
<view>申请获取以下权限</view>
<text>获得你的公开信息(昵称，头像、地区等)</text>
</view>
<button class=bottom type=primary open-type="getUserInfo" withCredentials="true" lang="zh_CN" @getuserinfo="wxGetUserInfo">
授权登录
</button>
</view>
</view>
<!-- #endif -->
</view>
</template>

这里的isCanUse是用来记录当前用户是否是第一次授权使用的，wx_login.png图在底部-获取即可。

2.样式

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<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>

3.脚本部分

4.最终效果如下：

wx_login.png图：

您可能感兴趣的文章:uni-app微信小程序登录授权的实现uni-app 微信小程序授权登录的实现步骤如何基于uni-app实现微信小程序一键登录与退出登录功能微信小程序使用uni-app一键获取用户信息

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：app开发 程序 微信小程序 小程序
上一篇:新零售APP:O2O新零售商业模式有哪些？
下一篇:农村电商平台：农村电商模式有哪几种？
相关文章

 发表评论

暂时没有评论，来抢沙发吧~