微信應(yīng)用號終于來了!我們用一個上午搞定了它。經(jīng)過一個上午的緊張開發(fā),愛范兒旗下的電商平臺玩物志(微信公眾號:)率先提交了微信平臺第一個小程序。玩物志是愛范兒立足 “新生活引領(lǐng)者” 的定位,為用戶提供具有時代氣質(zhì)、高品質(zhì) “新生活必需品” 的微信內(nèi)容電商。因此當(dāng)拿到了這個寶貴的開發(fā)內(nèi)測資格后,我們決定在微信上開發(fā)和遷移玩物志電商服務(wù),用一種更貼近用戶的方式來貫徹愛范兒微信電商的實踐。應(yīng)用號開發(fā)到底跟原生 App 開發(fā)或者 HTML 5 應(yīng)用開發(fā)有什么不同?愛范兒(微信號:ifanr)決定將這幾個小時的成果分享給大家。
步驟雖然都是在微信公眾平臺的體系下,但小程序本身與訂閱號及服務(wù)號是完全獨立的,需要重新注冊。目前界面較為簡潔,沒有太多的運營相關(guān)的功能web小程序代碼,這些功能應(yīng)該會在以后小程序大規(guī)模使用之后逐漸被完善。
如果要綁定開發(fā)者的話,還需要開發(fā)者自己通過掃碼來通過驗證。
小程序平臺目前的重頭戲都在它的桌面端開發(fā)工具上(待會兒會說到),web 平臺目前只是做一些開發(fā)者綁定和應(yīng)用信息處理的事情,web 上面*重要的部分個人認為還是其文檔說明。點擊進去之后能看到從設(shè)計到開發(fā)到運營的整體說明,看完之后,一個成熟的開發(fā)團隊?wèi)?yīng)該可以很快就完成客戶端業(yè)務(wù)的遷移。從這套文檔的成熟度可以看出微信團隊對這個千呼萬喚始出來的小程序的重視。在設(shè)計的說明部分,不但已經(jīng)有了 也已經(jīng)有了 demo 的頁面讓你去使用,從程序效率提高的關(guān)鍵點到視覺規(guī)范都一一做了說明,可以說一開始就達到了蘋果開發(fā)者指南的標(biāo)準(zhǔn)。在開發(fā)的說明部分,已經(jīng)給出了能開發(fā)出一個完全可用的電商應(yīng)用的幾乎所有接口,這一點讓我們感到很欣慰。在下載了桌面端微信 web 開發(fā)者工具并結(jié)合這份文檔學(xué)習(xí)、跑完 demo 之后,能感覺到小程序本身的強烈特殊性:糾正大家的誤讀,小程序不是 HTML5 應(yīng)用。因為它是一個封閉的程序運行環(huán)境。雖然是用標(biāo)準(zhǔn)的 JS 語言來編寫,但是在這個環(huán)境里是無法打開任何外部的頁面的。它不能夠跳轉(zhuǎn)或者說只能在內(nèi)部的相對路徑進行跳轉(zhuǎn),同時你也不能使用各種調(diào)用本地資源例如 DOM 樹、File 等資源的外部 JS 類庫,例如 等?;旧暇褪怯? 語言重新定義了一個開發(fā)框架,用來開發(fā)富客戶端。在小程序推出之后,有人說接受了簡單的前端培訓(xùn)的初級程序員將供不應(yīng)求,個人認為這種說法是不靠譜的。小程序雖小,但是每一個都是一個完備的應(yīng)用,需要開發(fā)者有應(yīng)用開發(fā)的整體意識。另外,坦白來說, 并不是一個很好的開發(fā)嚴(yán)謹(jǐn)應(yīng)用的語言,用 來構(gòu)建富客戶端需要開發(fā)者對代碼有更深的理解。
在了解完之后,就要上手開始開發(fā)了。開發(fā)工具也是通過掃碼登錄的,在登錄之后,在新建項目部分,通過選擇本地的開發(fā)目錄并 “添加項目”,工具會在該文件夾自動生產(chǎn)基礎(chǔ)的框架代碼。目前沒有做項目類別的區(qū)分,比如游戲、工具之類的,只是一個基礎(chǔ)的 main 的入口。
如果是小項目的話,個人覺得在這個開發(fā)工具本身進行編輯就已經(jīng) ok 了。整個 IDE 的感覺非常清爽,無論對 JS 還是 CSS 的各種提示和補全都非常靈敏和詳細。代碼從結(jié)構(gòu)上來看也是很清晰的,配置文件和 CSS 文件都重新進行了 wx 作為開頭的命名。我們花了一個上午的時間web小程序代碼,基本上將玩物志(微信公眾號:)的網(wǎng)頁端移植了過來。在這里要注意的是,在資源文件方面,本地調(diào)試是可以使用本地的文件、圖片資源的,但是如果要手機預(yù)覽調(diào)試的話,就必須調(diào)用網(wǎng)絡(luò)資源,所以要注意相對路徑的移植。
心得對于電商應(yīng)用來說,*關(guān)鍵的是支付,玩物志一開始就具有微信支付的權(quán)限,這次小程序第一時間就開放了微信支付的 API,這也是我們第一時間就要移植電商服務(wù)的原因??梢韵胍娢⑿艑ι睢⒎?wù)類小程序的期待。
除了在小程序的接口支持上,小程序的模板消息也充分考慮到了電商服務(wù)的需求??梢栽O(shè)置不同的樣式和標(biāo)題。這相對之前簡陋而且被濫用的模板消息是一個很大的進化。這也預(yù)示了小程序相對訂閱號、服務(wù)號將會有更加好的用戶交互能力,微信將成為一個更好的消息應(yīng)用平臺。
耗時整個開發(fā)移植過程,我們的 5 個人的開發(fā)小組使用了一個上午的時間(注冊平臺賬號,閱讀、學(xué)習(xí)文檔的部分不算)。對于成熟的開發(fā)團隊來說,整體開發(fā)體驗還是較為良好的,目前在使用 react 框架的團隊?wèi)?yīng)該會感到小程序的框架很親切。當(dāng)然,如果你的代碼 DOM 操作很多的話,那改起來就會很痛苦了,那只能建議要重構(gòu)了。由于我們之前使用的 JS 框架與小程序的框架有很大相似性,所以這方面并沒有花太大的時間改動。主要是整體過濾一遍,進行了微信特有接口的替換。這里要稱贊一下微信開發(fā)者工具的編譯效率,能讓我們在找到區(qū)別并修改之后能快速驗證。期間有模糊的地方,也得感謝微信開發(fā)團隊朋友們的即時反饋和大力支持。