- 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 wx-server-sdk@latest
- 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數據
- 至此，我們對微信“雲開發”有了基礎的瞭解和使用。
