-
ArthurSlog
-
SLog-72
-
Year·1
-
Guangzhou·China
-
Sep 13th 2018
臨河而羨魚 不如歸家織網
開發環境MacOS(High Sierra 10.13.5)
需要的信息和信息源：
前言
-
微信開發者工具版本： v 1.02.1809111
-
”雲開發“ 封裝好了一些常用的業務邏輯，提供了以下方面的相關API供開發者使用：
-
雲函數
-
數據庫
-
存儲管理
開始編碼
-
現在先把微信開發工具更新至最新（1.02.1809101），有部分開發人員在微信社區反饋更新之後沒有看到“雲開發”的按鈕
-
解決辦法：點擊檢查更新，等待更新完全完成之後重啓開發工具
-
重點：雲開發方式需要appid，請準備好
-
當前雲開發模版的微信小程序文件結構如下：
cloudfunctions
| - login
| - index.js
| - package.json
| - package-lock.json
| - arthurSlog_getInfo
| - index.js
| - package.json
| - package-lock.json
| - arthurSlog_methodAdd
| - 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
- 參考
- 本次添加圖片上傳功能，完整代碼如下：
Client：
miniprogram/pages/index/index.js
//index.js
const app = getApp()
Page({
data: {
avatarUrl: './user-unlogin.png',
userInfo: {},
logged: false,
takeSession: false,
requestResult: '',
fileID: '',
cloudPath: '',
imagePath: './user-unlogin.png',
},
// ...
// ...
// ...
// 添加前端代碼,向雲端上傳圖片
arthurSlog_uploadImg: function() {
// 選擇圖片
const this_ = this
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success(res) {
// tempFilePath可以作爲img標籤的src屬性顯示圖片
const tempFilePaths = res.tempFilePaths
wx.showLoading({
title: '上傳中',
})
this_.setData({
imagePath: tempFilePaths[0],
})
console.log(tempFilePaths[0])
const filePath = tempFilePaths[0]
const cloudPath = 'ArthurSlog' + filePath.match(/\.[^.]+?$/)[0]
wx.cloud.uploadFile({
cloudPath,
filePath, // 小程序臨時文件路徑
}).then(res => {
// get resource ID
console.log(res.fileID) //success返回的fileID值
console.log(res.statusCode) //success返回的statusCode值
}).catch(error => {
// handle error
console.error('[上傳文件] 失敗：', error)
wx.showToast({
icon: 'none',
title: '上傳失敗',
})
}).then( () => {
wx.hideLoading()
})
}
})
},
})
-
這裏分析一下
-
其實整個操作流程主要分兩步，也就是這裏使用了兩個功能函數的原因
-
首先，用戶點擊上傳按鈕，這會出發DOM事件，打開一個窗口供用戶進行文件的選擇 => 這一步“鎖定”文件
-
其次，當學好文件，點擊“打開的時候”，客戶端首先對文件進行讀取，併發送至雲端 => 這一步“上傳”文件
-
整個過程簡單說的話，上面兩步可以概括
-
但實際上，在線上使用的時候，往往會有很多意想不到的問題，舉個栗子：
-
上傳的文件過大，比如一個1G的圖片？
-
文件在上傳之前要加載進內存中，這個過程如果出錯怎麼解決？
-
如何判斷服務端已經完整接收了小程序端的文件…
-
以上是比較常見的，事實上還有更多的東西需要考慮…
-
好在，騰訊公司已經把很多細節上的東西幫我們做好了
-
我們只管用，然後提BUG給他們的開發人員 ^ ^
-
在這份代碼裏，使用了 wx.showLoading() 和 wx.hideLoading() 這兩個函數
-
可能你會經常聽到“生命週期”這種字眼
-
顯然，我們希望在上傳文件的時候出現“上傳中”的提示，而在確認上傳完畢之後關閉“上傳中”的提示
-
wx.showLoading() 在這裏就是一個彈出框，而 wx.hideLoading()就是關閉這個彈出框
-
當上傳過程出錯的時候，這裏使用了 wx.showToast() 來顯示消息提示框，提示用戶上傳失敗
-
這裏還需要注意一點，就是：
Client：
miniprogram/pages/index/index.js
const this_ = this
-
需要在方法外部，先把當前的環境對象賦給一個新對象
-
然後，再在函數體裏執行
Client：
miniprogram/pages/index/index.js
this_.setData({
imagePath: tempFilePaths[0],
})
-
現在，請保存好更新過代碼的文件
-
接着，點擊模擬器裏的“上傳圖片”按鈕
-
選擇樣例圖片（圖片路徑在miniprogram/images/ArthurSlog.png），完整代碼已經上傳至Github: https://github.com/BlessedChild/ArthurSlog_WeiXinCloudDevelopment
-
然後點擊“打開”
-
這時應該就會彈出一個 “上傳中” 的提示框，上傳完成之後，提示框纔會消失
-
此時，控制檯會打印類似下面的信息
http://tmp/sadsdasdasdas.dfsdfsdf.fsdfasdfas.png
index.js? [sm]:183 cloud://fdsf-tefsdfsst-d4gfdgd537a.6fsdc7e-fsasd-test-fsd/ArthurSlog.png
index.js? [sm]:184 200
-
第一行是小程序臨時文件路徑
-
第二行是fileID的值
-
第三行是statusCode（狀態碼）
-
至此，我們實現了一個選取本地文件，並上傳至小程序雲端，最後在客戶端顯示上傳的圖片文件的功能。
歡迎關注我的微信公衆號 ArthurSlog