微信小程序云开发获取openid

前言

开发者可以使用云开发开发微信小程序、小游戏，无需搭建服务器，即可使用云端能力。

云开发为开发者提供完整的原生云端支持和微信服务支持，弱化后端和运维概念，无需搭建服务器，使用平台提供的 API 进行核心业务开发，即可实现快速上线和迭代，同时这一能力，同开发者已经使用的云服务相互兼容，并不互斥。

云开发提供了几大基础能力支持：

能力	作用 &说明
云函数	无需自建服务器 在云端运行的代码，微信私有协议天然鉴权，开发者只需编写自身业务逻辑代码
数据库	无需自建数据库 一个既可在小程序前端操作，也能在云函数中读写的 JSON 数据库
存储	无需自建存储和 CDN 在小程序前端直接上传/下载云端文件，在云开发控制台可视化管理
云调用	原生微信服务集成 基于云函数免鉴权使用小程序开放接口的能力，包括服务端调用、获取开放数据等能力

实现效果图

如果想观察具体效果，你可以微信搜索陌然 Tool或者保存小程序二维码去微信扫一扫，本小程序提供了丰富的案例可供零基础开发者学习借鉴。

代码

详细的内容在代码中有注释，希望对你有所帮助

// pages/cloud/GetOpenID/index.js
const app = getApp()
Page({


  data: {
    userInfo: null,
    openID: '',
    detail: '点击头像显示你的详细信息',
    showDetail: false
  },


  onLoad: function(options) {
    this.setData({
      userInfo: app.globalData.userInfo // 从App全局变量获得用户信息
    })
    this.GetOpenID()
  },
  // 定义获取用户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,
          showDetail: true
        })
        wx.setStorageSync("openID", res.result.openid) // 同步存储用户的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
    })
  },
  onShareAppMessage: function() {

  }
})

<!--pages/cloud/GetOpenID/index.wxml-->
<view class='box'>
  <view class='title'>获取OpenID</view>
  <view class='userinfo'>
      <image bindtap='GetDetail' class='userinfo-avatar' src='{{userInfo.avatarUrl}}' mode='cover'></image>
      <text class='userinfo-nickname'>{{userInfo.nickName}}</text>
  </view>
  <view class='user-openid'>
    <text>{{openID}}</text>
  </view>
  <view class='user-detail' wx:if='{{showDetail}}'>  
    <text>{{detail}}</text>
  </view>
</view>

/* pages/cloud/GetOpenID/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:#0066ff;
}

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