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