第六彈！全球首個微信小程序（應用號）開發教程！通宵吐血趕稿！

你們好！博卡君原計劃是能在國慶假期前把小程序的開發教程作完，給你們一套完整、系統的東西，不過因爲最近小程序開發工具的拍照組件還沒有完善，不少功能還不能順利實現。我考慮了一下，以爲不如把拍照部分的一些代碼展現出來，一來是給你們一個思路，二來也讓你們看看目前開發工具存在的一些問題，我們一塊兒研究研究。

第九章：微信小程序拍照收納開發以及刪除名片等

仍是先來看看咱們今天的主題——拍照收納。

拍照收納分爲：上傳圖片／識別名片、手動填寫名片信息兩個路徑，這裏只說下拍照識別，手動填寫和前面的編輯名片是一樣的頁面，你們能夠翻翻以前的教程。

這個佈局很快，wxml 沒多少內容。

拍照收納的原理是收納名片功能，步驟是打開微信的拍照 API，同時支持選擇本地圖片 wx.chooseImage 接口。

取到圖片路徑需上傳圖片文件到後臺服務器，這裏參照文檔打印三個回調。

可是我發如今開發者工具測試的時候，沒有任何打印信息，後臺一樣也沒有接到我上傳過去的圖片。

選擇一張圖片，點擊打開後。控制檯的 console 沒有成功或者失敗的回調。

** 因爲尚處內測版本，暫時還不肯定是開發者工具上的 bug 仍是 API 接口問題，總之這裏影響了小程序開發，我已經寫郵件給微信作了反饋。**

若是圖片上傳成功，後臺取到圖片會去調一個識別信息操做，最後把識別到的信息傳給咱們前臺進行渲染，最後把信息保存到名片夾裏面，收納名片流程纔算走通。

再補充下名片夾頁面的名片刪除吧：

每一個名片夾後面都帶個刪除功能，這個功能是經過左滑出現。

點擊刪除，出現是否肯定刪除彈框（使用自帶的模態框組件）。

肯定與取消事件。

因爲這裏名片分爲，線上收納與線下收納。故而多了個 if 判斷，走的刪除 request 不是一個接口，其餘都相差很少。這裏最重要的是要獲取到 cardId，才能知道被刪除的是哪張名片。

名片的父元素綁定的所有事件，以及須要用到的一些自定義參數。Id 用在左滑上data-card_id 用在頁面跳轉與刪除上，data-card_type 用在判斷線上與線下名片。

cardId 能夠在 bindtouchstart 上取到，由於左滑事件是發生 bindtouchstart 事件上。

固然後面須要用到的值仍是先定義個 var 存起來。

刪除完以後還需從新刷新下首頁。

而且提高下用戶體驗，告訴用戶名片刪除成功。

最後一提，當列表不少時，咱們須要肯定點擊到的是那個信息。

上面的信息都是 block 循環出來的，bindtap 點擊事件，而後就是 id=」{{pms.type}}」，重點就是這個 id 來判斷被點擊的對象。

操做數據，咱們必定要先熟悉好數據的結構，故而在開發前和後臺必定要約定好數據結構，熟悉數據結構後，其實開發起來就如庖丁解牛，很是快速（你們開發了小程序後，有沒有對 zepoto 與 jQuery 產生反感？哈哈！）

好了，關於拍照組件的相關內容就寫到這裏吧！這一章內容就算是博卡君教程的完結篇了。雖然寫的內容中包含小程序開發工具的問題，不過我仍是推薦你們都嘗試調用一下拍照相關功能，看看這些問題在你的機器上會不會出現。按照微信的官方文檔，我嘗試給 weixin_developer@qq.com 那個郵箱發了郵件報告 bug。沒想到很快收到了官方回覆，確認了這點。但願儘快獲得更新版，一塊兒期待吧😄

最後，仍是歡迎程序猿朋友們在我們的 QQ 羣多交流，不少涉及具體狀況的技術問題，我們就在羣裏聊聊吧！

微信小程序 QQ 交流羣：

• 383863133

博卡君微信小程序開發教程回顧

• 博卡君全球首個微信小程序開發教程第一彈
• 博卡君全球首個微信小程序開發教程第二彈
• 博卡君全球首個微信小程序開發教程第三彈
• 博卡君全球首個微信小程序開發教程第四彈
• 博卡君全球首個微信小程序開發教程第五彈eng