天天看點

SAP系統和微信內建的系列教程之五:如何将SAP UI5應用嵌入到微信公衆号菜單中

這是Jerry 2020年的第86篇文章,也是汪子熙公衆号總共第268篇原創文章。

2020年即将到達尾聲了。

SAP系統和微信內建的系列教程之五:如何将SAP UI5應用嵌入到微信公衆号菜單中

Jerry所在團隊的産品經理,已經開始讓大家把聖誕節期間的休假情況,維護在公司wiki裡,以便安排假期值班人員:

SAP系統和微信內建的系列教程之五:如何将SAP UI5應用嵌入到微信公衆号菜單中

Jerry借這篇文章的機會,提前祝各位粉絲聖誕快樂。

今天抽點時間,繼續填前些日子挖的一個坑。

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

系列目錄

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

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

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

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

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

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

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

(8) 微信公衆号的地圖內建

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

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

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

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

本文的内容很簡單,用一句話就能概括:利用微信公衆号的菜單項,啟動一個SAP UI5應用,并運作在微信的内嵌浏覽器裡。

如下圖“Jerry List”菜單項所示:

SAP系統和微信內建的系列教程之五:如何将SAP UI5應用嵌入到微信公衆号菜單中

我們提前把SAP UI5應用部署在雲平台上,得到該應用的url,然後直接将url綁定到“Jerry List”這個公衆号菜單即可。最後,點選公衆号菜單後,這個SAP UI5應用在微信浏覽器裡打開的效果如下:

SAP系統和微信內建的系列教程之五:如何将SAP UI5應用嵌入到微信公衆号菜單中
SAP系統和微信內建的系列教程之五:如何将SAP UI5應用嵌入到微信公衆号菜單中

下面是實作細節。

使用微信開發文檔裡提到的公衆号菜單建立API,建立一個新的名為Jerry List的菜單,url字段指定成部署到雲平台上的SAP UI5應用的url:

SAP系統和微信內建的系列教程之五:如何将SAP UI5應用嵌入到微信公衆号菜單中

url:

https://api.weixin.qq.com/cgi-bin/menu/create?access_token=4_otQpSMfcwvmcL-T-DovhnozCAYCpy6wiKU3t4LUeZcQOF_i85a9NbpKpx7seLyEeHlrxl1rtlztL0miJthojqlqHqJArx7sm5OUdnsAupPpUwGr2EWljdJrLlrAVDNcADACKU

Access Token使用如下的API調用,通過app id和app secret換取:

https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=&secret=.

将SAP UI5應用部署到雲平台上,得到url:

http://wechatjerry.herokuapp.com/ui5/

確定該url直接在浏覽器裡通路能夠正常工作:

SAP系統和微信內建的系列教程之五:如何将SAP UI5應用嵌入到微信公衆号菜單中

上面這個UI5應用的完整源代碼,可以在我的Github上找到。

SAP系統和微信內建的系列教程之五:如何将SAP UI5應用嵌入到微信公衆号菜單中

這個nodejs應用,調用第6行的app.use方法,将webapp檔案夾下的SAP UI5應用,通過/ui5暴露給使用者。

SAP系統和微信內建的系列教程之五:如何将SAP UI5應用嵌入到微信公衆号菜單中

本系列下一篇即第六篇文章,Jerry會介紹如何通過OAuth 2協定,在SAP UI5應用裡擷取微信使用者資訊并顯示。感謝閱讀。

繼續閱讀