mpvue框架 云开发微信小程 获取用户信息

动手之前先看下官方文档

• 微信云开发文档

---

添加云函数配置

• 第1步：开通微信的云开发

  

  创建一个环境

  

  复制一下这里的环境ID我们稍后会使用。

• 第2步： 在  src/main.js 内初始化云服务

if (mpvuePlatform === 'wx') {
	wx.cloud.init({
	  env: '环境ID',
	  traceUser: true
	})
}

• 第2步： 在  app.json 内添加一行配置

{
  "cloud": true
}

• 第3步：添加云函数的本地根目录文件夹static/functions/, 并且在  project.config.json 内添加一行配置。

{
  "cloudfunctionRoot": "static/functions/"
}

提示：可以在文件夹内写一个小文件，这样打包好的内容才会有functions文件夹.

重新dev 或者 build一下，在微信开发者工具内看到这个文件夹，并且如下图一样有一个☁️标志在文件夹上就说明配置成功啦。

---

添加获取用户信息的云函数

增加一个云函数，我这里就取名为getOpenId

// 获取openId
exports.main = async (event, context) => {
  return event.userInfo
}

上传部署

小程序页面上调用

    wx.cloud.callFunction({
      name: 'getOpenId'
    }).then(res => { console.log('callFunction test result: ', res) })

这里我忍不住omg！！一行代码获取openId，如此简单，不用触发按钮，也不用中台给我解密bla bla bla

接下来，就是我们传统的获取用户信息，我习惯吧用户信息存在本地的StorageSync内，这样就拿到最最基本的微信用户信息啦（昵称/头像/地区/openId 全都有～）

<template>
  <div>
    <button open-type="getUserInfo" @getuserinfo="bindGetUserInfo">获取用户信息</button>
  </div>
</template>
<script>
export default {
  methods: {
    bindGetUserInfo (e) {
      wx.cloud.callFunction({
        name: 'getOpenId'
      }).then(res => {
        e.target.userInfo.openId = res.result.openId
        wx.setStorageSync("wxInfo", e.target.userInfo);
      })
    }
  }
}
</script>

这样请求之后，再到云开发控制台运营分析 - 用户访问，就可以看到访问的用户了。

要是觉的这篇文章还不错的话，记的给我点赞⭐️遇到什么问题，或者有什么建议也可以在评论里告诉我。