Slog68_微信雲開發開啟全棧時代！（微信小程式之雲開發-全棧時代1）
阿新 • • 發佈：2018-12-10
- ArthurSlog
- SLog-68
- Year·1
- Guangzhou·China
- Sep 11th 2018
常道無名 唯德以顯之 至德無本 順道而成之 禍福無門 惟人自召 善惡之報 如影隨形
開發環境MacOS(High Sierra 10.13.5)
需要的資訊和資訊源：
開始編碼
- 騰訊推出“雲開發”概念，簡單說，就是為開發者提供搭建好的伺服器，伺服器使用npm安裝好了“wx-server-sdk”模組
- 騰訊就是把業務包裝在模組裡，然後在自己的平臺提供的 API，供開發人員呼叫
- 開發人員可以藉助平臺進行核心業務開發，實現快速上線和迭代
- 雲開發方式，可以和開發者已經使用的雲服務相互並存
- 現在先把微信開發工具更新至最新（1.02.1809101）
- 雲開發方式，需要appid，請準備好
- 新建一個小程式專案，選擇“建立雲開發快速啟動模版”
- 專案建立之後，檔案結構如下：
cloudfunctions | - login miniprogram | - images | - code-db-inc-dec.png | - code-db-onAdd.png | - code-db-onQuery.png | - code-db-onRemove.png | - code-func-sum.png | - console-entrance.png | - create-collection.png | - pages | - addFunction | - addFunction.js | - addFunction.json | - addFunction.wxml | - addFunction.wxss | - chooseLib | - chooseLib.js | - chooseLib.json | - chooseLib.wxml | - chooseLib.wsxx | - databaseGuide | - databaseGuide.js | - databaseGuide.json | - databaseGuide.wxml | - databaseGuide.wxss | - deployFunctions | - deployFunctions.js | - deployFunctions.json | - deployFunctions.wxml | - deployFunctions.wxss | - index | - index.js | - index.wxml | - index.wxss | - user-unlogin.png | - storageConsole | - storageConsole.js | - storageConsole.json | - storageConsole.wxml | - storageConsole.wxss | - userConsole | - userConsole.js | - userConsole.json | - userConsole.wxml | - userConsole.wxss | - style | - guide.wxss | - app.js | - app.json | - app.wxss README.md project.config.json
- 現在，在開發者工具工具欄左側，點選 “雲開發” 按鈕可開通雲開發
- 開發環境命名目前不可更改！
- 一個賬戶可以建立兩個環境，建立一個作為測試環境，命名為test，然後平臺會給你生成一個環境ID，類似這個樣子test-3gh3g12
- 然後在再建立一個生產環境produce
- 點選右上角可以切換開發環境，現在切換回test
- 回到開發介面，右擊cloudfunctions路徑下的login資料夾，選擇上傳並部署
- 等待上傳成功之後，開啟miniprogram路徑下的app.js檔案，對這個檔案進行更新
- 更新之前，先點選微信開發工具的左上角的“雲開發”，然後，在雲開發介面的左上角找到“環境ID”，複製“環境ID”
- 接下來更新程式碼：
miniprogram/app.js
//app.js
App({
onLaunch: function () {
if (!wx.cloud) {
console.error('請使用 2.2.3 或以上的基礎庫以使用雲能力')
} else {
wx.cloud.init({
env: 'test-dxx7x',
traceUser: true,
})
}
this.globalData = {}
}
})- 新增環境變數 env: 'test-dxx7x'
- 儲存修改
- 在模擬器中點選“點選獲取openid”
- 在Console控制檯裡可以看到
[雲函式] [login] user openid: o8xxf0Sxxxfdsfdfsdf342- ok,已經實現了簡單的一個前後互動邏輯
- 開啟微信開發工具的左上角的“雲開發”，點選“雲函式”
- 可以看到我們的login函式已經出現了，在“函式名稱”欄中點選login，可以看到login函式的三大引數：
- 函式配置
- 日誌
- 監控
- 其中日誌記錄就可以當作是後端伺服器的控制檯了，相關的呼叫時間和記錄都可以差的到
- 還有比較實用的日誌篩選功能
- 現在點選左上角的“測試”按鈕，可以對函式進行測試
- 點選“執行測試”
- 測試結果：失敗
- 檢視日誌，如下：
TypeError: Cannot read property 'openId' of undefined
at EventHandler.exports.main [as realHandler] (/var/user/index.js:21:28)
at EventHandler.handle (/var/runtime/node8/bootstrap.js:238:34)
at invoke (/var/runtime/node8/bootstrap.js:111:22)
at Timeout.setTimeout [as _onTimeout] (/var/runtime/node8/bootstrap.js:61:9)
at ontimeout (timers.js:475:11)
at tryOnTimeout (timers.js:310:5)
at Timer.listOnTimeout (timers.js:270:5)- 我們點選左上角的“使用者管理”，點選右上角的“複製openid“
- 然後我們返回雲函式，點選左邊的“login”函式，再重新點選右邊的“測試”按鈕來測試函式
- 雙擊“openId”右邊的值，右鍵貼上我們剛剛複製的openID
- 現在點選“執行測試”，結果是
- 測試結果：成功
- 報錯消失
- 接下來
- 我們來自己編寫一個雲服務（後端服務）
- 回到微信開發工具，右鍵點選cloudfunctions資料夾，點選“新建node.js雲函式”，並命名為 "arthurSlog_getInfo"
- 開發工具會在cloudfunctions路徑下建立一個 arthurSlog_getInfo 資料夾，檔案結構如下：
cloudfunctions/arthurSlog_getInfo
cloudfunctions
| - arthurSlog_getInfo
| - index.js
| - package.json
| - package-lock.json- 這個檔案是要放在伺服器上，為我們的前端提供服務的
- 這個檔案會提供一個“介面”供前後端互動
- 其中package.json檔案裡，包含了index.js程式碼的依賴關係
- 簡單點說，index.js 裡面會引用到 wx-server-sdk這個模組的方法
- 而這些引用的關係，就記錄再package.json檔案裡面
- 我們可以看一下package.json檔案裡的程式碼：
cloudfunctions/arthurSlog_getInfo/package.json
{
"name": "arthurSlog_getInfo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"wx-server-sdk": "latest"
}
}- package.json 是一份配置檔案，只用來指導 npm工具做事的方案
- npm工具，是nodejs語言的一個包管理工具，更多的使用方式 參考 npm官方手冊
- 在我的 Slog57 和 Slog58兩篇文章中，介紹了npm的使用和npm package（npm包）的製作、釋出和更新
- 感興趣的可以去翻閱一下
- 好了，回過頭來，我們看回來微信“雲開發”
- 讓我們來開啟剛剛建立的 arthurSlog_getInfo路徑下的 index.js檔案
- 同時新增程式碼：
cloudfunctions/arthurSlog_getInfo/index.js
// 雲函式入口檔案
const cloud = require('wx-server-sdk') //引入騰訊封裝好的業務 API
cloud.init() //初始化
// 雲函式入口函式
// 匯出函式（服務），供前端訪問，函式名為 arthurSlog_getInfo
exports.main = async(event, context) => {
return event.userInfo
}- 編寫完成之後，右鍵arthurSlog_getInfo資料夾，點選“上傳並部署”
- 因為雲函式中使用 wx-server-sdk 需在對應雲函式目錄下安裝 wx-server-sdk 依賴
- 在建立雲函式時會在雲函式目錄下預設新建一個 package.json 並提示使用者是否立即本地安裝依賴
- 請注意雲函式的執行環境是 Node.js，因此在本地安裝依賴時務必保證已安裝 Node.js，同時 node 和 npm 都在環境變數中
- 如不本地安裝依賴，可以用命令列在該目錄下執行：
npm install --save [email protected]
- ok，現在我們開啟 miniprogram/pages/index/index.js 檔案：
- 並新增前端程式碼：（用於向後端發起請求服務）
miniprogram/pages/index/index.js
//index.js
const app = getApp()
Page({
data: {
avatarUrl: './user-unlogin.png',
userInfo: {},
logged: false,
takeSession: false,
requestResult: ''
},
onLoad: function() {
if (!wx.cloud) {
wx.redirectTo({
url: '../chooseLib/chooseLib',
})
return
}
// 獲取使用者資訊
wx.getSetting({
success: res => {
if (res.authSetting['scope.userInfo']) {
// 已經授權，可以直接呼叫 getUserInfo 獲取頭像暱稱，不會彈框
wx.getUserInfo({
success: res => {
this.setData({
avatarUrl: res.userInfo.avatarUrl,
userInfo: res.userInfo
})
}
})
}
}
})
},
onGetUserInfo: function(e) {
if (!this.logged && e.detail.userInfo) {
this.setData({
logged: true,
avatarUrl: e.detail.userInfo.avatarUrl,
userInfo: e.detail.userInfo
})
}
},
onGetOpenid: function() {
// 呼叫雲函式
wx.cloud.callFunction({
name: 'login',
data: {},
success: res => {
console.log('[雲函式] [login] user openid: ', res.result.openid)
app.globalData.openid = res.result.openid
wx.navigateTo({
url: '../userConsole/userConsole',
})
},
fail: err => {
console.error('[雲函式] [login] 呼叫失敗', err)
wx.navigateTo({
url: '../deployFunctions/deployFunctions',
})
}
})
},
// 上傳圖片
doUpload: function() {
// 選擇圖片
wx.chooseImage({
count: 1,
sizeType: ['compressed'],
sourceType: ['album', 'camera'],
success: function(res) {
wx.showLoading({
title: '上傳中',
})
const filePath = res.tempFilePaths[0]
// 上傳圖片
const cloudPath = 'my-image' + filePath.match(/\.[^.]+?$/)[0]
wx.cloud.uploadFile({
cloudPath,
filePath,
success: res => {
console.log('[上傳檔案] 成功：', res)
app.globalData.fileID = res.fileID
app.globalData.cloudPath = cloudPath
app.globalData.imagePath = filePath
wx.navigateTo({
url: '../storageConsole/storageConsole'
})
},
fail: e => {
console.error('[上傳檔案] 失敗：', e)
wx.showToast({
icon: 'none',
title: '上傳失敗',
})
},
complete: () => {
wx.hideLoading()
}
})
},
fail: e => {
console.error(e)
}
})
},
// 新增前端程式碼，向後端服務發起 名為”arthurSlog_getInfo“方法的請求
// 請求的結果會返回，並儲存再 res物件中
// 這裡我們把結果再控制檯打印出來
arthurSlog_getInfo: function() {
wx.cloud.callFunction({
name: 'arthurSlog_getInfo',
complete: res => {
console.log('callFunction test result: ', res)
}
})
},
})- 然後，再開啟 miniprogram/pages/index/index.wxml 檔案
- 並新增頁面程式碼，在頁面上新建一個 button 元件與js裡的方法 “arthurSlog_getInfo”繫結在一起
- 當點選按鈕的時候，呼叫函式“arthurSlog_getInfo”，像雲服務（後端）發起請求
miniprogram/pages/index/index.wxml
<!--index.wxml-->
<view class="container">
<!-- 使用者 openid -->
<view class="userinfo">
<button open-type="getUserInfo" bindgetuserinfo="onGetUserInfo" class="userinfo-avatar" style="background-image: url({{avatarUrl}})"></button>
<view>
<button class="userinfo-nickname" bindtap="onGetOpenid">點選獲取 openid</button>
</view>
</view>
<!-- 上傳圖片 -->
<view class="uploader">
<view class="uploader-text" bindtap="doUpload">
<text>上傳圖片</text>
</view>
<view class="uploader-container" wx:if="{{imgUrl}}">
<image class="uploader-image" src="{{imgUrl}}" mode="aspectFit" bindtap="previewImg"></image>
</view>
</view>
<!-- 操作資料庫 -->
<view class="uploader">
<navigator url="../databaseGuide/databaseGuide" open-type="navigate" class="uploader-text">
<text>前端操作資料庫</text>
</navigator>
</view>
<!-- 新建雲函式 -->
<view class="uploader">
<navigator url="../addFunction/addFunction" open-type="navigate" class="uploader-text">
<text>快速新建雲函式</text>
</navigator>
</view>
<!-- 新建雲函式 -->
<!-- fun: -->
<view class="uploader">
<button class="userinfo-nickname" bindtap="arthurSlog_getInfo">點擊向雲端發起請求</button>
</view>
</view>- 儲存，在模擬器中，點選“點擊向雲端發起請求”按鈕
- 觀察控制檯列印的資訊：
callFunction test result: {errMsg: "cloud.callFunction:ok", result: {…}}- 點選展開 {errMsg 左邊的小箭頭展開：
errMsg
:
"cloud.callFunction:ok"
result
:
{appId: "*****wd1**14*****", openId: "o5***4******N****"}
__proto__
:
Object- 可以看到雲端服務返回的 appId 和 openId資料
- 至此，我們對微信“雲開發”有了基礎的瞭解和使用。
歡迎關注我的微信公眾號 ArthurSlog
