SAP成都研究院大衛(wèi)哥：SAP C4C中國(guó)本地化之微信小程序集成

今天的文章來自Wu David，SAP成都研究院C4C開發(fā)團(tuán)隊(duì)的架構(gòu)師，在加入團(tuán)隊(duì)之前曾經(jīng)在SAP上海研究院工作，組內(nèi)同事習(xí)慣親切地稱呼他為大衛(wèi)哥。

大衛(wèi)哥身高據(jù)Jerry目測(cè)有1米8以上，是成都C4C開發(fā)團(tuán)隊(duì)身高最高的幾位男同事之一。身體非常結(jié)實(shí)，是成都SAP籃球隊(duì)的成員之一。有一次大衛(wèi)哥坐在自己座位上，一手撐在桌子上認(rèn)真地看著向他求助的同事電腦上打印的日志，飛機(jī)哥張航拍了一張大衛(wèi)哥的背影，評(píng)價(jià)道：“從照片里看出了大衛(wèi)哥發(fā)達(dá)的背闊肌?！?

飛機(jī)哥張航后來完成了一幅素描，下圖左邊正在沉思的男子就是大衛(wèi)哥。

有隨后新加入團(tuán)隊(duì)的同事聲稱晚上曾經(jīng)花了兩個(gè)小時(shí)翻完了大衛(wèi)哥朋友圈的所有照片，看到大衛(wèi)哥以前發(fā)的一張高中時(shí)期的照片。大家一看，嘖嘖，這顏值絕對(duì)夠得上去拍偶像劇了。高挑的身材，發(fā)達(dá)的背闊肌配上高顏值，使得大衛(wèi)哥隨便往人群中一站都非常地引人注目。

除了C4C大衛(wèi)哥以外，Jerry還知道其他一些名叫大衛(wèi)的帥哥。最舉世聞名的大衛(wèi)莫過于收藏在意大利弗洛倫薩美術(shù)學(xué)院的大衛(wèi)大理石雕像了：

然后就是八零后的青春回憶，曼聯(lián)名宿大衛(wèi).貝克漢姆：

2012年時(shí)，曾經(jīng)拍攝過《異形》的著名導(dǎo)演 雷****德利·斯科特 ，終于完成了他的一個(gè)心愿，給這部誕生于1979年的古老作品拍攝一個(gè)前傳，那就是在Jerry這種異形粉絲心目中的又一部經(jīng)典作品：《 普羅米修斯 Prometheus 》。

作為傳統(tǒng)，異形系列的每一部作品都會(huì)出現(xiàn)一個(gè)生化人，第一部是陰險(xiǎn)的科學(xué)研究院 A sh，第二部和第三部是外表看起來像一位老者的 B ishop，第四部是留著一頭干練短發(fā)的美女 C all。到了根正苗紅的《普羅米修斯》，名字則變成了今天這篇文章談到的 D avid：

David在《普羅米修斯》以及2017年上映的《異形：契約》里都扮演了推動(dòng)劇情發(fā)展的關(guān)鍵角色，Jerry認(rèn)為即便稱David為這兩部影片的男主角也絲毫不為過。

回顧了這些，我們能發(fā)現(xiàn)：名字叫David的男子，顏值氣質(zhì)都在線呀！

讓我們回到現(xiàn)實(shí)中來，下面是C4C大衛(wèi)哥的正文。

大家好，我是SAP成都研究院C4C開發(fā)團(tuán)隊(duì)的大衛(wèi)(David)，下面就由我來給大家分享C4C和微信小程序集成的一個(gè)創(chuàng)新案例。

C4C產(chǎn)品自上線以來，一共有三個(gè)版本的UI。從最早的基于微軟的Silverlight，到基于SAP UI5的HTML5版本，最后就是目前C4C主推的RUI版本。Silverlight很早就退休了，HTML5用的是UI5的sap.ui.commons 庫，只支持桌面瀏覽器訪問，也將于最近退休。RUI(Responsive UI)的中文是響應(yīng)式界面布局，其技術(shù)實(shí)現(xiàn)用的是UI5的sap.m庫。

關(guān)于這三種C4C UI的更多介紹，請(qǐng)參考我的同事周帥的文章： SAP成都C4C小李探花：淺談Fiori Design Guidelines 。

C4C在移動(dòng)端配合Cordova框架，實(shí)現(xiàn)一套代碼跨平臺(tái)運(yùn)行。更多細(xì)節(jié)可以閱讀Jerry的文章： SAP移動(dòng)應(yīng)用解決方案之一：HTML5應(yīng)用 + Cordova = 平臺(tái)相關(guān)的混合應(yīng)用 。

