知識點：
小程序的雲開發功能
雲開發功能是為小程序開發者提供的完整的原生雲端支持和微信服務支持，使得開發者無需自己搭建服務器即可使用雲端能力，使用平台提供的API即可進行核心業務開發。
雲開發提供的幾大基礎能力
小程序支持了雲開發之后，就可以自動的獲取雲端的存儲區，雲端的數據庫，以及運行雲端代碼的能力
在雲開發能力的支持下，雲端運行的代碼 （雲函數）使用微信私有協議天然鑒權，開發者只需 編寫自身業務邏輯代碼即可。
獲取OpenID的步驟
定義雲函數login
獲取微信調用上下文（包括 OPENID、APPID、 及 UNIONID）並返回這些信息。
部署雲函數login
調用雲函數login
實例：
app.json
{ "pages": [ "pages/index/index" ], "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "雲開發", "navigationBarTextStyle": "black" }, "sitemapLocation": "sitemap.json" }
//app.js App({ onLaunch: function () { if (!wx.cloud) { console.error('請使用 2.2.3 或以上的基礎庫以使用雲能力') } else { wx.cloud.init({ // 此處請填入環境 ID, 環境 ID 可打開雲控制台查看 env: '你的雲環境ID', traceUser: true, }) } this.globalData = {} } })
小程序開發中使用雲開發功能，需要在app.js文件中 啟動函數onLaunch中先檢查雲環境是否可用，可以使用雲開發功能的話需要初始化雲環境，init接口中需要指明雲開發環境的id，如果只有一個雲開發環境的話，就不需要特意指明了
<!--pages/index/index.wxml--> <view class='box'> <view class='title'>獲取OpenID</view> <block wx:if="{{!hasUserInfo}}"><!--條件渲染的結構塊，block組件，沒有獲取用戶的信息，會顯示一個button組件或者是一個test組件--> <button wx:if="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 獲取頭像昵稱 </button><!--canIUse為true顯示button組件，false顯示test組件，canIUse變量的意思當前的小程序是否支持使用open-type為getUserInfo屬性值的按鈕組件，當前小程序版本支持的話，就會顯示button組件--> <text wx:else> 請升級微信版本，使用1.3.0或以上的基礎庫以支持open-type按鈕獲取用戶公開信息！ </text> </block> <view wx:else class='userinfo'> <image bindtap='getDetail' class='userinfo-avatar' src='{{userInfo.avatarUrl}}' mode='cover'></image><!--綁定了用戶頭像image組件，它的單擊事件函數是getDetail--> <text class='userinfo-nickname'>{{userInfo.nickName}}</text> </view> <view class='user-openid'> <text>{{openID}}</text> </view> <view class='user-detail' wx:if='{{hasUserInfo}}'> <text>{{detail}}</text> </view> </view>
/* pages/index/index.wxss */ page{ font-size: 14px; } .userinfo { display: flex; flex-direction: column; align-items: center; } .userinfo-avatar { width: 128rpx; height: 128rpx; margin: 20rpx; border-radius: 50%; } .userinfo-nickname { color: #aaa; } .user-openid { margin: 60rpx 30rpx; color:blue; } .user-detail{ margin: 60rpx 30rpx; text-align: left; color: black }
hasUserInfo變量 是否獲得了用戶的公開信息
// pages/index/index.js Page({ /** * 頁面的初始數據 */ data: { userInfo: {}, // 用戶公開信息 hasUserInfo: false, // 是否獲取了用戶公開信息 canIUse: wx.canIUse('button.open-type.getUserInfo'), // 是否支持使用getUserInfo按鈕 openID: '', // 用戶身份ID信息 detail: '點擊頭像顯示你的詳細信息', // 用戶詳細信息 }, /** * 生命周期函數--監聽頁面加載 */ onLoad: function(options) { wx.getSetting({ // 調用接口獲取用戶的當前設置 success: res => { // 調用成功時的回調函數 if (res.authSetting['scope.userInfo']) { // 如果已經授權，可以直接調用 getUserInfo 獲取頭像昵稱，不會彈框 wx.getUserInfo({ // 調用接口獲取用戶公開信息 success: res => { // 調用成功時的回調函數 this.setData({ // 設置頁面綁定數據 userInfo: res.userInfo, hasUserInfo: true }) } }) } } }) this.getOpenID() // 調用getOpenID函數 }, getUserInfo: function (e) { // 定義getUserInfo按鈕的單擊事件函數 console.log(e) if (e.detail.userInfo){ // 如果返回參數中包含userInfo數據，則已經獲取了用戶公開信息 this.setData({ // 設置頁面綁定數據 userInfo: e.detail.userInfo, hasUserInfo: true }) }else{ // 否則就顯示模態對話框，提示授權失敗信息 wx.showModal({ title: e.detail.errMsg, content: '小程序需要用戶授權獲取公開信息才可以繼續。', }) } }, // 定義獲取用戶OpenID的函數 getOpenID: function() { var that = this; wx.showLoading({ // 顯示加載提示框 title: '獲取openID。。。', }) wx.cloud.callFunction({ // 調用雲函數 name: 'login', // 函數名稱 data: {}, // 函數參數 complete: res => { // 調用完成時的回調函數 wx.hideLoading() // 隱藏加載提示框 }, success: res => { // 調用成功時的回調函數 console.log('[雲函數] [login] user openid: ', res.result.openid) that.setData({ // 設置頁面綁定數據 openID: '[雲函數]獲取openID成功：' + res.result.openid, }) }, fail: err => { // 調用失敗時的回調函數 console.error('[雲函數] [login] 調用失敗', err) that.setData({ // 設置頁面綁定數據 openID: '[雲函數]獲取openID失敗' + err }) } }) }, // 定義獲取用戶詳細信息的函數 getDetail: function() { var userInf = this.data.userInfo; var gender = (userInf.gender == 1) ? "男" : (userInf.gender == 2) ? "女" : "未知"; var detailStr = "性別：" + gender; detailStr = detailStr + "\n國家：" + userInf.country; detailStr = detailStr + "\n省份：" + userInf.province; detailStr = detailStr + "\n城市：" + userInf.city; this.setData({ // 設置頁面綁定數據 detail: detailStr }) } })
js文件里定義page對象時，定義了一些頁面的變量，定義了監聽頁面加載的onload函數，以及其他一些用到的事件函數
onLoad函數，主要獲取用戶的公開信息，首先調用微信的getSetting接口,接口用於獲取用戶的當前設置，成功的話在返回參數res中就會包含這個授權信息，如果用戶已經授權過的，就可以接着調用getUserInfo接口，來獲取用戶的公開信息，如果獲取成功，在返回參數res中就包含了用戶的公開信息userInfo，把數據賦值給頁面變量userInfo，同時把頁面變量hasUserInfo設置為true，再通過setData這個方法把綁定的數據進行更新，重新渲染頁面，就可以在頁面上看到設置后的效果
獲取用戶信息之后，調用getOpenID函數獲取用戶的身份ID
獲取用戶公開信息部分如果用戶之前沒有授權的話，沒有辦法通過getUserInfo操作獲取用戶的公開信息，hasUserInfo還是為初值false，頁面顯示的獲取頭像昵稱按鈕，綁定的事件是getUserInfo函數，用戶點了按鈕之后，就會調用getUserInfo函數，getUserInfo函數的返回參數e中，如果用戶成功授權的話，e中就會包含用戶的公開信息，e.detail.userInfo就是用戶信息的具體內容，就是true，只要把e.detail.userInfo賦值給頁面變量userInfo並且把還是把hasUserInfo設置為true，用setData這個方法更新頁面數據，重新渲染頁面就可以了
如果用戶拒絕授權，e.detail.userInfo就是空的，就是false，讓他顯示模態對話框，來顯示授權失敗的信息
最后調用getOpenID函數，獲取用戶的身份ID,在他的實現里，主要是通過調用雲函數的接口獲取了用戶的openID,調用的雲函數名稱是login，函數的參數不需要，空的，調用成功的話，返回的參數res中就包含了用戶的openID,把
'[雲函數] [login] user openid: '和openID組織成一個完整的字符串保存到openID變量里，通過setData方法更新頁面綁定的數據，重新渲染頁面就可以了
如果沒有獲取到用戶的openID，獲取失敗的話，把'[雲函數]獲取openID失敗'和失敗信息一起組成一個完整的字符串保存到openID變量里，通過setData更新頁面數據，頁面上就會顯示獲取失敗以及具體的錯誤信息，在模擬器上就是藍色文字部分所顯示的
project.config.json
{ "miniprogramRoot": "miniprogram/", "cloudfunctionRoot": "cloudfunctions/", "setting": { "urlCheck": true, "es6": true, "enhance": true, "postcss": true, "preloadBackgroundData": false, "minified": true, "newFeature": true, "coverView": true, "nodeModules": false, "autoAudits": false, "showShadowRootInWxmlPanel": true, "scopeDataCheck": false, "uglifyFileName": false, "checkInvalidKey": true, "checkSiteMap": true, "uploadWithSourceMap": true, "compileHotReLoad": false, "lazyloadPlaceholderEnable": false, "useMultiFrameRuntime": true, "useApiHook": true, "useApiHostProcess": false, "babelSetting": { "ignore": [], "disablePlugins": [], "outputPath": "" }, "enableEngineNative": false, "useIsolateContext": false, "userConfirmedBundleSwitch": false, "packNpmManually": false, "packNpmRelationList": [], "minifyWXSS": true, "showES6CompileOption": false }, "appid": "wx6b706fbbff7d6d0a", "projectname": "EX601-GetOpenID", "libVersion": "2.6.6", "simulatorType": "wechat", "simulatorPluginLibVersion": {}, "cloudfunctionTemplateRoot": "cloudfunctionTemplate", "condition": { "search": { "list": [] }, "conversation": { "list": [] }, "plugin": { "list": [] }, "game": { "list": [] }, "miniprogram": { "list": [] } } }
cloudfunctions下的index.js文件
// 雲函數模板 // 部署：在 cloud-functions/login 文件夾右擊選擇 “上傳並部署” const cloud = require('wx-server-sdk') // 引用雲開發支持庫 cloud.init() // 初始化雲開發環境 /** * 這個示例將經自動鑒權過的小程序用戶 openid 返回給小程序端 * * event 參數包含小程序端調用傳入的 data * */ exports.main = async (event, context) => { // 開放雲函數接口，供小程序端調用 console.log(event) console.log(context) // 可執行其他自定義邏輯 // console.log 的內容可以在雲開發雲函數調用日志查看 // 獲取 WX Context (微信調用上下文)，包括 OPENID、APPID、及 UNIONID（需滿足 UNIONID 獲取條件） const wxContext = await cloud.getWXContext() return { // 返回數據 event, openid: wxContext.OPENID, appid: wxContext.APPID, unionid: wxContext.UNIONID, } }
調用的login雲函數是在雲函數文件夾里進行定義的，所有的雲函數會組織在專門的文件夾下面cloudfunctions，並且在project.config.json文件里要進行指明雲函數所在的目錄，對每個雲函數來說都會放在他名稱對應的文件夾里，所以login函數放在login文件夾下面
定義入口文件index.js,在這個文件里，要定義一個雲函數，首先得引用雲開發支持庫，wx-server-sdk是微信官方提供的一個支持雲開發的包，其次要調用init接口，對雲環境進行初始化，下面才是雲函數的入口函數定義，在login函數的定義中，主要是使用了
getWXContext這個微信接口，調用了微信的上下文，獲取到了openID、appid等等這些信息，然后用retrun語句把這些數據返回
因此，在小程序端，調用了login函數成功之后(// pages/index/index.js)，才可以在res參數，獲取到用戶的openID
獲取用戶詳細信息的getDetail函數，這個函數是用戶頭像的點擊事件函數，從已經獲得的userInfo信息里獲取到用戶的性別、國家、省份、城市等等，把他們組織成一個完整的字符串，最后賦值給頁面變量detail，顯示在頁面上
遇到的問題一：login雲函數調用成功，返回null
解決辦法：getWXContext函數是異步的，需要通過await等待其的返回
遇到的問題二：獲取openID失敗
解決辦法：雲端運行環境為 Node.js，需要先在本地安裝 Node.js 和 npm才能順利測試。同時還要在雲函數目錄下安裝 wx-server-sdk 依賴：npm install --save wx-server-sdk。
1、安裝Node.js 和 npm，安裝node.js時會同時安裝npm
測試安裝是否成功，安裝完成后打開cmd：輸入node -v 來測試 node.js，輸入npm -v 來測試 npm
2、安裝wx-server-sdk依賴。
在cmd中首先通過cd 雲函數路徑的命令，定位到雲函數目錄，這里要定位到某個具體的雲函數文件夾內，如login函數則要定位到login文件夾內。然后再執行npm install --save wx-server-sdk命令，安裝wx-server-sdk依賴。對於每一個你創建雲函數都要安裝該依賴。
如果在執行安裝命令后出現類似錯誤提示：rollbackFailedOptional: verb npm-session ****************，這是由於npm官方庫是國外的網站，在訪問時可能由於網絡原因導致異常。
解決方案：執行npm config set registry "http://registry.npm.taobao.org"命令，將官方庫替換為淘寶庫即可。
執行命令后可能會出現以下警告：
npm WARN **** No description
npm WARN **** No repository field
直接忽略即可，並不會影響后續的雲函數功能。成功安裝依賴后，相應的雲函數文件夾將生成一個package-lock.json文件。
3、上傳雲函數：在相應的雲函數文件夾上右鍵，選擇“上傳並部署：所有文件”。