Slog69_實現一個帶引數的雲函式GET！（微信小程式之雲開發-全棧時代2）
阿新 • • 發佈：2018-12-11
- ArthurSlog
- SLog-69
- Year·1
- Guangzhou·China
- Sep 11th 2018
禍兮福之所倚 福兮禍之所伏
開發環境MacOS(High Sierra 10.13.5)
需要的資訊和資訊源：
前言
- 騰訊推出“雲開發”概念，簡單說，就是為開發者提供搭建好的伺服器，伺服器使用npm安裝好了“wx-server-sdk”模組
- 騰訊就是把業務包裝在模組裡，然後在自己的平臺提供的 API，供開發人員呼叫
- 開發人員可以藉助平臺進行核心業務開發，實現快速上線和迭代
- 雲開發方式，可以和開發者已經使用的雲服務相互並存
- ”雲開發“ 提供三大基礎能力：
- 雲函式
- 資料庫
- 儲存管理
開始編碼
- 現在先把微信開發工具更新至最新（1.02.1809101），有部分開發人員在微信社群反饋更新之後沒有看到“雲開發”的按鈕
- 解決辦法：點選檢查更新，等待更新完全完成之後重啟開發工具
- 重點：雲開發方式需要appid，請準備好
- 當前雲開發模版的微信小程式檔案結構如下：
cloudfunctions | - login | - index.js | - package.json | - package-lock.json | - arthurSlog_getInfo | - index.js | - package.json | - package-lock.json 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
- 在使用“雲開發”的時候，一定要記得最先呼叫 初始化函式 init，小程式端和雲端都需要 初始化函式
Client：miniprogram/app.js
//app.js App({ onLaunch: function () { if (!wx.cloud) { console.error('請使用 2.2.3 或以上的基礎庫以使用雲能力') } else { wx.cloud.init({ env: 'arthurslog-test-d4537a', traceUser: true, }) } this.globalData = {} } })
Server:cloudfunctions/arthurSlog_getInfo/index.js
// 雲函式入口檔案
const cloud = require('wx-server-sdk')
cloud.init()
// 雲函式入口函式
exports.main = async(event, context) => {
return event.userInfo
}- 上面的Server端程式碼中
Server:cloudfunctions/arthurSlog_getInfo/index.js
// 雲函式入口檔案
//const cloud = require('wx-server-sdk')
//cloud.init()
// 雲函式入口函式
exports.main = async(event, context) => {
return event.userInfo
}- 沒有呼叫到 “wx-server-sdk” 的方法，所以可以註釋掉，不影響結果
- 這裡提醒一下，就是 cloudfunctions 路徑下的檔名稱，就是雲端向小程式端提供的方法
- 舉個栗子 cloudfunctions/arthurSlog_getInfo，arthurSlog_getInfo這個資料夾的名字就是雲端向小程式端提供的方法
- 大部分函式都來源於 物件“wx”，這個 “wx”物件 就類似於服務端的 “wx-server-sdk”物件
- 這兩個物件都包含了騰訊公司封裝好的屬性和方法
- 讓我們來回顧一下之前的專案檔案
Clientminiprogram/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物件中
// 這裡我們把結果再控制檯打印出來
// 返回appId 和 openId的資料，並儲存在res物件中
arthurSlog_getInfo: function() {
wx.cloud.callFunction({
name: 'arthurSlog_getInfo',
complete: res => {
console.log('callFunction test result: ', res)
}
})
},
})- 定位到我們新增的方法區域：
Clientminiprogram/pages/index/index.js
//index.js
const app = getApp()
Page({
data: {
avatarUrl: './user-unlogin.png',
userInfo: {},
logged: false,
takeSession: false,
requestResult: ''
},
// 新增前端程式碼，向後端服務發起 名為”arthurSlog_getInfo“方法的請求
// 請求的結果會返回，並儲存再 res物件中
// 這裡我們把結果再控制檯打印出來
// 返回appId 和 openId的資料，並儲存在res物件中
arthurSlog_getInfo: function() {
wx.cloud.callFunction({
name: 'arthurSlog_getInfo',
complete: res => {
console.log('callFunction test result: ', res)
}
})
},
})- 其中，我們就呼叫了用了 “wx”物件 的方法，wx.cloud.callFunction()
- 這個方法會讓小程式端向雲端傳送請求，請求的方法名稱是 arthurSlog_getInfo（name引數）
- 同時等待服務端的返回的資料，返回的資料儲存在res物件中
- 我們再來看雲端的程式碼檔案，雲函式的傳入引數有兩個，一個是 event 物件，一個是 context 物件。
Server:cloudfunctions/arthurSlog_getInfo/index.js
// 雲函式入口檔案
//const cloud = require('wx-server-sdk')
//cloud.init()
// 雲函式入口函式
exports.main = async(event, context) => {
return event.userInfo
}- event 指的是觸發雲函式的事件，當小程式端呼叫雲函式時，
- event 就是小程式端呼叫雲函式時傳入的引數，外加後端自動注入的小程式使用者的 openid 和小程式的 appid
- context 物件包含了此處呼叫的呼叫資訊和執行狀態，可以用它來了解服務執行的情況
- 現在，我們在小程式端寫一個帶資料（帶引數）的方法，把資料傳給雲端（服務端），然後小程式端接收返回的資料
- 首先編寫客戶端程式碼
Clientminiprogram/pages/index/index.js
//index.js
const app = getApp()
Page({
data: {
avatarUrl: './user-unlogin.png',
userInfo: {},
logged: false,
takeSession: false,
requestResult: ''
},
//
//...省略中間的程式碼.........
//
// 新增前端程式碼，向後端服務發起 名為”arthurSlog_methodAdd“方法的請求
// 請求的結果會返回，並儲存再 res物件中
// 這裡我們把結果在控制檯打印出來
// 返回appId 和 openId的資料，並儲存在res物件中
arthurSlog_methodAdd: function() {
wx.cloud.callFunction({
// 雲函式名稱
name: 'arthurSlog_methodAdd',
// 傳給雲函式的引數
data: {
a: 8,
b: 8,
},
})
.then(res => {
console.log(res.result)
})
.catch(console.error)
},
})- 在小程式端：我們建立了一個新的方法，方法名為 “arthurSlog_methodAdd”，傳送的雲端的資料是 data物件，data物件裡面包含了兩個物件，a物件和b物件的值都是8
- 現在，我們來建立一個新的服務端方法，同時編寫新方法的程式碼檔案：
- 右鍵 cloudfunctions資料夾，點選“新建node.js雲函式”，函式名為 arthurSlog_methodAdd
- 提示安裝本地依賴，確定
Servercloudfunctions/arthurSlog_methodAdd/index.js
// 雲函式入口檔案
const cloud = require('wx-server-sdk')
cloud.init()
// 雲函式入口函式
// event中包含了來自小程式端的“data物件”的資料
// data物件中有 a物件和 b物件，兩個物件的值都為8
// 返回一個sum物件給小程式端，返回的物件就是來自小程式端的兩個物件a和b的和
// 返回的資料將會儲存在小程式端的res.result物件內
exports.main = async(event, context) => {
return {
sum: event.a + event.b
}
}- ok，現在，右鍵 arthurSlog_methodAdd 資料夾，點選“上傳並部署“
- 現在小程式端和雲端的對接準備已經做好了，我們還需要一個互動頁面
Clientminiprogram/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>
<!-- 獲取 openid -->
<view class="uploader">
<button class="userinfo-nickname" bindtap="arthurSlog_getInfo">點選獲取 openid</button>
</view>
<!-- 返回兩個物件之和 -->
<view class="uploader">
<button class="userinfo-nickname" bindtap="arthurSlog_methodAdd">點選返回兩個物件之和</button>
</view>
</view>- ok，差不多要大功告成了
- 在頁面上添加了“點選返回兩個物件之和”按鈕，並繫結“arthurSlog_methodAdd”函式之後，儲存好檔案
- 在模擬器中點選“點選返回兩個物件之和”的按鈕，觀察Console控制檯會列印如下內容：
{sum: 16}- ok，一個能攜帶資料給雲端（服務端），的小程式端的方法就完成並正常工作了
- 至此，我們實現了一個帶引數的小程式端方法，和一個能接受前端引數的雲端（服務端）的方法，讓他們成功實現了對接並正常工作。
歡迎關注我的微信公眾號 ArthurSlog
