施德來:有贊電商小程序的實踐


歡迎大家前往騰訊雲+社區,獲取更多騰訊海量技術實踐干貨哦~

施德來,畢業於浙江大學計算機學院。曾任職於淘寶、網易,現任有贊前端技術負責人、電商小程序技術負責人。

因為有贊剛好在移動電商這個賽道上,整個行業都推動着我們向前走。海量的商家有各自的需求,不斷地在業務上督促我們做一些事。這次我代表團隊為大家匯報一下我們被商家推動着做了哪些事,主要是關於技術方面的。

我眼中的小程序

首先和大家分享一下我眼中的小程序到底是什么?關於小程序,有兩大矛盾困擾着所有的移動開發者。一個是H5跨平台的開發速度很快,但是打開速度很慢,Native能力差。這是它的開放性所決定的,這是一個矛盾。另外一個矛盾是Native的APP體驗流暢、功能齊全,但是開發速度極慢、更新麻煩,而且ios和安卓要重復開發。

Write Once,Run Anywhere. 我知道大家都很喜歡這句話,我在后面加了一個Like Native。為了這個目標各大公司都給出了自己的方案,比如Google給出的方案是PWA,因為國內互聯網的現狀,這個PWA最多可以做到離線緩存、通知推送,所以其實PWA不是一個出路。其他也有一些方案,比如說Hybrid App,PhoneGap、lonic,充分使用Native的能力,但性能終究還是有問題的。我給大家提供另外一個方案:React Native、Weex,充分利用Native的能力,同時也能達到一處編寫到處執行,而且也能夠寫得很快,至少不用寫兩次。但是它也有一些問題,事實上前端工程師是不可能拋開安卓和ios獨立進行開發的,一定需要大量的適配,但這已經算是很大的進步了。

在我眼中現在只有一個選擇:JS Native APP,微信本質上就是做JS Native APP,也就是小程序。它擁有JS Native APP的各種優點,再也不需要安卓的工程師和ios的工程師幫助解決系統問題了。結合Win7本身的公眾號、瀏覽器功能,以及它底層的帳號能力,事實上微信已經有點像操作系統了。所以最終的結構是WeChat Operating System,什么事情都可以在微信里面完成,事實上就是這樣。

有人提出這樣的觀點,隨着微信小程序生態的完善,中國的操作系統可能就是要靠騰訊了。這就是我理解的小程序是JS Native APP中未來相當有競爭力的方案,因為一半以上的人都使用微信。很多H5中需要高階能力才能解決的問題,被小程序用降維解決了。小程序為什么要打包上傳?其實是因為微信可以通過一定的策略讓這個包提前下載,大家如果推送過小程序新版本的話就會知道,包是分批更新的,我相信微信底層有更新這個小程序代碼或小程序包的機制。它省去了H5中我們要做的大量工作,比如原先要完成的異步加載等等。這些都是為了讓打開速度更快,但如果代碼被預先加載好了這些問題就都沒有了。

以碼農的視角介紹有贊微商城小程序

下面我將以碼農的視角介紹一下有贊微商城小程序,或許哪天你在做一個小程序的時候,又需要有電商的功能。這時你可以通過小程序之間的跳轉,在有贊注冊一個小程序,把課程、服務等跳轉到有贊這邊,進行完購買流程再跳回去。在H5的年代我們有幾千個商家就是這么做的,在他們的APP中嵌入了我們的H5,其實在小程序里面也是可以這么做的。

簡單來講,有贊介入得很早,也有過彷徨。小程序是在2016年9月21日開始內測,2017年1月9日正式發布。其實我們2016年就介入了小程序,當時對於小程序的理解又結合了小程序基於地理定位的特點,也就是發現附近的小程序。我們覺得餐飲是很好的切入口,當然電商是我們的老本行,我們很快就做出了電商的小程序。在1月9日小程序發布的時候,我們同時也發布了有贊的電商小程序,那時只能將代碼生成給到商家,讓商家自己提交。因為當時微信沒有提供相關的平台型能力,所以直到現在有些商家還是用我們一年前的代碼。其實外界也對小程序有很多的質疑,大概持續了半年不到,我們在這方面的投入其實也不多。隨着微信官方推出了很多新的功能,大家對於小程序越來越清晰,商家的需求也越來越大,2017年下半年我們開始發力,商家也開始更重視起來,到了2018年有贊小程序開始爆發。

首先聲明一下這個數字是被我偽裝過的,因為現在不能給大家透露真實的數據,這是購買有贊小程序的每個月的數量,趨勢是沒有問題的。大家可以簡單看到,一開始的趨勢是下降的。2017年1月的購買量比較大,剛發布的時候大家都過來用,后來發現好像也沒什么。因為那時很多能力沒有開放,群的能力、附近的小程序都沒有開放,后來慢慢了提供更多的能力,大家慢慢開始有感覺了。

