全球首個(gè)微信小程序應(yīng)用號(hào)開(kāi)發(fā)教程.docx

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