详解使用详解使用uni-app开发微信小程序之登录模块开发微信小程序之登录模块
从微信小程序官方发布的公告中我们可获知：小程序体验版、开发版调用 wx.getUserInfo 接口，将无法弹出授权询问框，默
认调用失败，需使用 <button open-type=”getUserInfo”></button> 引导用户主动进行授权操作：
1.当用户未授权过，调用该接口将直接报错
2.当用户授权过，可以使用该接口获取用户信息
但在实际开发中我们可能需要弹出授权询问框，因此需要我们自己来写模拟授权弹框（主要是对<buttonopen-
type=”getUserInfo”></button>的包裹+用户是否是第一次授权判断来显示该页面），代码如下：
1.页面结构
<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.样式
<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;
资源评论
