微信小程序云开发获取用户信息

第一步:新建云函数login函数

水印
云开发
微信小程序云开发获取用户信息_第1张图片
新建login云函数

第二步:在页面中添加点击

按钮,获取用户信息

<!-- 用户 openid -->
  <view class="userinfo">
    <button 
      open-type="getUserInfo" 
      bindgetuserinfo="onGetUserInfo"
      class="userinfo-avatar"
      style="background-image: url({{avatarUrl}})"
      size="default"
    ></button>
    <view class="userinfo-nickname-wrapper">
      <button class="userinfo-nickname" bindtap="onGetOpenid">点击获取 openid</button>
    </view>
  </view>

第三步:js文件中添加函数

在当前的.js下声明,添加

const app = getApp()

// pages/userConsole/userConsole.js
const app = getApp()
Page({

  data: {
    openid: ''
  },

  onLoad: function (options) {
    this.setData({
      openid: getApp().globalData.openid
    })
    console.log(this.data.openid)
  },
  
  onGetUserInfo: function(e) {
    if (!this.data.logged && e.detail.userInfo) {
      this.setData({
        logged: true,
        avatarUrl: e.detail.userInfo.avatarUrl,
        userInfo: e.detail.userInfo
      })
    }
  },

  onGetOpenid: function() {
    // 调用云函数
    wx.cloud.callFunction({
      name: 'login',
      data: {},
      success: res => {
        console.log('[云函数] [login] user openid: ', res.result.userInfo.openId)
        app.globalData.openid = res.result.openid
        // wx.navigateTo({
          // url: '../userConsole/userConsole',
        // })
      },
      fail: err => {
        console.error('[云函数] [login] 调用失败', err)
        wx.navigateTo({
          url: '../deployFunctions/deployFunctions',
        })
      }
    })
  }
})

你可能感兴趣的:(小程序,小程序,js,vue)