This is Jerry’s 86th article of 2020, and the 268th original article of Wang Zixi’s official account.

The year 2020 is drawing to a close.

J: Well, the product manager on our team has already asked us to keep our Christmas holidays in the company wiki.

Jerry would like to take this opportunity to wish you fans a merry Christmas in advance.

Take some time today to fill a hole I dug a few days ago.

The English version of this series was written by Jerry in 2017. This tutorial consists of ten articles and is published on the SAP community.

Series directory

(1) Establishment of wechat development environment

(2) How to consume API through wechat public account

(3) After wechat users follow the public account, they will automatically create customer master data in SAP C4C system

(4) How to push changes of SAP C4C master data to wechat official account

(5) How to embed SAP UI5 application into the menu of wechat official account (this paper)

(6) How to obtain wechat user information through OAuth2 and display it in SAP UI5 application

(7) Use Redis to store records of conversations between wechat users and public accounts

(8) Map integration of wechat public accounts

(9) How to save the messages sent by wechat users to wechat official accounts in SAP C4C system

(10) How to reply messages directly to subscribers of wechat public accounts in SAP C4C system


Recently, many friends asked me on wechat about the integration of SAP system and wechat official account, so I translated the English version into Chinese and re-posted it on my official account.

It should be noted that after three years, the development process of wechat public number may change, please identify yourself. Three years ago, I chose SAP Cloud for Customer for the system integrated with wechat official account.

The content of this article is very simple, can be summed up in one sentence: using the menu item of wechat public account, start a SAP UI5 application, and run in the embedded browser of wechat.

The “Jerry List” menu item looks like this:

We deployed the SAP UI5 application on the cloud platform in advance, obtained the URL of the application, and then directly bound the URL to the menu of the public account “Jerry List”. Finally, after clicking the official account menu, the SAP UI5 application opens in wechat browser as follows:



Below are the implementation details.

Create a new menu named Jerry List using the public account menu creation API mentioned in the wechat development document. The URL field is specified as the URL of the SAP UI5 application deployed to the cloud platform:

Url: api.weixin.qq.com/cgi-bin/men…

Access Token is exchanged with app ID and app secret using the following API calls:

Api.weixin.qq.com/cgi-bin/tok… .

Deploy the SAP UI5 application to the cloud platform and get the URL:

wechatjerry.herokuapp.com/ui5/

Make sure the URL works when accessed directly from the browser:

The full source code for the UI5 application above can be found on my Github.

The nodejs application calls the app.use method on line 6 to expose the SAP UI5 application in the WebApp folder to the user via/UI5.

In the next and sixth article of this series, Jerry will introduce how to obtain and display wechat user information in SAP UI5 application through OAuth 2 protocol. Thanks for reading.

Series directory

(1) Establishment of wechat development environment

(2) How to consume API through wechat public account

(3) After wechat users follow the public account, they will automatically create customer master data in SAP C4C system

(4) How to push changes of SAP C4C master data to wechat official account

(5) How to embed SAP UI5 application into the menu of wechat official account (this paper)

(6) How to obtain wechat user information through OAuth2 and display it in SAP UI5 application

(7) Use Redis to store records of conversations between wechat users and public accounts

(8) Map integration of wechat public accounts

(9) How to save the messages sent by wechat users to wechat official accounts in SAP C4C system

(10) How to reply messages directly to subscribers of wechat public accounts in SAP C4C system

More of Jerry’s original articles can be found in “Wang Zixi” :