教你玩這個(gè)小程序版的“樂(lè)高”
發(fā)布時(shí)間：2020 - 04 - 26
瀏覽次數(shù)：1325
你一定用過(guò)小程序來(lái)導(dǎo)航、打車、找共享充電寶... 不過(guò)，可能遇到過(guò)這些令人“捉急”的情況：
定位時(shí)，明明能夠拖動(dòng)地圖上的圖標(biāo)，找到了自己想去的地方，卻無(wú)法直接確定位置，只能搜索目的地；
叫車時(shí)，明明看到了司機(jī)就離你2公里，但卻不能直接顯示到達(dá)時(shí)間；
找共享充電寶時(shí)，明明就可以使用不同的logo區(qū)分開柜機(jī)是在餐廳、超市、還是電影院，但所有l(wèi)ogo都一樣，得一一點(diǎn)開才能知道你到底在哪兒？
……
地圖的確能帶你“去”任何地方，但是，路上也可能會(huì)發(fā)生很多不定的狀況。
今天我們來(lái)聊一件“新事兒”，當(dāng)一個(gè)小程序能力不能滿足需求時(shí)，可以與另一個(gè)能力疊加在一起打“組合拳”。就像樂(lè)高的拼搭一樣，新穎的創(chuàng)意，大開的腦洞往往會(huì)帶來(lái)更出奇不意的效果。
本期《小程序說(shuō)·能力百科全書》的主角是：“地圖組件+同層渲染”能力組合，我們邀請(qǐng)到貨拉拉、貨車定位、街電等3款小程序，看看他們是如何通過(guò)巧妙地應(yīng)用，讓自己的服務(wù)更炫酷，從而留住用戶的。
一、貨拉拉
給司機(jī)直接的信息，還能“找樂(lè)子”
在沒(méi)有接入「地圖組件」之前，貨拉拉的“遭遇”是這樣的。
作為一款貨運(yùn)平臺(tái)，地圖是產(chǎn)品的靈魂，而「貨拉拉」小程序的地圖功能使用的卻是H5；所以，「貨拉拉」只支持地址搜索，規(guī)劃路線這些都無(wú)法支持，用戶體驗(yàn)上非?！案盍选?br />
接入「地圖組件」，用戶體驗(yàn)可以說(shuō)是直線提升，“現(xiàn)在用戶可以直接在地圖上選擇發(fā)單地址、規(guī)劃貨運(yùn)路線，以及查看司機(jī)的實(shí)時(shí)位置等等”，「貨拉拉」小程序用戶端研發(fā)負(fù)責(zé)人尹志平告訴我們。
不過(guò)，用戶想要看到司機(jī)與用戶的實(shí)時(shí)距離、以及貨車達(dá)到后的等待時(shí)間時(shí)，依然還需多次點(diǎn)擊才能看得到。這時(shí)候，同層渲染能力則能快速解決這一“Bug”。
同層渲染相當(dāng)于在地圖上增加了一個(gè)浮層，底層是地圖，上面可以添加許多功能和需要顯示的信息。比如，在司機(jī)的位置圖標(biāo)上增加氣泡效果，用來(lái)展示貨車的位置，而在此前，得需要用戶點(diǎn)擊多次才能實(shí)現(xiàn)。現(xiàn)在，尹志平終于體驗(yàn)到“一眼望穿”的感覺了。
除了解決了根本的用戶體驗(yàn)問(wèn)題，尹志平還發(fā)現(xiàn)，同層渲染的加入，給貨車司機(jī)們找了很多樂(lè)子。
比如，當(dāng)貨車到達(dá)用戶指定位置，在裝貨過(guò)程，會(huì)有一段免費(fèi)的等待時(shí)間，超時(shí)才會(huì)收費(fèi)。有了同層渲染，在地圖上就可以實(shí)現(xiàn)更多好玩有趣的動(dòng)態(tài)效果。在免費(fèi)等待期間，氣泡中的時(shí)間采用了倒計(jì)時(shí)的效果；超時(shí)之后，則會(huì)換成另一種顏色，從視覺上給用戶造成緊張感。
和高德地圖用林志玲的聲音和郭德綱的相聲段子來(lái)增加聽覺上的趣味性一樣，貨拉拉小程序則是用兩個(gè)能力組合達(dá)到了視覺享受。
二、貨車定位
跟著喬布斯做一款極簡(jiǎn)的定位神器
喬布斯曾說(shuō)過(guò)，“簡(jiǎn)潔就是美?！?br />
但對(duì)于貨車定位小程序來(lái)說(shuō)，簡(jiǎn)潔有了，美卻沒(méi)了。
作為一個(gè)幫助用戶定位貨車和追蹤貨物的小程序，意味著貨車定位需要配備足夠的功能。比如定位功能，可以查看車輛的實(shí)時(shí)位置；軌跡功能，在地圖上顯示車輛行車路線；提醒功能，推送車輛到達(dá)時(shí)間。
而在「地圖組件」支持同層渲染之前，這些功能并不能同時(shí)覆蓋在地圖之上。如果同時(shí)放置，整個(gè)頁(yè)面會(huì)凌亂不堪。如果硬要“簡(jiǎn)潔”的話，就意味著功能不完善了。
“現(xiàn)在，同層渲染很好地解決了這些問(wèn)題，這些功能可以與地圖處于同一層級(jí)，也就不用擔(dān)心不好布局的問(wèn)題了?！?「貨車定位」小程序產(chǎn)品經(jīng)理Vivian說(shuō)。
除此，還可以在地圖上放置更多的功能與好玩的效果。比如，把輸入框用氣泡的形式直接放置在地圖上，方便用戶操作。好玩的是，司機(jī)們可以任意增加氣泡，標(biāo)記自己常去的地址，下次使用直接調(diào)出即可，方便又快捷。
值得注意的是，同層渲染還大大提高的操作效率，沒(méi)有特殊需要的用戶和司機(jī)可以直接使用地圖享受服務(wù)，有其它需要的用戶和司機(jī)，可以在浮層上任意選擇。一頁(yè)直達(dá)，各取所需。
三、街電
如果說(shuō)，貨拉拉與貨車定位只是“停留”在視覺體驗(yàn)與功能優(yōu)化上，那對(duì)于街電小程序來(lái)說(shuō)，同層渲染帶來(lái)的改變，則是開發(fā)者更在意的轉(zhuǎn)化與變現(xiàn)。
乍一看，地圖組件也好、同層渲染也好，與轉(zhuǎn)化變現(xiàn)并沒(méi)有什么關(guān)系，但在定位導(dǎo)航的場(chǎng)景中，則可以完美實(shí)現(xiàn)。
在「地圖組件」的使用上，街電主要是用來(lái)標(biāo)記用戶附近的充電寶柜機(jī)。用戶可以通過(guò)地圖直觀地了解周邊有哪些商戶可以使用街電共享充電寶，并查看各柜機(jī)對(duì)應(yīng)的可借、還狀態(tài)，此外，還可以喚起導(dǎo)航前往目的地。
“尤其是在支持同層渲染之后，「地圖組件」的能力就更強(qiáng)大了，不但降低了我們的開發(fā)難度，還可以在地圖上疊加更多好玩的動(dòng)畫效果”，「街電」小程序負(fù)責(zé)人小富告訴我們，“在此之前，連GIF都不支持，幾乎無(wú)法在地圖上使用動(dòng)畫。”
直白點(diǎn)說(shuō)就是，在柜機(jī)圖標(biāo)的展示上，效果更好看也更好玩了。商家不但可以更換logo樣式，點(diǎn)擊氣泡圖標(biāo)，還展示商戶名稱。
這樣一來(lái)，不同類型的商戶、不同狀態(tài)的柜機(jī)就能使用不同的logo，用戶在選擇上更直觀。節(jié)假日時(shí)，也可以換成主題logo，或根據(jù)商戶進(jìn)行定制。比如，在聚美301周年慶的活動(dòng)上，街電就把所有柜機(jī)的圖標(biāo)換成了該活動(dòng)
的主題logo，以此達(dá)到宣傳效果。對(duì)于街電來(lái)說(shuō)，logo的更換也能成為一種廣而告之的載體。
此外，街電聯(lián)合附近商家推出專屬優(yōu)惠活動(dòng)，商家logo可被特別標(biāo)記出來(lái)，同時(shí)，用戶點(diǎn)擊商家圖標(biāo)后的氣泡，還會(huì)顯示“優(yōu)惠券”。這個(gè)舉措可謂是一箭三雕：幫商家引了流、街電順便拉新轉(zhuǎn)化，而用戶說(shuō)不定就能抽一張5折優(yōu)惠卡，在給手機(jī)充電之際，去吃一頓可口的大餐。
四、給開發(fā)者的一些建議
1.「地圖組件」本身無(wú)太大問(wèn)題，主要是它與之對(duì)應(yīng)的覆蓋組件有太多兼容性問(wèn)題，在同層渲染之后可以大幅度減少這類問(wèn)題。但需要注意的是，同層渲染的基礎(chǔ)庫(kù)版本比較高，強(qiáng)行升基礎(chǔ)庫(kù)會(huì)造成較多用戶不升級(jí)微信就使用不了小程序；
2.「地圖組件」的使用上， 在自定義組件下，使用wx.createMapContext方法去創(chuàng)建地圖實(shí)例，要記得給第二個(gè)參數(shù)this傳值，不然方法會(huì)無(wú)效，另外，要理解「地圖組件」是原生組件，setData完后并不代表map已經(jīng)做完了相應(yīng)的操作；
3. 在做服務(wù)端動(dòng)態(tài)下發(fā)地圖圖標(biāo)的功能時(shí)，地圖圖標(biāo)是只支持將圖標(biāo)打包到小程序包內(nèi)的，所以就無(wú)法實(shí)現(xiàn)動(dòng)態(tài)與個(gè)性化配置。但是，可以采用服務(wù)端下發(fā)圖片地址，然后小程序先將圖片下載到本地的辦法，來(lái)實(shí)現(xiàn)動(dòng)態(tài)配置的效果。