我目前制作了一款微信小程序计时器，现将自己的一些开发心得进行分享。
首先是用户登陆过程的设计，为了更好的保护用户的隐私，微信官方对原本的获取用户信息的接口进行了调整，让我们不得不对用户登录的过程进行一定的更改。

引言：微信小程序对wx：getUserInfo接口进行了更新，内容如下：

官方获取用户信息文档调整

为优化用户体验，使用 wx.getUserInfo 接口直接弹出授权框的开发方式将逐步不再支持。从2018年4月30日开始，小程序与小游戏的体验版、开发版调用 wx.getUserInfo 接口，将无法弹出授权询问框，默认调用失败。正式版暂不受影响。

文档中说明了有两种方式能够获取用户信息：

1. 利用button 组件将 open-type 指定为 getUserInfo 类型

2. 利用 <open-data>获取公开的用户信息

为了界面的美观和实用性，我在实际设计用户登录时对这两种方法都进行了应用，首先利用<open-data>获取登录用户的公开信息，包括用户的昵称和头像，再在下方添加一个open-type为'getUsrInfo'的button组件，来进一步的获取用户的授权。当然，假如该用户已经授予过权限，界面则会自动跳转到小程序的首页。

界面设计

界面效果

初始界面 点击授权登陆 点击拒绝

现进行分步讲解

1. 添加一个open-type为'getUsrInfo'的button组件

//js

const app = getApp() //在Page外声明

//button组件的bindgetuserinfo绑定的函数
bindGetUserInfo: function(e) {
    if (e.detail.userInfo) {
      //用户按了允许授权按钮
      var that = this;

      that.login(); //声明的函数 

// 查询数据库是否存在当前用户，避免同一用户被添加两次
      const db = wx.cloud.database()
      db.collection('user').where({
        _openid: app.globalData.openid
      }).get({
        success: res => {
          if (res.data.length == 0) { //若数据库无该用户的信息则添加到数据库
            const db = wx.cloud.database()
            db.collection('user').add({ 
              data: {
                openid: app.globalData.openid,
                nickName: e.detail.userInfo.nickName,
                avatarUrl: e.detail.userInfo.avatarUrl,
                province: e.detail.userInfo.province,
                city: e.detail.userInfo.city
              },
              header: {
                'content-type': 'application/json'
              },
              success: function(res) {
                console.log("插入小程序登录用户信息成功！");
              }
            })
          }
        },
      })

      //授权成功后，跳转进入小程序首页
      wx.switchTab({
        url: '/pages/index/index'
      })
    } else {
      //用户按了拒绝按钮
      wx.showModal({
        title: '警告',
        content: '您点击了拒绝授权，将无法进入小程序，请授权之后再进入!!!',
        showCancel: false,
        confirmText: '返回授权',
        success: function(res) {
          if (res.confirm) {
            console.log('用户点击了“返回授权”')
          }
        }
      })
    }
  }

//调用名为‘login’的云函数获取用户接口，这个如果选用小程序云开发，初始会给login云函数
 login() { 
    let that = this;
    wx.cloud.callFunction({
      name: 'login',
      complete: res => {
        console.log('云函数获取到的openid: ', res.result.openid)
        app.globalData.openId = res.result.openid; //给全局变量openId和userInfo赋值
        app.globalData.userInfo = res.result.event.userInfo;
      }
    })
  },

//wxml
<button class='bottom' type='primary' open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="bindGetUserInfo">
      授权登录
</button>

//wxss
.bottom {
    border-radius: 90rpx;
    font-size: 35rpx;
    margin-top: 72rpx;
    width: 45%;
}

2. 利用<open-data>获取登录用户的公开信息

//wxml
<open-data class="open-data-userAvatarUrl" type="userAvatarUrl"></open-data> //用户头像
<open-data class="open-data-userNickName line1" type="userNickName"></open-data> //用户昵称
//wxss
.open-data-userAvatarUrl {  //为了美观，这里让用户头像以圆形呈现
  width: 160rpx;
  height: 160rpx;
  display: block;
  overflow: hidden;
  border-radius: 50%;
  margin: 45rpx auto;
}
.open-data-userNickName{
  display:block;
  font-size: 30rpx;
  margin-bottom:60rpx; 
}

3. 这里把登录云函数login给出

//js
// 云函数模板
// 部署：在 cloud-functions/login 文件夹右击选择 “上传并部署”

const cloud = require('wx-server-sdk')

// 初始化 cloud
cloud.init()

/**
 * 这个示例将经自动鉴权过的小程序用户 openid 返回给小程序端
 * 
 * event 参数包含小程序端调用传入的 data
 * 
 */
exports.main = (event, context) => {
  console.log(event)
  console.log(context)

  // 可执行其他自定义逻辑
  // console.log 的内容可以在云开发云函数调用日志查看

  // 获取 WX Context (微信调用上下文)，包括 OPENID、APPID、及 UNIONID（需满足 UNIONID 获取条件）
  const wxContext = cloud.getWXContext()

  return {
    event,
    openid: wxContext.OPENID,
    appid: wxContext.APPID,
    unionid: wxContext.UNIONID,
  }
}

//json
{
  "name": "login",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "wx-server-sdk": "latest"
  }
}

除此之外，还需要在onLoad里判断用户是否已经被授过权，若用户已授权则需要直接跳转到小程序首页。

**4. 在onLoad中进行判断

//需要在onLoad函数里判断用户是否被授权
onLoad: function(options) {
    var that = this;
    // 查看是否授权
    wx.getSetting({
      success: function(res) {
        if (res.authSetting['scope.userInfo']) {
          //用户已经授权过则跳转到小程序首页，注意这里登陆界面会出现一闪而过的现象
          wx.switchTab({
            url: '/pages/index/index'
          })
        }
      }
    })
  },

5. 最后展示用户登录设计wxml和wxss的全部代码

还需要在js中添加一个data变量

data: {
    //判断小程序的API，回调，参数，组件等是否在当前版本可用。
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },

wxml

<!--pages/userLogin/userLogin.wxml-->

  <view wx:if="{{canIUse}}" class='container'>
    <view class='header'>
      <text>微信授权</text>
    </view>
    <open-data class="open-data-userAvatarUrl" type="userAvatarUrl"></open-data>
    <open-data class="open-data-userNickName line1" type="userNickName"></open-data>
    <view class='content'>
      <view>申请获取以下权限</view>
      <text>获得你的公开信息(昵称，头像等)</text>
    </view>

    <button class='bottom' type='primary' open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="bindGetUserInfo">
      授权登录
    </button>
  </view>

  <view wx:else class='container'>请升级微信版本</view>

wxss

/* pages/userLogin/userLogin.wxss */

.header {
    margin-top: 120rpx;
    margin-bottom: 90rpx;
    text-align: center;
    font-size: 60rpx;
}

.content {
    margin-left: 50rpx;
}

.content text {
    display: block;
    color: #9d9d9d;
    margin-top: 15rpx;
}

.bottom {
    border-radius: 90rpx;
    font-size: 35rpx;
    margin-top: 72rpx;
    width: 45%;
}

.open-data-userAvatarUrl {
  width: 160rpx;
  height: 160rpx;
  display: block;
  overflow: hidden;
  border-radius: 50%;
  margin: 45rpx auto;
}
.open-data-userNickName{
  display:block;
  font-size: 30rpx;
  margin-bottom:60rpx; 
}

总结

以上就是我对用户登录过程的设计，如果有什么问题，欢迎留言指出。