下面來介紹一下我們在小程序里面做了哪些功能。如果大家了解有贊就會知道,我們是把H5里面大量的核心能力全部搬到小程序,同時也做了小程序特有的能力。后台包括店鋪、商品、訂單、客戶、數據、營銷工具、營銷渠道,市面上有的各種營銷工具基本上我們都做了,有些是我們首創的,有些是參考的。

這是我們頁面的編輯器,左邊是編輯,右邊是編輯出的頁面,所有頁面都是商家自己編的。現在我們已經實現了每秒5萬筆訂單的處理能力,多門店選擇可以根據地理位置選擇門店。對於賣水果、賣蛋糕的商家比較有用。其他功能還有拼團、新人有禮、瓜分券等。瓜分券就是分享給自己的小伙伴,比如5個人來領才能領到。這是我們小程序獨有的功能,因為小程序在群的能力上,分享頁面更方便一些。

簡單來講,我們的小程序包袱重、工作量大、場景復雜。首先,商家想要所有H5微商的功能,只是想要的比例不一樣,我們要選擇性地去搬。第二,我們要服務海量的商家,提供他們需要的技術服務,我們要生成海量的小程序。第三,H5微商城大量模塊正在重構。這也是我們的工作環境。

技術上的探索和積累

接下來講一下有關技術上的探索和積累,第一個問題是如何同時產出海量獨立的微商城小程序,每個商家一個版本還不同。微信是提供這種能力的,同一份代碼在不同的ID提交后到微信的開發平台可以生成一個模板ID,拿到模板ID后所有商家在我們的后台批量提交小程序。在提交的時候把商家特有的配置,包括商家的APP ID和底部導航信息一起提交給微信,微信再開始審核。

有贊擁有公共版的小程序和專享版的小程序,一套代碼兩個馬甲,共用業務代碼。如果小程序的名字是自己的,類似於垂直商城這種有自己的店且完全獨立的小程序就屬於專享版。公共版是免費的,所有有贊的商家都可以使用。事實上兩者的功能基本是一樣的,只是底層的導航不一樣,本質上我們需要在一套代碼里面輸出兩種小程序。左圖為公共版,右圖為專享版。在一個倉庫里輸出兩種小程序,解法其實很簡單。一般而言我們小程序有一個APP的json,羅列小程序中基本有哪些頁面。我們另外羅列出了基於原先的小程序額外多出的頁面,底部的導航條信息是獨立的,這是不會被合並的。

富文本現在已經不是什么大問題了,在以前對我們來說卻是比較難解決的問題。最早的時候富文本是圖文編輯的組件,我們最早用的是wxParse,這是開源項目,它能夠比較好的解決問題。但是它存在兩個問題,一是沒有辦法很好地處理表格、列表標簽,二是它最多只能嵌套11層。一般來說是沒有問題的,但是有些商家會從第三方的編輯器編輯源碼,再復制到有贊的頁面編輯器里。第三方編輯器有的嵌了幾十層,在小程序中就會出現很多內容丟失的情況。在2017年7月10日官方推出了一個rich-text,也存在一些問題。總結下來是svg無法在組件里面正常展示,能夠展示但不能縮放。

下圖是我們整個包大小的變遷,剛剛提到上半年發力,到11月份已經有1.4M,按照這個趨勢再過兩個月就要超過2M的限制了。我們用了一個叫做wxapp-webpack-plugin的開源工具,因為業務場景不一樣可能需要二次開發。它可以幫助我們只打包有用的代碼,在H5的生態里是最簡單的東西,在小程序里會稍微有點麻煩,我們的結果就是把0.3的包變成0.93兆。12月份微信推出了分包,所有的包加起來4M,每個包不能超過2M。

接下來還有兩部分,一是如何提高開發效率,二是如何提高穩定性。我們在2017年的1月開源了有贊小程序的組件庫,我們擁有組件庫的傳統,最近也改用了官方推薦的自定義組件的寫法。在開發的過程當中,同樣也會涉及到接口的東西,有切換的問題,有接口轉發的問題。在這里推薦大家嘗試使用ZanProxy,現在我們的小伙伴沒有這個工具就沒有辦法寫代碼,它可以很方便地轉發。我們也支持自定義插件,做一些不同業務場景需要的關於接口文件、轉發以及改造的相關需求,包括在H5的頭里面加一些字段之類。