現(xiàn)在大家看到下面這張截圖，就是C4C移動(dòng)端App的界面。雖然是在手機(jī)上，但依然可以看出，這是CRM經(jīng)典的L-shape UI布局。左邊導(dǎo)航欄，上方header bar以及右下方大塊的工作區(qū)域。

作為C4C的用戶，我們以銷售代表為例，他/她們會(huì)在巡店，客戶拜訪和各種市場(chǎng)活動(dòng)時(shí)使用C4C 的移動(dòng)端App。那下面我們就以銷售代表在系統(tǒng)里查找一個(gè)opportunity(商機(jī))為例，看一下C4C的表現(xiàn)。

首先我們打開App，從左邊導(dǎo)航欄選擇銷售機(jī)會(huì)視圖，進(jìn)入右邊工作區(qū)列表，找到需要的銷售機(jī)會(huì)并打開。

作為一名銷售代表，整天風(fēng)里來雨里去，在跑市場(chǎng)的時(shí)候可能只需要一個(gè)簡(jiǎn)單的服務(wù)或者應(yīng)用，能夠快速查詢某個(gè)商業(yè)活動(dòng)或快速創(chuàng)建銷售機(jī)會(huì)?；谝陨蠘I(yè)務(wù)需求，以及微信在中國(guó)的市場(chǎng)地位和小程序的特性。我們組的同事（程序媛Kellyn，關(guān)鍵詞：居老師）做了一款C4C小程序，部分界面如下：

打開微信后，通過小程序入口，我們可以迅速啟動(dòng)小程序，登錄后就是appointments和opportunity的列表。從上圖我們可看到，在小程序底端有兩個(gè)標(biāo)簽頁可以實(shí)現(xiàn)兩個(gè)服務(wù)的切換。

點(diǎn)擊列表中任意一條記錄，進(jìn)入明細(xì)界面，并且和C4C中一樣也是以不同的標(biāo)簽頁(我們內(nèi)部稱這些標(biāo)簽頁為facet)去呈現(xiàn)數(shù)據(jù)。

從頁面布局上來講，這個(gè)微信小程序的頁面布局和微信與支付寶的布局(如下圖所示)類似，都是頂部導(dǎo)航欄, 中間工作區(qū)，底部標(biāo)簽區(qū)域用于切換不同的頁面或應(yīng)用。大部分國(guó)內(nèi)用戶比較偏向，或者說習(xí)慣這種頁面布局。

綜合來看，C4C app短期內(nèi)不會(huì)做成微信小程序的頁面風(fēng)格，但如果能有一些類似微信小程序這樣輕量級(jí)的服務(wù)應(yīng)用配合C4C一起使用，相信客戶的工作效率會(huì)得到很大提升。

作為開發(fā)人員，如果我們接到了需要 把C4C的某些業(yè)務(wù)功能用微信小程序?qū)崿F(xiàn) 的開發(fā)任務(wù)后，怎樣才能快速的開發(fā)出這樣一套小程序應(yīng)用呢? 架構(gòu)上與C4C集成微信公眾號(hào)類似，主要分為三大塊：

• 前臺(tái)頁面的微信小程序?qū)崿F(xiàn)

• 微信Agent Server(有時(shí)也稱為微信中間服務(wù)器，消息服務(wù)器)

• C4C后臺(tái)系統(tǒng)，把C4C業(yè)務(wù)數(shù)據(jù)通過某種接口暴露給外部消費(fèi)者

在上面我給大家提到的我們開發(fā)的微信小程序例子中，C4C作為后臺(tái)系統(tǒng)只需要提供RESTful的API，我們直接用的C4C 標(biāo)準(zhǔn)的OData Service。關(guān)于如何用各種編程語言去消費(fèi)這些標(biāo)準(zhǔn)OData Service，請(qǐng)參考SAP官方的github：

https://github.com/SAP/C4CODATAAPIDEVGUIDE

Agent Server的作用主要是請(qǐng)求的分發(fā)，用戶的登錄和授權(quán)以及解決微信小程序訪問C4C OData Service的跨域問題。關(guān)于登錄和授權(quán)，在這個(gè)例子中，我們只是簡(jiǎn)單用郵箱賬號(hào)匹配了C4C后臺(tái)的一個(gè)Business User。

下面我們就以一個(gè)簡(jiǎn)單的“Hello World”來幫助大家熟悉小程序的開發(fā)。首先，我們需要去微信小程序的官網(wǎng)上完成注冊(cè)并下載小程序開發(fā)的IDE。如果你要開發(fā)一個(gè)需要過審的小程序，還需要申請(qǐng)小程序的AppID。

