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>
複製代碼

這樣請求以後，再到雲開發控制檯運營分析 - 用戶訪問，就能夠看到訪問的用戶了。

要是覺的這篇文章還不錯的話，記的給我點贊⭐️遇到什麼問題，或者有什麼建議也能夠在評論裏告訴我。