全球首個微信小程序應(yīng)用號開發(fā)教程.docx

原計劃是能把小程序的開發(fā)教程做完，給大家一套完整、系統(tǒng)的東西，不過由于最近小程序開發(fā)工具的拍照組件尚未完善，很多功能還不能順利實現(xiàn)。我考慮了一下，覺得不如把拍照部分的一些代碼展示出來，一來是給大家一個思路，二來也讓大家看看目前開發(fā)工具存在的一些問題，咱們一起研究研究。第九章：微信小程序拍照收納開發(fā)以及刪除名片等還是先來看看我們今天的主題拍照收納。拍照收納分為：上傳圖片識別名片、手動填寫名片信息兩個路徑，這里只說下拍照識別，手動填寫和前面的編輯名片是同樣的頁面，大家可以翻翻之前的教程。這個布局很快，wxml 沒多少內(nèi)容。拍照收納的原理是收納名片功能，步驟是打開微信的拍照 API，同時支持選擇本地圖片wx.chooseImage接口。取到圖片路徑需上傳圖片文件到后臺服務(wù)器，這里參照文檔打印三個回調(diào)。但是我發(fā)現(xiàn)在開發(fā)者工具測試的時候，沒有任何打印信息，后臺同樣也沒有接到我上傳過去的圖片。選擇一張圖片，點擊打開后。控制臺的 console 沒有成功或者失敗的回調(diào)。由于尚處內(nèi)測版本，暫時還不確定是開發(fā)者工具上的 bug 還是 API 接口問題，總之這里影響了小程序開發(fā)，我已經(jīng)寫郵件給微信做了反饋。如果圖片上傳成功，后臺取到圖片會去調(diào)一個識別信息操作，最后把識別到的信息傳給我們前臺進行渲染，最后把信息保存到名片夾里面，收納名片流程才算走通。再補充下名片夾頁面的名片刪除吧：每個名片夾后面都帶個刪除功能，這個功能是通過左滑出現(xiàn)。點擊刪除，出現(xiàn)是否確定刪除彈框（使用自帶的模態(tài)框組件）。確定與取消事件。由于這里名片分為，線上收納與線下收納。故而多了個 if 判斷，走的刪除 request 不是一個接口，其他都相差不多。這里最重要的是要獲取到 cardId，才能知道被刪除的是哪張名片。名片的父元素綁定的全部事件，以及需要用到的一些自定義參數(shù)。Id 用在左滑上data-card_id用在頁面跳轉(zhuǎn)與刪除上，data-card_type用在判斷線上與線下名片。cardId 可以在bindtouchstart上取到，因為左滑事件是發(fā)生bindtouchstart事件上。當(dāng)然后面需要用到的值還是先定義個 var 存起來。刪除完之后還需重新刷新下首頁。并且提升下用戶體驗，告訴用戶名片刪除成功。最后一提，當(dāng)列表很多時，我們需要確定點擊到的是那個信息。上面的信息都是 block 循環(huán)出來的，bindtap 點擊事件，然后就是id=”pms.type”，重點就是這個 id 來判斷被點擊的對象。操作數(shù)據(jù)，我們一定要先熟悉好數(shù)據(jù)的結(jié)構(gòu)，故而在開發(fā)前和后臺一定要約定好數(shù)據(jù)結(jié)構(gòu)，熟悉數(shù)據(jù)結(jié)構(gòu)后，其實開發(fā)起來就如庖丁解牛，非?？焖伲ù蠹议_發(fā)了小程序后，有沒有對 zepoto 與 jQuery 產(chǎn)生反感？哈哈?。┖昧耍P(guān)于拍照組件的相關(guān)內(nèi)容就寫到這里吧！雖然寫的內(nèi)容中包含小程序開發(fā)工具的問題，不過我還是推薦大家都嘗試調(diào)用一下拍照相關(guān)功能，看看這些問題在你的機器上會不會出現(xiàn)。按照微信的官方文檔，我嘗試給那個郵箱發(fā)了郵件報告 bug。沒想到很快收到了官方回復(fù)，確認了這點。希望盡快得到更新版，很多學(xué)編程的朋友最關(guān)心的問題就是小程序的開發(fā)難度。我個人覺得，微信小程序的開發(fā)難度不算高，最主要的是要時時刻刻遵守微信給我們劃定的一些框架和規(guī)范。如果你有前端開發(fā)基礎(chǔ)，那上手會非常快，相比之下，原生 app 開發(fā)難度就大了很多。在用戶體驗方面，其實微信小程序開發(fā)和原生 app 在體驗方面在日常應(yīng)用中可以做到非常接近了。不同點就是，微信小程序開發(fā)學(xué)習(xí)周期比較快，開發(fā)周期較短，維護起來也快，而原生 app 的開發(fā)需要全部重新學(xué)習(xí)它的語言，學(xué)習(xí)周期很長，開發(fā)周期也很長，同時發(fā)布需要很長時間的審核期，在迭代方面速度比較慢。對于做前端的朋友，適應(yīng)小程序最需要完成一個開發(fā)理念上的大轉(zhuǎn)變，從操作 DOM 轉(zhuǎn)變?yōu)椴僮鲾?shù)據(jù)，項目組件化、模板化，需要使用的組件直接調(diào)用。換言之，小程序絕對不是Html 5 + javascrpt 封裝一下那么簡單，為了讓用戶體驗更加接近原生 app，騰訊專門開放了大量接口和組件，這些都是 html 本身所不具備的。我在一開始接觸到這些東西的時候，也琢磨了很久才漸漸適應(yīng)小程序的節(jié)奏。有朋友也問過，連夜吐血趕工了近兩周才基本完成一個小程序，是不是微信小程序的開發(fā)工作量比較大，我覺得這要具體看你的項目重不重，輕量型的項目團隊開發(fā)只需要一兩周，但也可能在開發(fā)中碰到很多需要攻克的技術(shù)難點。此外，如果你的需求一直在變化，或者與不熟練的隊友在開發(fā)，都是有可能影響進度。畢竟是為了第一時間同時完成開發(fā)和教程的進度，如果團隊協(xié)作，應(yīng)該不需要這么辛苦。最后談一點，在這個項目中一直是以個人開發(fā)者的角色來做的，我個人覺得，如果你有數(shù)據(jù)支持，而且懂后臺開發(fā)和 mysql，那完全不妨一試。咨詢更多微信小程序?qū)W習(xí)班信息，請點擊以下微信公號文章鏈接了解(或掃以下二維碼詳細了解)：/s?_biz=MjM5ODgwNjE2Mw=&mid=2247483668&idx=1&sn=91187cf49bef9d5b29adb4a9cb4c1cd9&chksm=a6c456e891b3dffe9cef42f514bfc3