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

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

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

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

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

1.页面结构

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

2.样式

  .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;
  }

3.脚本部分

4.最终效果如下：

wx_login.png图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。