01.小程序登陆:授权登陆

1.效果图

登陆页
2.流程
流程图
3.步骤
3.1：判断是否授权
关键词：onLaunch，wx.getSetting(Object object)，res.authSetting['scope.userInfo']
先假设情景是用户必须先登陆才能进入小程序，由于app.js的onLaunch是每次进入小程序都会执行的，所以先在 onLaunch 判断是否授权，调用 wx.getSetting(Object object) 用户的当前设置，根据是否授权作出处理。

/**
*文件：app.js
**/
onLaunch: function (options) {
    wx.getSetting({    //获取用户设置
      success: (res) => {     //获取成功
        if (res.authSetting['scope.userInfo']) {    //如果授过权
           //执行登陆
       } else {
          wx.redirectTo({     //关闭所有页面，跳到登陆授权页面
            url: '/pages/login/login'
          })
        }
      }
    })
  }

3.2：点击按钮主动授权
关键词：open-type="getUserInfo"，bind:getuserinfo="getUserInfo"，wx.login(Object object),iv,code,encryptedData
假设当前用户没有授过权，小程序跳转到验证页面，我们需要设置 button（组件）中的open-type="getUserInfo"（微信开放能力）来拉起授权窗口，再通过bind:getuserinfo(事件)获取用户信息，执行登陆操作。
但是有些低版本微信是不支持这种方式的，所以要设置友好提示

/**
*文件：login.js
**/
data: {
    canIUse: wx.canIUse('button.open-type.getUserInfo'),   //是否支持该开放能力
    show: false    //是否显示遮罩
  }

<!-- 文件:login.wxml-->
<!-- 遮罩组件-->
<loading-cmp show="{{show}}" msg="正在登陆" />
<!-- 小熊猫图片-->
<image class="bg-img" mode="widthFix" src="/images/bg-img.jpg"></image>
<!-- 如果微信版本支持开发能力 -->
<button wx:if="{{canIUse}}" open-type="getUserInfo" lang="zh_CN" bind:getuserinfo="getUserInfo">
  微信登陆
</button>
<!-- 不支持显示友好提示 -->
<view wx:else>你的微信版本太旧，请更新后再尝试</view>

点击按钮后，拉起授权窗口

点击按钮拉起授权窗口

允许和取消都会走到 bind:getuserinfo 事件，通过是否获得用户信息进行相关操作

/**
*文件：login.js
**/
  getUserInfo: function(event) {
    if (event.detail.userInfo) {    //如果得到用户信息
      this.setData({    //显示loading遮罩
        show: true
      })
      this.login(event.detail)   //后续登陆操作
    } else {
      this.setData({    //隐藏loading遮罩
        show: false
      })
      wx.showModal({    //友好提示弹窗
        title: '登陆失败',
        showCancel: false,    //不显示取消按键
        confirmText: '确定',
        content: '(╯°Д°)╯︵ ┻━┻，登陆失败,请授权！'
      })
    }
  }

如果用户同意授权，则调用login登陆方法,通过wx.login(Object object)获取登录凭证（code），而iv和encryptedData则通过传送过来的数据中获取，将这三个参数传送到服务端进行登陆操作

login: function (user) {
    wx.login({    //获取登录凭证（code）
      success: (res) => {    //获取成功
        //得到三个数据，服务端进行解析
        console.log('iv已经获取：' + user.iv)
        console.log('code已经获取：' + res.code)
        console.log('encryptedData已经获取：' + user.encryptedData)
      },
      fail: (res) => {    //失败提示
        wx.showModal({
          title: '系统出错',
          showCancel: false,
          confirmText: '确定',
          content: '(╯°Д°)╯︵ ┻━┻，小程序出现错误！'
        })
      }
    })
  }

本文中的遮罩是自定义组件，就不写步骤了，下面会贴上全部代码
4.源码
4.1文件：/app.js

App({
  onLaunch: function(options) {
    wx.getSetting({ //获取用户设置
      success: (res) => { //获取成功
        if (res.authSetting['scope.userInfo']) { //如果授过权
          this.login() //执行登陆
        } else {
          wx.redirectTo({ //关闭所有页面，跳到登陆授权页面
            url: '/pages/login/login'
          })
        }
      }
    })
  }
})

4.2文件：/pages/login/login.wxml

<!-- 遮罩组件-->
<loading-cmp show="{{show}}" msg="正在登陆" />
<!-- 小熊猫图片-->
<image class="bg-img" mode="widthFix" src="/images/bg-img.jpg"></image>
<!-- 如果微信版本支持开发能力 -->
<button wx:if="{{canIUse}}" open-type="getUserInfo" lang="zh_CN" bind:getuserinfo="getUserInfo">
  微信登陆
</button>
<!-- 不支持显示友好提示 -->
<view wx:else>你的微信版本太旧，请更新后再尝试</view>

4.3文件：/pages/login/login.wxss

page {
  background: #f3f1dc;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.bg-img {
  width: 300rpx;
}
button {
  width: 300rpx;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 32rpx;
  margin-top: 150rpx;
  background-color: transparent;
}

4.4文件：/pages/login/login.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    canIUse: wx.canIUse('button.open-type.getUserInfo'),   //是否支持该开放能力
    show: false    //是否显示遮罩
  },

  getUserInfo: function(event) {
    if (event.detail.userInfo) { //如果得到用户信息
      this.setData({ //显示loading遮罩
        show: true
      })
      this.login(event.detail) //后续登陆操作
    } else {
      this.setData({ //隐藏loading遮罩
        show: false
      })
      wx.showModal({ //友好提示弹窗
        title: '登陆失败',
        showCancel: false, //不显示取消按键
        confirmText: '确定',
        content: '(╯°Д°)╯︵ ┻━┻，登陆失败,请授权！'
      })
    }
  },

  login: function(user) {
    wx.login({ //获取登录凭证（code）
      success: (res) => { //获取成功
        //得到三个数据，服务端进行解析
        console.log('iv已经获取：' + user.iv)
        console.log('code已经获取：' + res.code)
        console.log('encryptedData已经获取：' + user.encryptedData)
      },
      fail: (res) => { //失败提示
        wx.showModal({
          title: '系统出错',
          showCancel: false,
          confirmText: '确定',
          content: '(╯°Д°)╯︵ ┻━┻，小程序出现错误！'
        })
      }
    })
  }

})

4.5文件：/pages/login/login.json

{
  "navigationStyle": "custom",
  "usingComponents": {
    "loading-cmp": "/components/loading/index"
  }
}

4.6文件：/components/loading/index.wxml

<view class="window" wx:if="{{show}}">
  <image class="loading-img" mode="widthFix" src="images/loading.svg"></image>
  <text>{{msg}}</text>
</view>

4.7文件：/components/loading/index.wxss

.window {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.loading-img {
  width: 100rpx;
}

text {
  color: #fff;
  font-size: 28rpx;
  margin-top: 30rpx;
}

4.8文件：/components/loading/index.js

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    show: Boolean,
    msg: String
  }
})

4.9文件：/components/loading/index.json

{
  "component": true
}

4.10素材
loadin动画是svg格式无法上传

bg-img.jpg