這里簡(jiǎn)單介紹下AppID和OpenID兩個(gè)概念，AppID相當(dāng)于小程序的一個(gè)唯一辨識(shí)，用于審核和發(fā)版。OpenID這個(gè)概念，如果大家已經(jīng)做過微信公眾號(hào)的相關(guān)開發(fā)應(yīng)該不會(huì)陌生：掃描了小程序的二維碼后，就會(huì)自動(dòng)基于該用戶生成一個(gè)OpenID，它是一個(gè)用來辨識(shí)當(dāng)前用戶的一個(gè)technical Field。

注冊(cè)完所有信息后，打開微信小程序開發(fā)平臺(tái)，并創(chuàng)建一個(gè)快速啟動(dòng)模板，下圖就是小程序的Hello World工程在小程序開發(fā)IDE中的界面。

我們來簡(jiǎn)單看下小程序IDE的界面構(gòu)成。首先是頂部的工具欄，用于IDE頁面布局和其他功能的配置。左邊是預(yù)覽界面，小程序會(huì)在項(xiàng)目打開時(shí)就自動(dòng)運(yùn)行并呈現(xiàn)在這里，它與底部的調(diào)試界面可以說是完全克隆Chrome的開發(fā)者工具，經(jīng)常使用Chrome開發(fā)者工具的朋友用起來肯定覺得比較順手。關(guān)于Chrome開發(fā)者工具的使用技巧，也可以參考Jerry的文章  Jerry和您聊聊Chrome開發(fā)者工具 。

再加上文件目錄和代碼編輯區(qū)，大部分區(qū)域可以設(shè)置隱藏或以新窗口的方式彈出，所以從界面上來看還是比較簡(jiǎn)潔的。

接著，我們來看看這個(gè)Hello World小程序的功能。整個(gè)程序有兩個(gè)界面，第一個(gè)界面就是截圖中看到的當(dāng)前用戶的微信頭像和昵稱，下面就是Hello World的文本。當(dāng)點(diǎn)擊用戶頭像之后，跳轉(zhuǎn)到第二個(gè)界面，是記錄日志log的，小程序每次啟動(dòng)時(shí)都會(huì)寫入一條log，內(nèi)容就是當(dāng)前的時(shí)間日期。這個(gè)log會(huì)隨著清除緩存而被刪除。

基本了解Hello World的功能后，再看文件結(jié)構(gòu)就更容易了。我們先來看看小程序框架中四種類型的文件：

· .js文件，基于JavaScript的邏輯層框架

· .wxml視圖層文件，是小程序框架設(shè)計(jì)的一套新的標(biāo)簽語言，用來描述頁面結(jié)構(gòu)

· .wxss樣式文件，用于描述WXML的組件樣式

· .json文件，配置文件，用于單個(gè)頁面的配置和整個(gè)項(xiàng)目的配置

小程序包含一個(gè)描述整體程序的app.js和多個(gè)描述各自頁面的具體實(shí)現(xiàn)文件。

app.js 控制整個(gè)程序的邏輯，是整個(gè)項(xiàng)目的入口程序。比如在這個(gè)Hello World小程序中，項(xiàng)目啟動(dòng)時(shí)檢查localstorage并寫入log，完成微信用戶登錄和獲取用戶User Profile都是在這里完成的。app.json負(fù)責(zé)的是程序布局頁面的一些公共設(shè)置。還是以這個(gè)Hello World小程序?yàn)槔?，這個(gè)程序中首頁和日志兩個(gè)頁面需要在app.json里注冊(cè)，還有整個(gè)window object的屬性控制，比如我們看到的navigation bar上的文字和顏色，另外還包括底部tabBar的表現(xiàn)行為，例如可以添加多少個(gè)tabButton及它們顯示的先后順序。app.wxss 就是小程序的公共樣式表，就像我們做UI5開發(fā)時(shí)stylefolder里的basefolder。

Pages文件夾下有兩個(gè)子文件夾index和log，分別對(duì)應(yīng)Hello World小程序的首頁和日志頁面。每個(gè)文件夾下對(duì)應(yīng)的就是剛才介紹過的四種文件類型，同時(shí)我們發(fā)現(xiàn)在這一級(jí)目錄下也有json文件和wxss文件，意味著頁面級(jí)別的配置信息和樣式信息，既可以在下級(jí)目錄重寫，也可以從小程序級(jí)別繼承。

剩下的utils文件夾，通過名字可以看出實(shí)際上放的就是一些公共方法，方便調(diào)用。

Project.config.json存放的是IDE的配置信息，例如JS庫的版本，編譯類型是小程序還是小游戲，代碼上傳時(shí)的壓縮策略等等，同時(shí)AppID也是記錄在這里的。

