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

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

主要介绍了详解使用uni-app开发微信小程序之登录模块，小编觉得挺不错的，现在分享给大家，也给大家做个

参考。一起跟随小编过来看看吧

从微信小程序官方发布的公告中我们可获知：小程序体验版、开发版调用 wx.getUserInfo 接口，将无法弹出授权询问框，默

认调用失败，需使用 <button open-type="getUserInfo"></button> 引导用户主动进行授权操作：

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

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

但在实际开发中我们可能需要弹出授权询问框，因此需要我们自己来写模拟授权弹框（主要是对<buttonopen-

<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">

授权登录

这里的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;

margin-left: 50rpx;

margin-bottom: 90rpx;

}

.content text {

display: block;

color: #9d9d9d;

margin-top: 40rpx;

}

.bottom {

border-radius: 80rpx;