微信小程序開(kāi)發(fā)之快速實(shí)現(xiàn)運(yùn)營(yíng)需求
作為一枚前端,我想在我們的日常中,除了不斷的積累各種語(yǔ)言框架外,我們更多的時(shí)候是給產(chǎn)品、業(yè)務(wù)提供切實(shí)、可行的解決方案,并最大程度上簡(jiǎn)化我們的后期維護(hù)工作。
本文以小程序端的兩個(gè)場(chǎng)景為例,簡(jiǎn)述下我們?cè)诮鉀Q運(yùn)營(yíng)類(lèi)數(shù)據(jù)的思路和方案。歡迎拍磚。
場(chǎng)景一:動(dòng)態(tài)實(shí)時(shí)更新頁(yè)面數(shù)據(jù)
京東有禮小程序的首頁(yè),是為用戶呈現(xiàn)的禮品卡列表。我們的需求是可以動(dòng)態(tài)、實(shí)時(shí)更新禮品卡列表,比如春節(jié)期間推出一批拜年的卡面,而元宵節(jié)時(shí)更換為猜燈謎的卡面,平日再更換一批其他的卡面。這里我們稱這些被動(dòng)態(tài)實(shí)時(shí)更新的數(shù)據(jù)為運(yùn)營(yíng)類(lèi)數(shù)據(jù)。
這其實(shí)是一個(gè)很簡(jiǎn)單的問(wèn)題,即需求方在后臺(tái)維護(hù)這些運(yùn)營(yíng)數(shù)據(jù) => 后臺(tái)提供數(shù)據(jù)接口 => 前端調(diào)用并渲染,就可以了。不過(guò),當(dāng)時(shí)后端沒(méi)有維護(hù)“運(yùn)營(yíng)數(shù)據(jù)”的系統(tǒng),在一周內(nèi)完成系統(tǒng)并提供數(shù)據(jù)接口的方案基本被 pass 掉了。
當(dāng)時(shí)適逢小程序推出 web-view 的解決方案,而在PC 和 M 端,需求方有通過(guò)運(yùn)營(yíng)活動(dòng)平臺(tái)搭建的活動(dòng)鏈接,如果能夠直接使用現(xiàn)有的活動(dòng)鏈接,似乎也可以解決問(wèn)題。不過(guò) web-view 對(duì)業(yè)務(wù)域名做了限制,而我們搭建的活動(dòng)頁(yè)涉及到的域名、登錄、領(lǐng)券等功能,未知風(fēng)險(xiǎn)不可控,一周內(nèi)也未必能搞定,也放棄。
有趣的是,我們?cè)诳紤]web-view方案的時(shí)候,發(fā)現(xiàn)運(yùn)營(yíng)活動(dòng)平臺(tái)可以提供數(shù)據(jù)接口?。』蠲撁撘粋€(gè)“配置系統(tǒng)”呀。很快我們確定了方案:在現(xiàn)有活動(dòng)頁(yè)的基礎(chǔ)上,新增列表的數(shù)據(jù)結(jié)構(gòu),讀取配置接口,渲染數(shù)據(jù)。
數(shù)據(jù)結(jié)構(gòu)如下,其中首焦、樓層通過(guò)groupName區(qū)分,首焦、樓層數(shù)據(jù)即是每個(gè)list的內(nèi)容.
這樣一來(lái),從需求提出到實(shí)現(xiàn),我們用了不到一天的時(shí)間。后來(lái)需求迭代更新時(shí),增加了一個(gè)首焦圖,和春節(jié)紅包抽獎(jiǎng)活動(dòng),我們?cè)诖嘶A(chǔ)上增加字段,只需在源碼基礎(chǔ)上增加一條判斷和一次循環(huán),就可以搞定需求,非??旖?,滿足了產(chǎn)品的快速迭代,減少了前端的工作量,基本沒(méi)有動(dòng)用后端資源。
場(chǎng)景二:多場(chǎng)景個(gè)性化實(shí)現(xiàn)
京東圖書(shū)小程序,承載著京東實(shí)體書(shū),活躍在眾多公眾號(hào)的首頁(yè)。比如我們的公眾號(hào)首頁(yè),可以快速鏈接到京東圖書(shū)的小程序。那么需求來(lái)了,我們每個(gè)公眾號(hào)的受眾群體存在著差異性,那我們?cè)趺唇o用戶提供精準(zhǔn)的數(shù)據(jù)以便用戶快速獲取所需圖書(shū)呢?
我們的方案就是為不同的公眾號(hào)實(shí)現(xiàn)自己定制的京東圖書(shū)小程序的首頁(yè),如下兩張圖中,分別是不同的公眾號(hào)對(duì)應(yīng)的不同京東圖書(shū)的首頁(yè)的活動(dòng)頁(yè)面,實(shí)現(xiàn)了多場(chǎng)景個(gè)性化的定制。
在收到該需求時(shí),我們已經(jīng)實(shí)現(xiàn)了通過(guò) web-view 接入 H5 的方式,運(yùn)營(yíng)頁(yè)面內(nèi)容已經(jīng)更加靈活。那如何實(shí)現(xiàn)這種差異性的展示呢?
有了場(chǎng)景一的啟發(fā),我們很快決定,借助活動(dòng)平臺(tái),根據(jù)公眾號(hào)的 appId 配置不同的 H5 url 鏈接。當(dāng)數(shù)據(jù)約定完畢后,我們只需要在活動(dòng)頁(yè)根據(jù)數(shù)據(jù),及當(dāng)前小程序的 appId 進(jìn)行匹配,待匹配成功后,將現(xiàn)在的 web-view 的 url 鏈接更新即可。
以上就是微信小程序開(kāi)發(fā)之快速實(shí)現(xiàn)運(yùn)營(yíng)需求,希望能對(duì)大家有所幫助。