我們?cè)賮硗ㄟ^具體的代碼片段來理解小程序的開發(fā)，上圖是Hello World小程序的視圖層和邏輯層。從UX的角度來說，如果用戶沒有登錄，會(huì)顯示一個(gè)獲取頭像昵稱的按鈕；如果登錄過，就顯示微信的頭像和昵稱。我們可以看到，視圖層里已經(jīng)不是我們?cè)瓉韺憘鹘y(tǒng)HTML時(shí)用到的div，p，span等HTML原生標(biāo)簽，而是經(jīng)過微信小程序封裝的view，button，text等標(biāo)簽，另外還夾雜著一些ifelse判斷和花括號(hào)的綁定。

在傳統(tǒng)的Web開發(fā)中，我們通過JavaScript代碼收集來自DOM上的事件，并把狀態(tài)記錄在JavaScript變量里，再通過調(diào)用DOM的API來改變DOM的屬性或行為。當(dāng)項(xiàng)目越來越大或業(yè)務(wù)變得復(fù)雜時(shí)，代碼里的交互邏輯和狀態(tài)控制邏輯會(huì)非?；靵y。而微信小程序采取了MVVM的開發(fā)模式（類似Vue），把渲染和邏輯分離，不讓JavaScript直接操作DOM，而只關(guān)注狀態(tài)變化，這樣實(shí)現(xiàn)了Model層和View層的解耦，代碼結(jié)構(gòu)會(huì)變得清晰。

聽到這里相信大家對(duì)微信小程序的開發(fā)已經(jīng)有了一定了解，我們不妨再回過頭來看看小程序的定義。什么是小程序？這是摘自小程序SDK首頁上的一句話：

微信小程序是一種全新的連接用戶與服務(wù)的方式，它可以在微信內(nèi)被便捷地獲取和傳播，同時(shí)具有出色的使用體驗(yàn)。

張小龍對(duì)小程序的定義，則主要強(qiáng)調(diào)的是 用完即走 的概念。無需安裝卸載，隨時(shí)可用，無處不在。

現(xiàn)在是移動(dòng)互聯(lián)網(wǎng)時(shí)代，Native App依托于操作系統(tǒng)，性能穩(wěn)定，可拓展性強(qiáng)，擁有更好的用戶體驗(yàn)，短時(shí)間可能無法被取代；Web App開發(fā)成本低，更新快，無需安裝卸載，使整個(gè)服務(wù)輕量化，操作簡(jiǎn)便化，正強(qiáng)烈地沖擊原生應(yīng)用的市場(chǎng)。服務(wù)的輕量化是方向，微信小程序似乎就是在尋求兩者中的平衡點(diǎn)。而今天這篇文章介紹的原型開發(fā)，體現(xiàn)了SAP成都研究院C4C開發(fā)團(tuán)隊(duì)在如何充分利用微信小程序這些優(yōu)勢(shì)來改善SAP C4C客戶使用我們產(chǎn)品的用戶體驗(yàn)的一些嘗試。

本文介紹的微信小程序的源代碼，可以從“居老師圈外女友” Kellyn的github上獲?。?

https://github.com/kellynlee/C4C4Miniprogram

這里Kellyn也借這個(gè)機(jī)會(huì)，感謝同事李曉剛對(duì)她的畢業(yè)論文的撰寫和發(fā)布付出的辛勞和心血。

如果大家對(duì)C4C同微信小程序的集成有更多的問題，或者有一些您想到的和微信集成相關(guān)的功能，希望添加到C4C標(biāo)準(zhǔn)產(chǎn)品中去，歡迎通過這個(gè)公眾號(hào)同我們聯(lián)系。感謝閱讀。

更多閱讀

SAP成都研究院的C4C開發(fā)團(tuán)隊(duì)的同事們已經(jīng)寫過很多關(guān)于C4C的技術(shù)文章了，列表如下：

• C4C和微信公眾號(hào)集成系列教程

• SAP成都C4C小李探花：淺談Fiori Design Guidelines

• SAP S4CRM vs C4C, 諸葛亮和周瑜?

• SAP成都研究院C4C光明左使：SAP Cloud for Customer 使用SAP UI5的獨(dú)特之處

• SAP Cloud for Customer Extensibility的設(shè)計(jì)與實(shí)現(xiàn)

• 機(jī)器學(xué)習(xí)在SAP Cloud for Customer中的應(yīng)用

• SAP移動(dòng)應(yīng)用解決方案之一：HTML5應(yīng)用 + Cordova = 平臺(tái)相關(guān)的混合應(yīng)用

• 打通C/4HANA和S/4HANA的一個(gè)原型開發(fā)：智能服務(wù)創(chuàng)新案例

要獲取更多Jerry的原創(chuàng)文章，請(qǐng)關(guān)注公眾號(hào)"汪子熙":