微信小程序选项卡功能开发步骤与方法全解析
366
2023-11-13
详解使用uni-app开发微信小程序之登录模块
从微信小程序官方发布的公告中我们可获知：小程序体验版、开发版调用 wx.getUserInfo 接口，将无法弹出授权询问框，默认调用失败，需使用 <button open-type="getUserInfo"></button> 引导用户主动进行授权操作：
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小时内删除侵权内容。
相关文章
发表评论
最近发表
推荐文章
热评文章
暂时没有评论，来抢沙发吧~