資訊專欄INFORMATION COLUMN
摘要：注拍照功能在某些機型上還有閃退現(xiàn)象，希望微信官方可以盡快完善。這涉及到函數(shù)，這是微信小程序內(nèi)置的，用來上傳一個文件，有幾個點要說下綠色框要上傳文件資源的路徑，也就是我們相冊里選擇的圖片路徑。
我們喜歡小程序的原因之一就是它提供了更多和手機系統(tǒng)交互的接口，比如今天要說的這個從相冊選擇 / 拍照功能。注：拍照功能在某些機型上還有閃退現(xiàn)象，希望微信官方可以盡快完善。
在上一篇中我們搞定了相冊的新建和列表功能，本節(jié)我們嘗試往相冊內(nèi)傳圖功能，這需要小程序和服務(wù)器端的雙重支持。
還是老規(guī)矩，我們先實現(xiàn)服務(wù)器端。
服務(wù)器端我們需要數(shù)據(jù)庫的支持，還記得第8篇說的那個photo數(shù)據(jù)表么，在這里我們進行一次修改然后再新增一個表。
相冊表
存儲每次照片的提交以及對本次提交的備注。
相冊圖片表
實際存儲每個照片，包含圖片的路徑等，其中photo_id為photo表的主鍵ID。
現(xiàn)在有了數(shù)據(jù)表我們再做兩個控制器，分別用來服務(wù)于photo和photo_item表。
接下來我們來計劃一下添加相片的邏輯，看下圖。
當(dāng)點擊了“提交”按鈕后，會新家一條photo記錄然后返回給小程序，小程序開始實際的傳圖過程并攜帶新photo記錄的id來填充photo_item表。
這里有一點要注意的，就是針對于photo記錄的新建直接使用yii2的restful --- create 就可以了，但是對于傳圖不一樣，涉及到接收圖片、存儲等等等等。
因此我們對PhotoItemController的create方法進行了重寫，如下圖，這里也為你展示了yii2中restful如何重寫內(nèi)置的action。
然后我們自己定義一個create，看下圖。
通過yii2的UploadedFile類來接收小程序過來的圖片并且保持，同時建立一條記錄。
其中的N8Folder::createItemPath主要用于生成有效的物理路徑，感興趣的可以在github倉庫上看看。
ok，接下來我們來處理小程序端
小程序在小程序端分兩步
1、請求服務(wù)器POST /xcx/photos 新建一條photo記錄（所屬相冊、描述）
2、新建photo記錄成功，攜帶文件請求POST /xcx/photo-items 新建一條photo_item記錄（所屬相冊ID、photoID、圖片路徑、類型等）
正式開始
新建一條photo記錄
這個過程涉及到了一個小程序組件 -- picker，也就是滾動選擇器，它能接收一個數(shù)組或?qū)ο髷?shù)組，我們這里使用它來選擇所屬相冊，先看效果。
當(dāng)頁面準(zhǔn)備好后我們?nèi)シ?wù)器拿到相冊列表，看代碼。
代碼實現(xiàn)了如何把對象數(shù)據(jù)渲染成選擇器。
接下來我們就可以提交數(shù)據(jù)新建photo了，這仍是一個表單事件formSubmit，當(dāng)然為了體驗在用戶端并不會感覺到photo和photo_item新建之間的差別，只需點擊一次按鈕。
因此在提交表單時候我們需要對是否選擇了相冊以及是否傳圖進行判斷。
關(guān)于photo記錄的建立并不復(fù)雜，我們之前學(xué)過新建相冊，思路都一樣，POST /xcx/photos 即可，要說的是上傳圖片，我們看下面的代碼
在上面的代碼中涉及到一個循環(huán)，因為我可能一次選擇多個圖片然后點擊提交，所以核心是這個uploadImage函數(shù)，我們來看一看它。
這涉及到wx.uploadFile函數(shù)，這是微信小程序內(nèi)置的，用來上傳一個文件，有幾個點要說下
綠色框 要上傳文件資源的路徑，也就是我們相冊里選擇的圖片路徑。
藍(lán)色框 文件對應(yīng)的 key，在yii2上通過這個名字獲得文件對象。
紅色框 有時候上傳文件的時候還需要一些其他數(shù)據(jù)，可以都放到formData內(nèi)。
這樣就完成了上傳圖片功能。
演示下上面對大家講解了主要函數(shù)和思路，全部代碼大家可以在github上拉代碼下來看，另外準(zhǔn)備了一個演示視頻，可以看下 點擊查看演示
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/26058.html
摘要：本文作者來自授權(quán)地址已解決在里設(shè)置了圖片路徑在里正常無誤但是在手機上是沒有顯示的解決辦法這段話位置放那么偏問題描述代碼截圖模擬器里的效果手機里的效果未解決用小程序自帶的底部導(dǎo)航組件的話沒法實現(xiàn)跟微信原生底部小紅點或者消息提醒的功能已解決使用 本文作者：dongtao 來自：授權(quán)地址 1.已解決在app.wxss里設(shè)置了圖片路徑,在IDE里正常無誤,但是在手機上是沒有顯示的,解決辦法...
摘要：本文作者來自授權(quán)地址已解決在里設(shè)置了圖片路徑在里正常無誤但是在手機上是沒有顯示的解決辦法這段話位置放那么偏問題描述代碼截圖模擬器里的效果手機里的效果未解決用小程序自帶的底部導(dǎo)航組件的話沒法實現(xiàn)跟微信原生底部小紅點或者消息提醒的功能已解決使用 本文作者：dongtao 來自：授權(quán)地址 1.已解決在app.wxss里設(shè)置了圖片路徑,在IDE里正常無誤,但是在手機上是沒有顯示的,解決辦法...
摘要：，至此咱們的微信小程序的簡單使用及了解算是分享完了，畢竟個人也是道行有限，沒有鉆研太深，這些只是本人在實際項目開發(fā)過程中用到和總結(jié)的經(jīng)驗，有太多不足或不對的地方，希望大家多多給予指出與改正，咱們一起來共同學(xué)習(xí)與進步 微信小程序是一種不需要下載安裝即可使用的應(yīng)用，在國內(nèi)它在企業(yè)推廣中的受歡迎度以及就這兩年的使用及普及熱度，然而就是因為它的備受歡迎度以及越來越被企業(yè)所重視，也就形成了咱們開...
摘要：，至此咱們的微信小程序的簡單使用及了解算是分享完了，畢竟個人也是道行有限，沒有鉆研太深，這些只是本人在實際項目開發(fā)過程中用到和總結(jié)的經(jīng)驗，有太多不足或不對的地方，希望大家多多給予指出與改正，咱們一起來共同學(xué)習(xí)與進步 微信小程序是一種不需要下載安裝即可使用的應(yīng)用，在國內(nèi)它在企業(yè)推廣中的受歡迎度以及就這兩年的使用及普及熱度，然而就是因為它的備受歡迎度以及越來越被企業(yè)所重視，也就形成了咱們開...
閱讀 2571·2021-09-23 11:21
閱讀 1881·2021-09-22 15:15
閱讀 970·2021-09-10 11:27
閱讀 3440·2019-08-30 15:54
閱讀 651·2019-08-30 15:52
閱讀 1335·2019-08-30 15:44
閱讀 2349·2019-08-29 15:06
閱讀 2972·2019-08-28 18:21
