微信小程序里的拍照功能看著簡單真落地時幾乎每個人都會在授權(quán)和保存這兩步上摔一跤。用戶點了拍照沒反應、授權(quán)彈窗只出現(xiàn)一次之后再怎么點都靜默失敗、拍完了圖片存不進相冊只丟回一句fail auth deny這些現(xiàn)象背后都是同一套權(quán)限模型和文件系統(tǒng)規(guī)則在起作用。這篇就把拍照—授權(quán)—保存到本地這條鏈路從頭到尾拆開講camera組件和wx.chooseMedia到底該怎么選scope.camera和scope.writePhotosAlbum的授權(quán)時機怎么安排被用戶拒絕之后怎么優(yōu)雅地把人送進設置頁重新打開拍到的臨時文件怎么落進手機相冊——以及另一種同樣高頻的保存到本地也就是落到小程序自己的用戶文件目錄wx.env.USER_DATA_PATH里。不管你是剛上手小程序的新人還是做過幾個項目但一直靠拷代碼過日子的老手這里面的參數(shù)取舍、錯誤碼排查和真機差異清單應該都能直接抄走。1. 先搞清楚拍照這件事被拆成了幾塊1.1 拍照、授權(quán)、保存是三件互不依賴的事大部分新手寫拍照功能習慣把所有邏輯塞進一個函數(shù)點按鈕 → 調(diào)相機 → 拿路徑 → 存相冊?？雌饋砗芫o湊實際上一旦失敗你根本不知道該重試哪一步。正確的拆法是把它看成三個獨立的動作每個動作都有自己獨立的失敗原因和恢復手段。第一步是取圖也就是拿到一張圖片的路徑。這一步的產(chǎn)物永遠是一個臨時路徑注意是臨時不是永久。小程序的臨時文件只在本次啟動的生命周期內(nèi)有效用戶殺掉微信再進來這個路徑大概率就指不到了。第二步是授權(quán)它不是拍照本身的步驟而是訪問系統(tǒng)能力攝像頭、相冊寫入的門票門票好不好使決定了后面兩步能不能走通。第三步是落盤把臨時文件搬到穩(wěn)定存儲里——搬到系統(tǒng)相冊是一種搬到小程序用戶目錄是另一種。拆開之后你的代碼就能做到拍照失敗可以單獨重試保存失敗不影響已經(jīng)拍到的圖授權(quán)被拒時給用戶一條明確的補救路徑而不是彈個操作失敗就完事。我在項目里通常會把這個流程封裝成三個返回 Promise 的函數(shù)頁面層只負責編排不碰任何errMsg字符串判斷這樣后面微信改個錯誤文案也不用滿項目搜索替換。1.2 兩條實現(xiàn)路線的取舍camera 組件還是 wx.chooseMedia小程序拍照有兩條路選錯了后面全是坑先看對比。對比維度camera 組件wx.chooseMedia界面來源自己寫完全自定義微信統(tǒng)一相機界面開發(fā)成本高要處理層級、暫停、錯誤低一個 API 搞定授權(quán)要求需要scope.camera要自己處理由微信內(nèi)部處理調(diào)用方不感知靈活度極高可疊人臉框、掃碼、實時幀低只能拿最終圖主要坑點原生組件層級最高普通view蓋不住得用cover-view參數(shù)少但真機行為有差異典型場景證件識別、人臉核身、實時濾鏡頭像上傳、打卡留痕、報修拍照如果你的需求只是拍一張圖然后上傳用wx.chooseMedia就夠了省下來的時間夠你多做兩個需求。只有當你要在取景框上疊加東西——比如把身份證的框畫出來、實時提示請把臉放進去、或者需要讀取每一幀做識別——才值得上camera組件。這里有個很多人不知道的細節(jié)camera組件在部分機型上被壓到后臺再回來會黑屏需要監(jiān)聽bindstop然后手動重建組件而wx.chooseMedia完全沒有這個問題因為它走的是系統(tǒng)相機。2. 授權(quán)鏈路什么時候要什么時候不要2.1 scope 權(quán)限的三種狀態(tài)和只彈一次的機制小程序把用戶對系統(tǒng)能力的授權(quán)結(jié)果存在authSetting里對我們最相關(guān)的是scope.camera攝像頭和scope.writePhotosAlbum相冊寫入。每個 scope 只有三種狀態(tài)未詢問過字段不存在、已同意值為true、已拒絕值為false。關(guān)鍵在于同一個 scope彈窗一輩子只會彈一次。用戶第一次點拍照微信彈出允許訪問攝像頭如果他點了拒絕你之后再調(diào)多少次wx.authorize或者相關(guān) API都不會再彈窗只會直接走fail回調(diào)。這就是大量為什么我這兒好好的用戶那兒點不動問題的根源——不是你的代碼有問題是用戶在那一次彈窗里點了拒絕然后世界就安靜了。所以正確的做法不是調(diào) API 之前先wx.authorize一遍而是先查狀態(tài)再決定策略。查詢用wx.getSettingfunction getAuthState(scope) { return new Promise((resolve) { wx.getSetting({ success(res) { const val res.authSetting[scope] // undefined 沒問過 true 已同意 false 已拒絕 resolve(val) }, fail() { resolve(undefined) } }) }) }拿到undefined說明可以放心直接調(diào) API讓微信去彈窗拿到true直接干活別多嘴拿到false才是需要走引導去設置頁分支的時候。這三種情況一定要分開處理寫成if (res.authSetting[scope])會把undefined和false混在一起結(jié)果就是首次使用的用戶被無端彈一個請去設置頁開啟權(quán)限體驗直接崩掉。2.2 被拒絕之后怎么把用戶拉回來用戶拒絕之后唯一的翻盤機會是把人引到小程序的設置頁讓他手動打開開關(guān)。這里有兩個入口用途不同很多人會混著用。一是button組件的open-typeopenSetting這是最穩(wěn)的方式因為它天然滿足必須由用戶點擊觸發(fā)的要求button open-typeopenSetting bindopensettingonSettingBack去開啟權(quán)限/button二是wx.openSetting這個 API 在較新版本里同樣要求由用戶點擊事件的同步調(diào)用鏈里觸發(fā)如果你寫在setTimeout里或者網(wǎng)絡回調(diào)里會直接報openSetting:fail can only be invoked by user TAP gesture。我的習慣是頁面上放一個自定義的權(quán)限提示彈層里面嵌那個open-typeopenSetting的按鈕用戶點完之后在bindopensetting里讀res.authSetting如果權(quán)限開了就自動繼續(xù)剛才被打斷的操作。這樣用戶的操作路徑是連貫的——點拍照、被攔、點去設置、點允許、回來照片就出來了中間不需要他再點一次拍照按鈕。這個細節(jié)看著小但轉(zhuǎn)化率差得很明顯尤其是上了年紀的用戶你不幫他續(xù)上他大概率就放棄了。注意open-typeopenSetting只能打開當前小程序的權(quán)限設置頁不能引導去系統(tǒng)層面的設置別在文案里寫請到手機設置里打開。2.3 隱私協(xié)議適配別讓拍照在真機上莫名失效這是這兩年最容易踩的新坑。按照現(xiàn)行規(guī)范小程序在調(diào)用攝像頭、相冊這類涉及用戶隱私的接口之前必須在管理后臺的用戶隱私保護指引里聲明對應的收集項并且在前端完成一次隱私授權(quán)。沒做這一步的典型表現(xiàn)是開發(fā)工具里一切正常真機上保存相冊直接返回fail privacy permission is not authorized。前端需要處理的是是否需要彈出隱私協(xié)議這個判斷用wx.getPrivacySettingwx.getPrivacySetting({ success(res) { if (res.needAuthorization) { // 需要展示隱私協(xié)議讓用戶點同意 this.setData({ showPrivacy: true, privacyName: res.privacyContractName }) } else { // 用戶已同意過或者當前不需要授權(quán)直接繼續(xù)業(yè)務 this.startPhotoFlow() } } })彈層里的同意按鈕必須用特定寫法才能生效button open-typeagreePrivacyAuthorization bindagreeprivacyauthorizationonAgreePrivacy同意/button后臺那邊要記得勾選攝像頭和相冊僅寫入權(quán)限兩項只勾一半的情況很常見——聲明了攝像頭忘了相冊結(jié)果拍得好好的一保存就失敗。這個聲明項和你代碼里實際調(diào)用的接口必須對得上多聲明了審核會問少聲明了功能會掛。我一般會先把可能用到的接口列一遍拍照、從相冊選圖、保存到相冊、掃一掃全部對照后臺聲明核一遍再提審。3. 拍照環(huán)節(jié)的實現(xiàn)細節(jié)與參數(shù)取舍3.1 camera 組件路線的關(guān)鍵配置走自繪路線的話頁面結(jié)構(gòu)基本長這樣camera device-position{{position}} flash{{flash}} resolutionhigh frame-sizemedium binderroronCameraError bindinitdoneonCameraReady stylewidth: 100%; height: 750rpx; / cover-view classtoolbar cover-view classbtn-switch bindtaponSwitchCamera翻轉(zhuǎn)/cover-view cover-view classbtn-shoot bindtaponShoot拍照/cover-view /cover-view幾個必須知道的點camera是原生組件層級永遠最高普通view覆蓋不上去工具條只能用cover-viewcover-imagedevice-position支持back和front切換時組件會短暫重建期間takePhoto會失敗所以要在bindinitdone之后再放開快門按鈕。拍照本身通過CameraContext完成const ctx wx.createCameraContext() function shoot(ctx) { return new Promise((resolve, reject) { ctx.takePhoto({ quality: high, // low | normal | high | original success: (res) resolve(res.tempImagePath), fail: reject }) }) }quality選original會拿到未壓縮的原始圖體積通常是high的三到五倍一張能到 5MB 以上除非你要做證件識別否則別用。上傳前再做一次壓縮更劃算這個后面細說。3.2 wx.chooseMedia 路線的推薦寫法大多數(shù)場景用這一個函數(shù)就結(jié)束了但參數(shù)得配對function takePhoto(options {}) { const { count 1, sourceType [camera], // 只要 camera 就強制拍照不給相冊入口 sizeType [compressed] // 基礎庫 2.21.0 起支持 } options return new Promise((resolve, reject) { wx.chooseMedia({ count, mediaType: [image], sourceType, sizeType, camera: back, success(res) { resolve(res.tempFiles.map(f f.tempFilePath)) }, fail(err) { // 用戶主動取消不是錯誤別彈提示 if (/cancel/i.test(err.errMsg)) return resolve([]) reject(err) } }) }) }sourceType只寫[camera]會直接喚起相機、不給相冊選項適合必須現(xiàn)場拍的場景打卡、查勘、巡檢寫成[album, camera]則會出現(xiàn)一個選擇面板。sizeType建議默認給compressed微信會做一次壓縮肉眼幾乎看不出差別但體積能降一半以上。還有一點容易被忽略用戶取消要當成正常返回處理返回空數(shù)組而不是 reject否則用戶點一下取消你就彈一個錯誤提示非常打擾。3.3 拍完之后必踩的三個坑太大、方向不對、路徑失效第一是體積。壓縮后的圖常見在 200KB 到 1MB 之間如果你要一次傳九張那就是接近 10MB。建議在拿到路徑后再壓一次wx.compressImage支持按質(zhì)量和目標寬高兩個維度壓function compress(src, quality 80) { return new Promise((resolve) { wx.compressImage({ src, quality, success: (res) resolve(res.tempFilePath), fail: () resolve(src) // 壓縮失敗就用原圖別讓流程斷掉 }) }) }第二是方向。部分安卓機型尤其是早年的一些三星、小米設備拍出來的照片帶 EXIF 方向標記image組件會自動校正顯示但你把圖丟進canvas去畫水印或者做拼圖時就會發(fā)現(xiàn)它橫過來了。解決辦法是先用wx.getImageInfo讀出orientation字段再在canvas里按方向做旋轉(zhuǎn)和鏡像補償這一步不做安卓端水印十有八九是歪的。第三是路徑時效。前面說過臨時文件只在本次啟動內(nèi)有效。如果你的業(yè)務流程是用戶拍完先放一放等填完表單再提交那一定要在拿到路徑的第一時間把它搬到用戶目錄否則用戶中途切出去刷了會視頻再回來微信可能已經(jīng)回收了那份臨時文件提交時報file not found。這個坑我在真實項目里遇到過兩次都是用戶投訴照片傳上去是空白查了半天才發(fā)現(xiàn)是臨時文件過期。4. 保存到手機相冊的完整鏈路4.1 標準保存流程的五個階段保存到系統(tǒng)相冊用wx.saveImageToPhotosAlbum它看著只有一個參數(shù)實際上你的代碼要處理五個階段拿到可靠路徑→檢查相冊授權(quán)狀態(tài)→調(diào)用保存接口→區(qū)分錯誤類型→給用戶明確反饋。完整的封裝長這樣function saveToAlbum(filePath) { return new Promise((resolve, reject) { wx.saveImageToPhotosAlbum({ filePath, success: () resolve(true), fail: (err) reject(err) }) }) }有個細節(jié)很多人不知道當scope.writePhotosAlbum是未詢問狀態(tài)時你不需要提前調(diào)wx.authorizesaveImageToPhotosAlbum自己會把授權(quán)彈窗帶出來。提前authorize反而容易導致重復彈窗或者時序錯亂。所以在頁面里的推薦流程是async onTapSave() { const path this.data.imgPath if (!path) return try { await saveToAlbum(path) wx.showToast({ title: 已保存到相冊, icon: success }) } catch (err) { const msg err.errMsg || if (/auth deny|auth denied|authorize/i.test(msg)) { // 曾經(jīng)拒絕過展示自定義引導層 this.setData({ showAuthTip: true }) return } if (/cancel/i.test(msg)) return // 用戶點了取消靜默處理 if (/file not found/i.test(msg)) { wx.showToast({ title: 圖片已失效請重新拍攝, icon: none }) return } if (/privacy/i.test(msg)) { wx.showToast({ title: 請先同意隱私協(xié)議, icon: none }) return } wx.showToast({ title: 保存失敗請重試, icon: none }) } }這段代碼的價值在于同樣是失敗用戶看到的提示完全不同。用戶點了取消你不吭聲權(quán)限被拒你給他一條去設置的路文件失效你告訴他重新拍其他情況兜底一個通用提示。這就是前面說的拆開帶來的好處如果所有錯誤都塞在一坨代碼里最后只能統(tǒng)一彈一個保存失敗用戶完全不知道該怎么辦。4.2 錯誤碼速查與逐條排查errMsg 關(guān)鍵字真實含義處理方式auth deny/auth denied用戶曾拒絕相冊寫入權(quán)限展示引導層按鈕用open-typeopenSettingfail cancel用戶在系統(tǒng)彈窗里點了取消靜默不要彈任何提示fail file not found臨時文件已被回收或路徑非法校驗路徑存在提示重新拍攝fail invalid file type傳了非圖片文件或視頻路徑檢查傳入的是不是圖片臨時路徑fail privacy permission is not authorized隱私協(xié)議未授權(quán)或后臺未聲明補后臺聲明 前端隱私彈窗fail system deny系統(tǒng)層面禁用了相冊權(quán)限只能引導用戶去系統(tǒng)設置小程序側(cè)無解fail dest path is invalid目標路徑格式問題多見于自定義場景不要手拼路徑用 API 返回的原始路徑fail:the permission value is offline verifying權(quán)限校驗中多見于首次彈窗后立即調(diào)用延遲 100~300ms 重試一次最后一條值得單獨說在部分安卓機型上用戶在系統(tǒng)彈窗里點了允許之后小程序的權(quán)限狀態(tài)更新有個極短的延遲你立刻調(diào)保存會拿到校驗中的失敗。穩(wěn)妥的做法是失敗后延遲重試一次setTimeout200ms 再試成功率能明顯提升。4.3 保存成功之后還該做的事保存成功之后有兩個動作值得加上。一是給一個非阻塞的成功反饋wx.showToast就夠了別用showModal打斷用戶。二是如果你做的是拍照打卡類功能保存到相冊只是副產(chǎn)品真正要做的上傳應該在這之后自動觸發(fā)——但順序不能反先本地保存再上傳因為上傳可能失敗本地那張圖是用戶唯一確定拿到手的東西。還有個小細節(jié)iOS 上保存到相冊后如果在系統(tǒng)相冊里立刻查看會看到照片按拍攝時間排序而不是保存時間。這是系統(tǒng)行為不用管但客服肯定會被問提前準備好話術(shù)。5. 另一種保存到本地落到小程序的用戶文件目錄5.1 wx.env.USER_DATA_PATH 到底是什么產(chǎn)品經(jīng)理說保存到本地時很可能指的是把圖片存在小程序自己的目錄里下次打開還能看到而不是存到系統(tǒng)相冊。這時候要用的是wx.env.USER_DATA_PATH它指向小程序的本地用戶文件目錄通常是wxfile://usr這種形式。特點很鮮明不受臨時文件回收機制影響只要小程序不被刪除文件就在只有你自己的小程序能讀寫其他小程序和系統(tǒng)相冊都看不到總?cè)萘坑猩舷薰俜轿臋n給的數(shù)字是 200MB超了寫入就會失敗。和它并列的還有兩個目錄本地臨時文件目錄各種 API 返回的tempFilePath就在這兒隨時可能被清和本地緩存文件目錄wx.saveFile時代的產(chǎn)物官方已經(jīng)把它標記為廢棄。所以現(xiàn)在做持久化認準USER_DATA_PATH就對了這也是為什么網(wǎng)上搜相關(guān)內(nèi)容會頻繁看到它。5.2 從臨時路徑搬運到用戶目錄的兩種方式第一種是拷貝用FileSystemManager.copyFile源路徑可以直接是臨時文件const fs wx.getFileSystemManager() const DIR ${wx.env.USER_DATA_PATH}/photos function ensureDir() { try { fs.accessSync(DIR) } catch (e) { fs.mkdirSync(DIR, true) // 第二個參數(shù) true 表示遞歸創(chuàng)建 } } function persistFile(tempFilePath, name) { ensureDir() const dest ${DIR}/${name || Date.now() .jpg} return new Promise((resolve, reject) { fs.copyFile({ srcPath: tempFilePath, destPath: dest, success: () resolve(dest), fail: reject }) }) }第二種是直接寫入適用于你從接口拿到的是 base64 或者 ArrayBuffer 的情況function saveBinary(buffer, name) { ensureDir() const dest ${DIR}/${name} return new Promise((resolve, reject) { fs.writeFile({ filePath: dest, data: buffer, encoding: binary, success: () resolve(dest), fail: reject }) }) }這里有個必須注意的點存進USER_DATA_PATH的路徑不能直接丟給image組件顯示——實際上是可以的image組件支持wxfile://開頭的本地路徑。但如果你要把它傳給web-view或者上傳接口就得走wx.uploadFile或者先轉(zhuǎn)成臨時路徑。另外USER_DATA_PATH里的文件在開發(fā)者工具的清除緩存操作后會被清空測試的時候別以為是代碼寫錯了。5.3 容量、清理與升級時的數(shù)據(jù)遷移因為總?cè)萘恐挥?200MB做圖片緩存一定要有清理策略否則用戶用幾個月之后就會開始寫入失敗。我的做法是給目錄里的文件加一個訪問時間索引存在Storage里每次打開頁面時檢查超過 7 天沒被訪問的用fs.unlinkSync刪掉總占用超過 150MB 時按時間從舊到新刪到 100MB 以下。function cleanUp(maxAge 7 * 24 * 3600 * 1000) { const now Date.now() let files [] try { files fs.readdirSync(DIR) } catch (e) { return } files.forEach((name) { const full ${DIR}/${name} try { const stat fs.statSync(full) if (now - stat.lastModifiedTime * 1000 maxAge) { fs.unlinkSync(full) } } catch (e) { // 單個文件失敗不影響整體清理 } }) }還要考慮版本升級的問題如果新版本改了存儲結(jié)構(gòu)比如從平鋪改成按日期分目錄一定要在onLaunch里寫一段兼容邏輯檢測舊結(jié)構(gòu)并按需遷移。小程序沒有用戶主動升級的概念用戶打開就是最新版本你不做兼容老用戶一進來數(shù)據(jù)就找不到了。另外提一句USER_DATA_PATH里的數(shù)據(jù)在用戶換手機、清微信緩存之后都會消失別把它當成可靠的服務端存儲重要數(shù)據(jù)該傳還是得傳回去。6. 一套可以直接抄的完整實現(xiàn)6.1 權(quán)限與拍照的工具函數(shù)把前面所有邏輯收攏到一個utils/media.jsconst ALBUM scope.writePhotosAlbum export function getAuthState(scope) { return new Promise((resolve) { wx.getSetting({ success: (res) resolve(res.authSetting[scope]), fail: () resolve(undefined) }) }) } export function takePhoto({ count 1, sourceType [camera] } {}) { return new Promise((resolve, reject) { wx.chooseMedia({ count, mediaType: [image], sourceType, sizeType: [compressed], camera: back, success: (res) resolve(res.tempFiles.map((f) f.tempFilePath)), fail: (err) (/cancel/i.test(err.errMsg) ? resolve([]) : reject(err)) }) }) } export function saveToAlbum(filePath) { return new Promise((resolve, reject) { wx.saveImageToPhotosAlbum({ filePath, success: () resolve(true), fail: reject }) }) } export function checkPrivacy() { return new Promise((resolve) { if (!wx.getPrivacySetting) return resolve(true) wx.getPrivacySetting({ success: (res) resolve(!res.needAuthorization), fail: () resolve(true) }) }) }工具層只做單一職責的事不做任何 UI 決策頁面層拿到的就是干凈的 Promise 和原始錯誤對象。這個分層在需求變更時特別值錢——哪天產(chǎn)品說保存前先加個水印你只需要改工具層的一個函數(shù)頁面一行不動。6.2 頁面結(jié)構(gòu)與交互代碼view classpage image wx:if{{imgPath}} src{{imgPath}} modewidthFix classpreview / view wx:else classplaceholder還沒有照片/view view classactions button sizedefault bindtaponShoot拍照/button button sizedefault bindtaponPick從相冊選/button button sizedefault bindtaponSave disabled{{!imgPath}}保存到相冊/button button sizedefault bindtaponKeepLocal disabled{{!imgPath}}存到小程序本地/button /view view wx:if{{showAuthTip}} classmask view classtip-box view classtip-title需要相冊權(quán)限/view view classtip-desc開啟后才能把照片保存到你的手機相冊/view button open-typeopenSetting bindopensettingonSettingBack去開啟/button view classtip-cancel bindtaponCloseTip暫不開啟/view /view /view /view頁面邏輯import { takePhoto, saveToAlbum, checkPrivacy } from ../../utils/media import { persistFile } from ../../utils/fs Page({ data: { imgPath: , showAuthTip: false }, async onShoot() { const ok await checkPrivacy() if (!ok) return this.setData({ showPrivacy: true }) const paths await takePhoto({ sourceType: [camera] }) if (paths.length) this.setData({ imgPath: paths[0] }) }, async onPick() { const paths await takePhoto({ sourceType: [album] }) if (paths.length) this.setData({ imgPath: paths[0] }) }, async onSave() { try { await saveToAlbum(this.data.imgPath) wx.showToast({ title: 已保存到相冊, icon: success }) } catch (err) { const msg err.errMsg || if (/auth deny|auth denied|authorize/i.test(msg)) { return this.setData({ showAuthTip: true }) } if (/cancel/i.test(msg)) return wx.showToast({ title: 保存失敗請重試, icon: none }) } }, async onKeepLocal() { try { const saved await persistFile(this.data.imgPath) this.setData({ imgPath: saved }) wx.showToast({ title: 已存入小程序本地, icon: success }) } catch (e) { wx.showToast({ title: 本地存儲失敗, icon: none }) } }, onSettingBack(res) { const granted res.detail.authSetting[scope.writePhotosAlbum] this.setData({ showAuthTip: false }) if (granted) this.onSave() // 授權(quán)成功后自動續(xù)上剛才的操作 }, onCloseTip() { this.setData({ showAuthTip: false }) } })重點看onSettingBack里那句自動續(xù)接——這是整套流程里體驗最好的一個細節(jié)。用戶點去開啟、在設置頁打開開關(guān)、返回小程序照片直接保存成功整個過程他只需要點兩次不需要回到頁面重新點一遍保存按鈕。6.3 多張連拍與上傳的并發(fā)處理如果業(yè)務是連拍多張然后批量上傳注意兩個限制一是chooseMedia的count上限是 9二是小程序的網(wǎng)絡請求有并發(fā)上限一般是 10 個同時。九張圖如果一次性Promise.all發(fā)出去加上頁面里其他請求很容易撞上限流。我的做法是寫一個簡單并發(fā)池把并發(fā)數(shù)卡在 3async function uploadBatch(paths, url) { const results [] const queue [...paths] const workers Array.from({ length: 3 }, async () { while (queue.length) { const path queue.shift() try { const res await new Promise((resolve, reject) { wx.uploadFile({ url, filePath: path, name: file, success: resolve, fail: reject }) }) results.push({ path, ok: true, data: res.data }) } catch (e) { results.push({ path, ok: false, error: e }) } } }) await Promise.all(workers) return results }這樣做的額外好處是失敗可以單獨重試——results里標了ok: false的用戶點一下重試失敗項就只傳那幾張不用九張全部重來。7. 實戰(zhàn)踩坑記錄與常見問題速查7.1 開發(fā)者工具和真機的差異清單現(xiàn)象開發(fā)者工具真機應對保存到相冊提示已保存到開發(fā)工具真正寫入系統(tǒng)相冊保存功能必須在真機上驗收權(quán)限彈窗模擬彈窗可一鍵重置真實系統(tǒng)彈窗只能彈一次測試時提前在設置里重置權(quán)限隱私協(xié)議可手動開關(guān)模擬嚴格按后臺聲明走提審前用真機完整跑一遍USER_DATA_PATH點清緩存即清空除非刪小程序否則保留清理邏輯要用真機驗證圖片方向基本不會出現(xiàn)異常部分安卓機型 EXIF 方向異常canvas 處理前先讀 orientation7.2 十個高頻問題與對應解法點了拍照完全沒反應先看scope.camera是不是false是的話用戶曾拒絕過走設置頁引導。保存提示成功但相冊里沒有多半是在開發(fā)者工具里測的真機再驗一次真機仍然沒有檢查是不是存到了小程序內(nèi)部目錄。首次彈窗后立刻保存失敗權(quán)限校驗延遲延遲 200ms 重試一次。安卓上照片橫著EXIF 方向問題canvas 處理前讀orientation做補償。保存報file not found臨時文件被回收了拿到路徑后第一時間落盤。真機報隱私未授權(quán)后臺沒聲明相冊寫入或前端沒接隱私彈窗。camera組件被彈窗遮不住用cover-view普通view無效。連拍九張上傳只成功幾張并發(fā)超限用并發(fā)池控制在 3 到 5。切換前后攝后拍照失敗組件重建未完成等bindinitdone再放開快門。本地存儲用了幾個月后寫入失敗容量到 200MB 上限了補清理邏輯。8. 參數(shù)調(diào)優(yōu)和后續(xù)還能怎么擴8.1 畫質(zhì)、閃光燈和前后攝的取舍camera組件的resolution有l(wèi)ow、medium、high三檔flash有auto、on、off、torch。經(jīng)驗值是做文字識別或者票據(jù)存檔resolution拉到high并且用torch常亮補光識別率能明顯提升做頭像或者社交分享medium加上flash: auto就夠圖小上傳快。takePhoto的quality和resolution是兩個獨立維度一個管最終輸出質(zhì)量一個管預覽和取幀質(zhì)量別搞混。還有一個常被忽略的優(yōu)化預覽尺寸和展示尺寸對齊。camera的寬高比如果不是按設備屏幕比例設置安卓上很容易出現(xiàn)畫面被拉伸尤其是橫屏頁面。穩(wěn)妥的做法是用wx.getSystemInfoSync拿到屏幕寬高按比例算出一個接近 4:3 或 16:9 的展示區(qū)域?qū)幙闪艉谶呉矂e拉伸。8.2 還能往哪些方向擴基礎功能跑通之后往下做通常有三個方向。一是加水印用canvas把圖片和文字合成一張新圖再保存注意canvas的尺寸要按wx.getImageInfo拿到的原始寬高設置不然會被縮放模糊。二是本地圖片墻把USER_DATA_PATH里的文件列表讀出來展示配上刪除和預覽適合做我的證件照我的打卡記錄這類功能。三是壓縮后上傳 失敗重傳把上傳隊列持久化到Storage即使小程序被殺掉下次打開還能把沒傳完的圖續(xù)上這個在弱網(wǎng)環(huán)境下特別有用。最后分享一個小技巧所有和媒體相關(guān)的操作我都會在開發(fā)階段加一個隱藏的調(diào)試面板把當前authSetting的完整狀態(tài)、最近一次錯誤的errMsg、以及臨時文件的實際字節(jié)數(shù)打在上面。上線前把它用一個變量關(guān)掉真機上出問題時讓測試同學截個圖比來回問你那邊具體情況是什么樣的高效太多。這套東西做一次后面的項目直接復制過去用就行。