首先看一下項(xiàng)目背景。小程序的概念是微信發(fā)明的，2016年左右內(nèi)測(cè)，17年不溫不火，18年忽然火爆起來(lái)。
當(dāng)年小龍給出的定義是：用完即走。這個(gè)理想很好，但一直沒(méi)辦法實(shí)現(xiàn)，因各大互聯(lián)網(wǎng)都希望用戶留下來(lái)，而不希望用戶流失。所以18年小程序進(jìn)行了大量的改進(jìn)，都與“用完即走”的理念背道而馳。微信也不再提用完即走，還加了一句：“走了還會(huì)回來(lái)”。
通常我們會(huì)用小程序和app做比較，其實(shí)小程序更像H5。尤其是出了webview之后，很多公司甚至直接用webview來(lái)做全流程，這種情況下，小程序就淪為了一個(gè)空殼。
小程序和H5進(jìn)行對(duì)比，就會(huì)發(fā)現(xiàn)小程序支持的功能更少。很多H5的風(fēng)騷玩法，在小程序上都不能實(shí)現(xiàn)。反過(guò)來(lái)說(shuō)，小程序又?jǐn)U充了一些對(duì)硬件的訪問(wèn)，但是不是特別多，最典型的就是截屏的callback，這個(gè)在H5是不存在的。
發(fā)布的時(shí)候因?yàn)槭切缕脚_(tái)，大家都不愿意投入，甚至多次傳出了“小程序要死了”的論調(diào)。這點(diǎn)和silverlight很像，區(qū)別是小程序現(xiàn)在活的很好，而且有越來(lái)越好的趨勢(shì)。當(dāng)然了這是現(xiàn)狀。當(dāng)時(shí)還是做的很艱辛的，各方面都不愿意投入資源來(lái)做。加上很多人擔(dān)心小程序會(huì)吸血app，更加恐慌這項(xiàng)新技術(shù)。
因此，攜程這邊自然而然形成了一個(gè)獨(dú)特的開發(fā)模式。
第一個(gè)就是，產(chǎn)品與開發(fā)一起提需求。
對(duì)于普通的業(yè)務(wù)來(lái)說(shuō)，通常產(chǎn)品會(huì)比較強(qiáng)勢(shì).小程序這里完全不同。小程序有兩個(gè)問(wèn)題：第一，競(jìng)品未必做的比我們好。第二，競(jìng)品可能有一些私有api，我們完全不能模仿。出于一些眾所周知的原因，有些小程序天生是有一點(diǎn)特權(quán)的。
此外，微信小程序發(fā)展速度非?？?，新的api出來(lái)了，開發(fā)比產(chǎn)品更加敏感，因此雙方要進(jìn)行合作，一起提需求。這也體現(xiàn)了“人人都是產(chǎn)品經(jīng)理”，開發(fā)也可以參與到產(chǎn)品設(shè)計(jì)中。
保持簡(jiǎn)單。這是微信倡導(dǎo)的。微信有個(gè)大殺招，限制size。不知道有多少人是老的小程序開發(fā)人員，最早的小程序size限制是1M，攜程當(dāng)時(shí)在1M的限制內(nèi)，上了好幾個(gè)BU的業(yè)務(wù)。
主要人員來(lái)自H5開發(fā)轉(zhuǎn)行。這個(gè)非常好理解。小程序雖然叫“程序”，寫法和一些應(yīng)用程序完全不同，卻和H5沒(méi)啥區(qū)別。很多mvvm框架寫法和小程序是一樣的，基本上沒(méi)什么學(xué)習(xí)成本。
超越敏捷的速度開發(fā)。這個(gè)是被逼的。一個(gè)起步項(xiàng)目，沒(méi)有太多節(jié)奏可言，搶一點(diǎn)是一點(diǎn)。舉個(gè)例子：如果在上高地，你會(huì)按照先打奶和DPS后打肉的順序嚴(yán)格執(zhí)行嗎？不會(huì)的，你會(huì)根據(jù)情況不斷調(diào)整，能占便宜的時(shí)候就打最近的，僅此而已。節(jié)奏完全是亂的。
有個(gè)游戲叫“混亂之治”，以前很不理解這個(gè)游戲的名字，覺得“混亂”是“混亂”，“治”是“治”。做了小程序之后則深有體會(huì)。
Webview登錄態(tài)問(wèn)題。Webview是小程序里一個(gè)很奇葩的存在，可以理解成微信向現(xiàn)實(shí)主義的妥協(xié)。原本是“忽悠”H5開發(fā)上小程序這條船，結(jié)果卻在小程序里又開了webview，讓大家用H5做開發(fā)。因此這里就涉及到登錄態(tài)同步的問(wèn)題。
通常，webview是做促銷用的，很少用于主流程。原因是webview的靈活性。這個(gè)算優(yōu)點(diǎn)也算缺點(diǎn)。優(yōu)點(diǎn)是可以熱更新，缺點(diǎn)是過(guò)于靈活容易觸碰微信的底線。
微信給webview做了限制，必須全屏，不準(zhǔn)遮擋。有一些黑科技可以繞過(guò)這些限制，但這會(huì)導(dǎo)致微信的封殺，完全是得不償失的。我們通常用webview的靈活性，來(lái)做促銷頁(yè)面。眾所周知，促銷是最容易發(fā)生需求變更的。
Webview做促銷也需要登錄態(tài)。可以做到向內(nèi)向外雙向打通，但是在促銷上，我們會(huì)進(jìn)行單項(xiàng)打通，也就是只允許小程序把登錄態(tài)無(wú)腦傳遞給webview，不允許反向傳。因?yàn)榉聪蚩赡軙?huì)污染登錄態(tài)。
圓形二維碼和普通二維碼的選擇。這里的圓形二維碼就是大家常見的，圓圓的那種小程序碼。這種是微信極力推薦的。我們會(huì)根據(jù)情況，進(jìn)行使用，而不是全盤使用。因?yàn)槠胀ǘS碼有更強(qiáng)的能力。
普通二維碼是方型二維碼，但是方型二維碼不全是普通二維碼，騰訊也提供了一個(gè)方型二維碼的能力。因?yàn)橛袛?shù)量限制我們一般不用。騰訊還支持用一個(gè)普通的url映射到小程序路徑。可以在小程序里寫個(gè)router，在官網(wǎng)設(shè)置一個(gè)綁定，把url映射成微信小程序的url。
這種做法會(huì)延伸出一個(gè)新的玩法，叫：通用二維碼。簡(jiǎn)單的說(shuō)就是，這個(gè)綁定關(guān)系，微信可以設(shè)，支付寶也可以設(shè)，百度也可以設(shè)。同一個(gè)二維碼，微信掃出來(lái)會(huì)進(jìn)入微信小程序，支付寶掃描可以進(jìn)入支付寶小程序，百度進(jìn)百度小程序。如果在其他平臺(tái)，不支持跳轉(zhuǎn)，例如iphone的相機(jī)，還可以正常打開H5頁(yè)面，因?yàn)閡rl可以做302跳轉(zhuǎn)。這一點(diǎn)會(huì)很方便線下鋪設(shè)二維碼。
看似無(wú)用的api的使用方式。微信提供了很多有意思的api，如何用是看大家的創(chuàng)意。
比如好多小程序都會(huì)攔截截屏事件。用戶截屏說(shuō)明用戶想分享東西，那么就在截屏的時(shí)候彈出分享按鈕，問(wèn)用戶是否想分享。這是一個(gè)順其自然的操作方式，根本不需要教育用戶。
我們提前上線了埋點(diǎn)，證明了截屏次數(shù)與訂單數(shù)成正比。說(shuō)明截屏的人是有下單意愿的，他們截屏，是為了分享給朋友，詢問(wèn)意見。那我們干脆直接把分享功能放進(jìn)去了。現(xiàn)在看來(lái)這個(gè)操作已經(jīng)是常規(guī)操作了，但當(dāng)時(shí)微信加這個(gè)api的時(shí)候，這個(gè)玩法還是很讓人叫好的。
下一個(gè)技術(shù)問(wèn)題是推送和分享。這個(gè)可能會(huì)觸及到微信的底線，這里提示一點(diǎn)：微信反對(duì)的是“惡意分享”，和“惡意推送”，而不是反對(duì)“分享”和“推送”，否則微信就不會(huì)提供這個(gè)能力了。這個(gè)大家可以想一想，兩者有多大的差別。
人員分配問(wèn)題。
微信小程序現(xiàn)在實(shí)際上是拆分成兩個(gè)小團(tuán)隊(duì)在做的，一個(gè)小團(tuán)隊(duì)做關(guān)鍵集群的業(yè)務(wù)，一個(gè)小團(tuán)隊(duì)做非關(guān)鍵集群的業(yè)務(wù)。關(guān)鍵集群，主要是主流程，下單。這個(gè)保持著非常傳統(tǒng)的scrum節(jié)奏，因?yàn)橛唵问且粋€(gè)很嚴(yán)肅的事情，來(lái)不得半點(diǎn)玩笑。
還有一個(gè)小團(tuán)隊(duì)在做促銷相關(guān)的開發(fā)。目前外界對(duì)小程序的認(rèn)知還是：適合拉新。這一點(diǎn)雖然微信官方不認(rèn)可，但是私下大家的做法，還是很看中了微信流量的。因?yàn)榇黉N的變化性很大，而且非常容易惹事情，因此促銷是有自己的專用集群的。而且能用webview的地方，是絕對(duì)不用原生做開發(fā)的，因?yàn)樵a涉及到審核問(wèn)題。雖然我們的審核速度還是很快的，但是畢竟是個(gè)很不可控的行為，促銷不喜歡這種不可控。
有些地方還是會(huì)用原生的，因?yàn)閣ebview的能力有些不足。這個(gè)后面我們馬上會(huì)提到。
黑科技。
第一點(diǎn)：沒(méi)有什么是一次跳轉(zhuǎn)不能搞定的。
這是我們?cè)趦?nèi)部群提到過(guò)的一句話。最初的出處是，有些團(tuán)隊(duì)需要用H5做頁(yè)面，但是又需要一些原生能力，例如分享。這一點(diǎn)是很多促銷所必需的能力。
這個(gè)需求的本質(zhì)，其實(shí)是“偷權(quán)限”。在webview要操作的東西，如果操作不了，那么就進(jìn)行一次跳轉(zhuǎn)，進(jìn)入原生頁(yè)面。在原生頁(yè)面可以擁有你所想要的所有權(quán)限。
例如，用戶想分享一個(gè)活動(dòng)鏈接，點(diǎn)了一個(gè)div，我們不可能在div上面掛分享事件，微信沒(méi)有提供這個(gè)能力。那怎么辦呢？可以跳轉(zhuǎn)一個(gè)頁(yè)面，上面有兩個(gè)按鈕，一個(gè)叫“分享給朋友”，一個(gè)叫“分享到朋友圈”。
為什么不直接出兩個(gè)按鈕，非要點(diǎn)完了再進(jìn)行一次選擇呢？這不增加用戶費(fèi)力度嗎？原因就是：只有進(jìn)行一次跳轉(zhuǎn)，才能偷到原生能力。而為了讓這次跳轉(zhuǎn)顯得順其自然，給用戶一個(gè)解釋，就不得不給出一個(gè)頁(yè)面，假裝在問(wèn)：你是要分享給朋友呢，還是要分享到朋友圈呢？事實(shí)上，真正做的是通過(guò)這一次跳轉(zhuǎn)，進(jìn)入原生頁(yè)面，使用原生能力。
而且，如果用戶操作回退，比如滑動(dòng)回退，還能回到之前的頁(yè)面，一切看起來(lái)是順其自然的。這樣，在用戶基本上沒(méi)有感受到傷害的情況下，偷取了原生能力。
如果一次不行，那就兩次。這個(gè)主要涉及到登錄。例如，一個(gè)促銷頁(yè)面，點(diǎn)擊一個(gè)按鈕，需要檢查權(quán)限。那么最簡(jiǎn)單的辦法就是跳轉(zhuǎn)到一個(gè)原生頁(yè)面，然后再跳回來(lái)。
這里有個(gè)問(wèn)題，回退之后，登錄態(tài)發(fā)生了變化。要處理刷新問(wèn)題。刷新往往是開發(fā)者最痛恨的操作，因?yàn)閯?dòng)不動(dòng)就少刷一部分。促銷團(tuán)隊(duì)上線壓力很緊迫，開發(fā)時(shí)間遠(yuǎn)遠(yuǎn)比用戶體驗(yàn)要寶貴。我們有時(shí)候就會(huì)直接犧牲用戶體驗(yàn)，刷全頁(yè)，性能差就加服務(wù)器，簡(jiǎn)單粗暴搞定。這個(gè)時(shí)候，有時(shí)候就不進(jìn)行回退了，直接再走一次前進(jìn)。
不要擔(dān)心層數(shù)問(wèn)題，逼急了就relaunch。這個(gè)主要也是針對(duì)促銷來(lái)說(shuō)的。主流程對(duì)層數(shù)是有嚴(yán)格要求的。但是促銷不一樣，層數(shù)用光了，需要跳轉(zhuǎn)導(dǎo)流的時(shí)候直接一個(gè)relaunch，抹掉歷史，就沒(méi)有層數(shù)問(wèn)題了。促銷很多事情都是簡(jiǎn)單粗暴，但是特別有效。
講了一大堆微信小程序的東西，其實(shí)我們還做了其他廠商的小程序。為了降低開發(fā)成本，有各種轉(zhuǎn)換工具，從微信小程序轉(zhuǎn)換到支付寶，百度，頭條甚至是H5。
各家小程序的api基本相同，有點(diǎn)像當(dāng)年javascript剛出來(lái)的時(shí)候的感覺，大家都相似，但是總是有點(diǎn)兼容性的差異。轉(zhuǎn)換工具只要解決這些差異即可。
最后一項(xiàng)，H5，可能有些和業(yè)界普遍的做法格格不入。業(yè)界普遍會(huì)使用H5轉(zhuǎn)微信小程序，但是總會(huì)有各種兼容性問(wèn)題。我們看來(lái)，H5的功能是多于小程序的，也就是說(shuō)H5是個(gè)全集，小程序相當(dāng)于一個(gè)子集，從全集轉(zhuǎn)子集，肯定會(huì)有各種不支持的東西出來(lái)。但是如果反過(guò)來(lái)想呢？從子集轉(zhuǎn)全集，先有小程序再轉(zhuǎn)H5，那么基本上不會(huì)碰到什么兼容問(wèn)題。這個(gè)工具還在開發(fā)中，這條路應(yīng)該是一個(gè)比較平坦的路，能少很多坑。
以上就是攜程酒店開發(fā)小程序的一些經(jīng)驗(yàn)。有一些是非技術(shù)的感想，甚至是吐槽，有一些是被逼無(wú)奈做出來(lái)的所謂的“黑科技”，希望能夠?qū)Υ蠹矣兴鶈l(fā)。