前店后廠模式還是跟效率有關,為了能夠比較快速地把小程序做起來,我們回顧總結出了前店后廠模式,也就是減少環節快速往前跑。我們組建了對接商家的群,商家提出需求,開發的同學覺得這個需求有道理就馬上去做,有些需求是憑感覺就知道有道理的。因為已經有了H5的能力在參照,我們要做的是選擇哪些要復刻到小程序中去。提出的痛點解決之后馬上給商家講清楚,減少所謂的產品測試等各種環節,整個過程是很順暢的。但需要核心人物同時發揮PM、產品經理以及開發的角色,或者團隊里有人每天有一部分時間切換為產品經理。

關於如何提高穩定性,在我看來這是本次分享里比較有含金量的部分。簡單來講就是想要快速迭代但同時活多人少,而且沒有測試資源的情況下要怎么快速向前跑。我們的解法就是體驗版、穩定版機制,前端工程師歷來都是改完馬上生效,完全不管之前的版本,最多就是灰度發布。我們組建了一個內測商家群,每個星期及時同步穩定版發布時間以及體驗版的新功能。內測商家全部默認使用體驗版,但這些商家也是要進行篩選的。我們會在后台單獨操作進行更新,也可以進行批量更新。基本上保持的節奏是兩個星期一版,所以一個體驗版的代碼將被100來個內測商家至少使用一個星期。所以體驗版小程序在改成穩定版提供給所有商家使用的時候,基本上已經沒有什么問題了。其中唯一一次故障就是因為沒有遵循這個原則,在體驗版上停留三四天就着急上穩定版了。第二就是利用好回滾、撤銷接口。對於這個版本出現的所有問題,我們可以批量地把所有商家的小程序都回撤到上一個版本,這是官方提供的借口。我們需要去開發,回撤之前會確認一下。

最后回顧一下,本次分享首先是為大家介紹了我眼中的小程序,簡單來講小程序就是微信操作系統中的APP,解決了之前H5和Native APP的各種問題,降低了開發門檻。第二是從碼農的視角介紹了有贊微商城小程序,第三是介紹了我們團隊技術上的探索和積累。

Q/A

Q:數據和數據之間做的隔離是在騰訊雲上做一個集群嗎?

A:這個事和騰訊沒有什么關系,我們有自己的運維團隊,基本上管得比較底層。當然對於個人開發者而言,我還是蠻推薦騰訊雲的套路。剛才你說的商家數據隔離,我們現在沒有做這樣的事情。確實有給商家提供審核的時候,商家自己的配置,其中一個配置就是在小程序申請的APP ID,我們所有的請求都會帶上這個ID,后端會拿到對應的數據。

Q:使用體驗版的商家為什么願意做小白鼠?是因為有一些優惠還是確實看中?

A:這個問題問得非常好,有兩個理由。做生意的人,因為跟錢掛鈎,他們會認定有些東西是很需要的,是他們下一步商業計划里急需的一環,他願意承擔這個不穩定的風險去使用這個功能。實際上我們的體驗版質量也沒有那么差,至少我們自己去回歸過,該測還是會測。商家很願意影響你,他對這個產品有自己的想法,人人都是產品經理,他們都希望這個產品按照他的想法去做,所以很願意參與這個共建。現在很多產品都這么用,我們也用類似的套路去做這個事情,對於我們而言好處當然更多了。

Q:剛才說的體驗是在現場,不是在小程序客戶端,正兒八經的發到線上?

A:對,無非就是有一個名單,給這個名單發的時候給他提交的是制定的模板ID,是體驗版的,只是提交審核的時候不一樣而已。回撤是微信最近一兩個月才公布的能力,我們也剛剛用起來,之前如果發了一個有問題的版本也沒有辦法,只能再發一次。

Q:剛才提到跟用戶之間直接聯系,我想問一個細節,這個推動過程是把多個商家拉到一個群里面這樣操作,還是有分開?

A:把多個商家拉到一起。

Q:會不會有不和諧或者沖突的?

A:我不是特別明白你說的不和諧?

Q:比如說有些功能是加強版,我想擁有但是它沒有,如果這個版本的價格跟別人的價格都會在群里提到?

A:在有贊我覺得是沒有問題的,因為有贊各個版本的價格是比較透明的。說得再直白一些,哪怕你跟我們的CEO是很鐵的哥們也沒有優惠碼,除非是商業定制款、高階的、有更高的價格,需要有BD的同學進行對接。

Q:單獨對接?

A:如果是特別高階的幾十萬幾百萬的肯定需要單獨對接,我們普通的基本款是4800,還有9800,都是一樣的。

 

更多分享資料,請戳下面的鏈接:

有贊電商小程序的實踐.pdf

 

問答

小程序可以實現哪些音視頻解決方案?

相關閱讀

鄒偉:如何開發一款小游戲

朱展:騰訊雲小程序解決方案

劉翌:如何利用小程序技術解決企業銷售難題

此文已由作者授權騰訊雲+社區發布,原文鏈接:https://cloud.tencent.com/developer/article/1117052?fromSource=waitui


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM