小程序云开发（一）使用微信小程序的云开发能力，通过调用云函数获取当前用户的OpenID

<!--pages/index/index.wxml-->
<view class=\'box\'>
  <view class=\'title\'>获取OpenID</view>
    <block wx:if="{{!hasUserInfo}}"><!--条件渲染的结构块，block组件，没有获取用户的信息，会显示一个button组件或者是一个test组件-->
        <button wx:if="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button><!--canIUse为true显示button组件，false显示test组件，canIUse变量的意思当前的小程序是否支持使用open-type为getUserInfo属性值的按钮组件，当前小程序版本支持的话，就会显示button组件-->
        <text wx:else> 请升级微信版本，使用1.3.0或以上的基础库以支持open-type按钮获取用户公开信息！ </text>
    </block>
  <view wx:else class=\'userinfo\'>
      <image bindtap=\'getDetail\' class=\'userinfo-avatar\' src=\'{{userInfo.avatarUrl}}\' mode=\'cover\'></image><!--绑定了用户头像image组件，它的单击事件函数是getDetail-->
      <text class=\'userinfo-nickname\'>{{userInfo.nickName}}</text>
  </view>
  <view class=\'user-openid\'>
    <text>{{openID}}</text>
  </view>
  <view class=\'user-detail\' wx:if=\'{{hasUserInfo}}\'>
    <text>{{detail}}</text>
  </view>
</view>

/* pages/index/index.wxss */
page{
  font-size: 14px;
}
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
}

.user-openid {
  margin: 60rpx 30rpx;
  color:blue;
}

.user-detail{
  margin: 60rpx 30rpx;
  text-align: left;
  color: black
}

// pages/index/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    userInfo: {}, // 用户公开信息
    hasUserInfo: false, // 是否获取了用户公开信息
    canIUse: wx.canIUse(\'button.open-type.getUserInfo\'), // 是否支持使用getUserInfo按钮
    openID: \'\', // 用户身份ID信息
    detail: \'点击头像显示你的详细信息\', // 用户详细信息
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
        wx.getSetting({ // 调用接口获取用户的当前设置
            success: res => { // 调用成功时的回调函数
        if (res.authSetting[\'scope.userInfo\']) {
          // 如果已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
          wx.getUserInfo({ // 调用接口获取用户公开信息
                        success: res => { // 调用成功时的回调函数
              this.setData({ // 设置页面绑定数据
                userInfo: res.userInfo,
                hasUserInfo: true
              })
            }
          })
                }
      }
    })
    this.getOpenID() // 调用getOpenID函数
  },
  getUserInfo: function (e) { // 定义getUserInfo按钮的单击事件函数
    console.log(e)
        if (e.detail.userInfo){ // 如果返回参数中包含userInfo数据，则已经获取了用户公开信息
            this.setData({ // 设置页面绑定数据
                userInfo: e.detail.userInfo,
                hasUserInfo: true
            })
        }else{ // 否则就显示模态对话框，提示授权失败信息
            wx.showModal({
                title: e.detail.errMsg,
                content: \'小程序需要用户授权获取公开信息才可以继续。\',
            })
        }
  },

  // 定义获取用户OpenID的函数
  getOpenID: function() {
    var that = this;
    wx.showLoading({ // 显示加载提示框
      title: \'获取openID。。。\',
    })
    wx.cloud.callFunction({ // 调用云函数
      name: \'login\', // 函数名称
      data: {}, // 函数参数
      complete: res => { // 调用完成时的回调函数
        wx.hideLoading() // 隐藏加载提示框
      },
      success: res => { // 调用成功时的回调函数
        console.log(\'[云函数] [login] user openid: \', res.result.openid)
        that.setData({ // 设置页面绑定数据
          openID: \'[云函数]获取openID成功：\' + res.result.openid,
        })
      },
      fail: err => { // 调用失败时的回调函数
        console.error(\'[云函数] [login] 调用失败\', err)
        that.setData({ // 设置页面绑定数据
          openID: \'[云函数]获取openID失败\' + err
        })
      }
    })
  },
  // 定义获取用户详细信息的函数
  getDetail: function() {
    var userInf = this.data.userInfo;
    var gender = (userInf.gender == 1) ? "男" : (userInf.gender == 2) ? "女" : "未知";
    var detailStr = "性别：" + gender;
    detailStr = detailStr + "\n国家：" + userInf.country;
    detailStr = detailStr + "\n省份：" + userInf.province;
    detailStr = detailStr + "\n城市：" + userInf.city;
    this.setData({ // 设置页面绑定数据
      detail: detailStr
    })
  }
})