天天看點

SAP系統和微信內建的系列教程之八:100行代碼在微信公衆号裡內建地圖搜尋功能

本系列的英文版Jerry寫作于2017年,這個教程總共包含十篇文章,發表在

SAP社群

上。系列目錄

(1) 微信開發環境的搭建

(2) 如何通過微信公衆号消費API

(3) 微信使用者關注公衆号之後,自動在SAP C4C系統建立客戶主資料

(4) 如何将SAP C4C主資料變化推送給微信公衆号

(5) 如何将SAP UI5應用嵌入到微信公衆号菜單中

(6) 如何通過OAuth2擷取微信使用者資訊并顯示在SAP UI5應用中

(7) 使用Redis存儲微信使用者和公衆号的對話記錄

(8) 微信公衆号的地圖內建:100行代碼在微信公衆号裡內建地圖搜尋功能( 本文 )

(9) 如何将微信使用者發送到微信公衆号的消息儲存到SAP C4C系統

(10) 如何在SAP C4C系統直接回複消息給微信公衆号的訂閱者

最近有不少朋友在微信上向我咨詢SAP系統和微信公衆号內建的問題,是以我把當時寫的英文版翻譯成中文,重新釋出在我的公衆号上。

需要注意的是,時隔三年,微信公衆号的開發流程可能有所變化,請大家自行鑒别。和微信公衆号內建的系統,我三年前選擇的是SAP Cloud for Customer.

Jerry之前在SAP成都研究院數字創新空間工作時,經常需要做一些在微信app裡展示的原型,而微信裡直接進行地圖搜尋,已經是國内客戶公認的一個最基本的需求了。

Jerry當時工作中需要給某個微信公衆号增添一個新的菜單,使用者點選之後,需要在微信app内嵌的浏覽器裡,使用地圖搜尋功能。我當時在網上找了很多例子,都是基于前端架構比如jQuery,Bootstrap,Vue來開發的。我覺得對于實作我那個簡單的地圖搜尋需求來說,這些前端架構太重了,是以自己花了一點時間,把網上找到的一個例子的地圖搜尋功能,從其前端實作架構中剝離出來,之後這個例子無需任何前端架構即可運作。

SAP系統和微信內建的系列教程之八:100行代碼在微信公衆号裡內建地圖搜尋功能
SAP系統和微信內建的系列教程之八:100行代碼在微信公衆号裡內建地圖搜尋功能

這個地圖搜尋的功能使用起來很簡單,在微信公衆号裡通過菜單打開我剝離之後,純HTML/JavaScript實作的百度地圖的搜尋界面後,在input字段裡輸入位址,然後點Search按鈕,即可自動定位到目的位址。

SAP系統和微信內建的系列教程之八:100行代碼在微信公衆号裡內建地圖搜尋功能
SAP系統和微信內建的系列教程之八:100行代碼在微信公衆号裡內建地圖搜尋功能

地圖的放大和縮小,地圖類型的切換都是百度地圖庫本身提供的,開發人員無需任何額外的程式設計工作。

SAP系統和微信內建的系列教程之八:100行代碼在微信公衆号裡內建地圖搜尋功能
SAP系統和微信內建的系列教程之八:100行代碼在微信公衆号裡內建地圖搜尋功能

完整代碼在我的Github上。

下面是部分代碼說明。

這個微信公衆号地圖內建的思路還是和 如何将SAP UI5應用嵌入到微信公衆号菜單中 提到的一樣,即先在本地開發一個能提供地圖搜尋的網頁應用,測試通過後将其部署到雲平台,将部署到雲平台後生成的url綁定到微信公衆号菜單即可。

我的這個地圖搜尋網頁應用隻需要實作唯一的一個index.html,源代碼剛好100行:

SAP系統和微信內建的系列教程之八:100行代碼在微信公衆号裡內建地圖搜尋功能
SAP系統和微信內建的系列教程之八:100行代碼在微信公衆号裡內建地圖搜尋功能
SAP系統和微信內建的系列教程之八:100行代碼在微信公衆号裡內建地圖搜尋功能

可以複制粘貼的代碼位址

如下

網頁加載時,onload hook觸發函數findDefaultLocation, 将預設位址,成都,定位并顯示在地圖上

SAP系統和微信內建的系列教程之八:100行代碼在微信公衆号裡內建地圖搜尋功能

建立一個檔案夾map,将index.html放至其内,用url /map映射到map檔案夾:

SAP系統和微信內建的系列教程之八:100行代碼在微信公衆号裡內建地圖搜尋功能

這樣我們在浏覽器位址欄裡添加/map的片段,就能通過nodejs express庫,通路到map檔案夾下的index.html網頁了。該nodejs應用部署到雲平台後的通路效果如下:

浏覽器輸入

https://wechatjerry.herokuapp.com/map/

預設自動定位到成都:

————————————————

版權聲明:本文為CSDN部落客「汪子熙」的原創文章,遵循CC 4.0 BY-SA版權協定,轉載請附上原文出處連結及本聲明。

原文連結:

https://blog.csdn.net/i042416/article/details/112094454
SAP系統和微信內建的系列教程之八:100行代碼在微信公衆号裡內建地圖搜尋功能

最後調用 

如何将SAP UI5應用嵌入到微信公衆号菜單中

 提到的微信公衆号菜單建立API,将下列JSON負載傳入API,即可将雲平台上的地圖搜尋網頁應用同建立的微信公衆号菜單綁定在一起。

SAP系統和微信內建的系列教程之八:100行代碼在微信公衆号裡內建地圖搜尋功能

本系列最後兩篇文章,也是最有用的兩個場景,即:

(1) 如何将微信使用者發送給微信公衆号的内容自動轉存到SAP C4C系統

(2) 如何在SAP C4C系統内直接回複消息到使用者的微信app上敬請期待。

系列目錄

(9) 如何将微信使用者發送到微信公衆号的消息儲存到SAP C4C系

繼續閱讀