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>
复制代码

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

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