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