微信小程序-云函数-读取用户名、头像并展示

引言：
最近准备毕业设计，想做一个微信小程序，奈何只会一点html,css,连js都不会中间踩坑无数，现在还在坑中，云函数的创建具体参考相关文档、教程

1 目录结构

对四个文件进行了修改

2 文件修改内容

2.1 云函数login

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()

// 云函数入口函数
exports.main = async (event, context) => {
     
  const wxContext = cloud.getWXContext()

  return {
     
    // 获取用户ID
    openid: wxContext.OPENID
  }
}

• 微信中，相关用户信息获取是有一定条件权限的，以下来自官网说明

2.2 my.wxml

<view wx:if="{
      {!openid}}">
<button class="into" open-type="getUserInfo" lang="zh_CN"
bindgetuserinfo="onGoUserInfo">登录button>
view>

<view  class="uploader-container" wx:if="{
      {openid}}"> 
  <image class="image" src="{
      {userinfo.avatarUrl}}">image>
  <view class="name">{
    {userinfo.nickName}}view>
view>

• 通过 用户id 判断显示情况

2.3 my.js

Page({
     

  /**
 * 页面的初始数据
   */
  data: {
     
    // 用户信息
    userinfo:{
     },
    // 用户ID
    openid:""
  },
  onGoUserInfo:function (e) {
     
    
    this.setData({
     
      // 返回事件中用户信息
      userinfo: e.detail.userInfo
    })
    console.log("userinfo", this.data.userinfo)

    // 云函数中 this 范围仅在云函数内 
    // 因此在外面赋值 常量 that 代入云函数
    const that = this
    // 使用云函数方法
    wx.cloud.callFunction({
     
      // 云函数名
      name:"login",
      // 云函数成功发出请求
      success:res=>{
     
        console.log("云函数调用成功")
        that.setData({
     
          // 返回云函数用户ID openid  res:自定义 代表云事件
          openid:res.result.openid,
          // 返回本地事件用户信息 userInfo e:自定义 代表本地事件
          userinfo:e.detail.userInfo
        })
        // 将openid 信息保存的 userinfo 内，这样后面保存到内存只需保存一个字典字段
        // data 是页面第一次渲染使用的初始数据。去掉会报错 暂时不是完全清楚概念
        that.data.userinfo.openid = that.data.openid
 
        console.log("openid",that.data.openid)
        console.log("userinfo",that.data.userinfo)
        // 将 userinfo 保存到内存，包含openid
        wx.setStorageSync('userinfo', that.data.userinfo)
      },
      // 云函数失败发出请求
      fail:res=>{
     
        console.log("云函数调用失败")
      }
    })
   
  },

  onLoad:function(options){
     
    // 获取缓存信息
    const ui = wx.getAccountInfoSync("userinfo")
    this.setData({
     
      userinfo:ui,
      openid:ui.openid
    })
  }
 
})

• 将用户信息保存到缓存中，后续可以通过变量名，全局调用

2.4 my.wxss 参考

/* pages/my/my.wxss */
.image{
     
  width:100px;
  height: 100px;
  margin: 0 auto;
  display: block;
  padding-top: 20px;
}

.name{
     
  text-align: center;
  padding-top: 10px;
}

button{
     
  background: #ea5149;
  width: 60%;
  margin-top: 100px;
  color: #ffffff;
}

3 效果截图

3.1点击登录

3.2 显示用户名、头像