摘要： 怎樣將一個(gè)「服務(wù)號(hào)」改造成為「小程序」?全球首個(gè)微信應(yīng)用號(hào)開發(fā)教程第六彈。 鈦媒體注：鈦媒體作者博卡君對(duì)于“應(yīng)用號(hào)的最終形態(tài)“與“怎樣將一個(gè)「服務(wù)號(hào)」改造成為「小程序」“的話題上，有著自己的獨(dú)特的理解。他想要用第三方工具的實(shí)例，來演示開發(fā)過程。今天，他為我們帶來《微信小程序分組開發(fā)與左滑功能實(shí)現(xiàn)》的內(nèi)容。感興趣的朋友，也不要錯(cuò)過此前鈦媒體發(fā)布的第一彈、第二彈和第三彈、第四彈、第五彈中的精彩內(nèi)容。第九章：微信小程序拍照收納開發(fā)以及刪除名片等 還是先來看看我們今天的主題““拍照收納。 拍照收納分為：上傳圖片/識(shí)別名片、手動(dòng)填寫名片信息兩個(gè)路徑，這里只說下拍照識(shí)別，手動(dòng)填寫和前面的編輯名片是同樣的頁面，大家可以翻翻之前的教程。 這個(gè)布局很快，wxml 沒多少內(nèi)容。 拍照收納的原理是收納名片功能，步驟是打開微信的拍照 API，同時(shí)支持選擇本地圖片 wx.chooseImage 接口。 取到圖片路徑需上傳圖片文件到后臺(tái)服務(wù)器，這里參照文檔打印三個(gè)回調(diào)。 但是我發(fā)現(xiàn)在開發(fā)者工具測(cè)試的時(shí)候，沒有任何打印信息，后臺(tái)同樣也沒有接到我上傳過去的圖片。 選擇一張圖片，點(diǎn)擊打開后?？刂婆_(tái)的 console 沒有成功或者失敗的回調(diào)。 由于尚處內(nèi)測(cè)版本，暫時(shí)還不確定是開發(fā)者工具上的 bug 還是 API 接口問題，總之這里影響了小程序開發(fā)，我已經(jīng)寫郵件給微信做了反饋。 如果圖片上傳成功，后臺(tái)取到圖片會(huì)去調(diào)一個(gè)識(shí)別信息操作，最后把識(shí)別到的信息傳給我們前臺(tái)進(jìn)行渲染，最后把信息保存到名片夾里面，收納名片流程才算走通。 再補(bǔ)充下名片夾頁面的名片刪除吧： 每個(gè)名片夾后面都帶個(gè)刪除功能，這個(gè)功能是通過左滑出現(xiàn)。 點(diǎn)擊刪除，出現(xiàn)是否確定刪除彈框(使用自帶的模態(tài)框組件)。 確定與取消事件。 由于這里名片分為，線上收納與線下收納。故而多了個(gè) if 判斷，走的刪除 request 不是一個(gè)接口，其他都相差不多。這里最重要的是要獲取到 cardId，才能知道被刪除的是哪張名片。 名片的父元素綁定的全部事件，以及需要用到的一些自定義參數(shù)。Id 用在左滑上 data-card_id 用在頁面跳轉(zhuǎn)與刪除上，data-card_type 用在判斷線上與線下名片。 cardId 可以在 bindtouchstart 上取到，因?yàn)樽蠡录前l(fā)生 bindtouchstart 事件上。 當(dāng)然后面需要用到的值還是先定義個(gè) var 存起來。 刪除完之后還需重新刷新下首頁。 并且提升下用戶體驗(yàn)，告訴用戶名片刪除成功。 最后一提，當(dāng)列表很多時(shí)，我們需要確定點(diǎn)擊到的是那個(gè)信息。 上面的信息都是 block 循環(huán)出來的，bindtap 點(diǎn)擊事件，然后就是 id=“{{pms.type}}“，重點(diǎn)就是這個(gè) id 來判斷被點(diǎn)擊的對(duì)象。 操作數(shù)據(jù)，我們一定要先熟悉好數(shù)據(jù)的結(jié)構(gòu)，故而在開發(fā)前和后臺(tái)一定要約定好數(shù)據(jù)結(jié)構(gòu)，熟悉數(shù)據(jù)結(jié)構(gòu)后，其實(shí)開發(fā)起來就如庖丁解牛，非?？焖?大家開發(fā)了小程序后，有沒有對(duì) zepoto 與 jQuery 產(chǎn)生反感?哈哈!) 好了，關(guān)于拍照組件的相關(guān)內(nèi)容就寫到這里吧!這一章內(nèi)容就算是博卡君教程的完結(jié)篇了。雖然寫的內(nèi)容中包含小程序開發(fā)工具的問題，不過我還是推薦大家都嘗試調(diào)用一下拍照相關(guān)功能，看看這些問題在你的機(jī)器上會(huì)不會(huì)出現(xiàn)。按照微信的官方文檔，我嘗試給 weixin_developer@qq.com 那個(gè)郵箱發(fā)了郵件報(bào)告 bug。沒想到很快收到了官方回復(fù)，確認(rèn)了這點(diǎn)。希望盡快得到更新版，一起期待吧?

« 又一個(gè)系統(tǒng)決定離開！這些遠(yuǎn)去的"小眾"手機(jī)系統(tǒng) | 香港將迎來首家獨(dú)角獸公司 曾獲蔡文勝投資 »