SAP成都研究院大衛哥：SAP C4C中國本地化之微信小程式整合

今天的文章來自Wu David，SAP成都研究院C4C開發團隊的架構師，在加入團隊之前曾經在SAP上海研究院工作，組內同事習慣親切地稱呼他為大衛哥。

大衛哥身高據Jerry目測有1米8以上，是成都C4C開發團隊身高最高的幾位男同事之一。身體非常結實，是成都SAP籃球隊的成員之一。有一次大衛哥坐在自己座位上，一手撐在桌子上認真地看著向他求助的同事電腦上列印的日誌，飛機哥張航拍了一張大衛哥的背影，評價道：“從照片裡看出了大衛哥發達的背闊肌。”

飛機哥張航後來完成了一幅素描，下圖左邊正在沉思的男子就是大衛哥。

有隨後新加入團隊的同事聲稱晚上曾經花了兩個小時翻完了大衛哥朋友圈的所有照片，看到大衛哥以前發的一張高中時期的照片。大家一看，嘖嘖，這顏值絕對夠得上去拍偶像劇了。高挑的身材，發達的背闊肌配上高顏值，使得大衛哥隨便往人群中一站都非常地引人注目。

除了C4C大衛哥以外，Jerry還知道其他一些名叫大衛的帥哥。最舉世聞名的大衛莫過於收藏在義大利弗洛倫薩美術學院的大衛大理石雕像了：

然後就是八零後的青春回憶，曼聯名宿大衛.貝克漢姆：

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

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

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

回顧了這些，我們能發現：名字叫David的男子，顏值氣質都線上呀！

讓我們回到現實中來，下面是C4C大衛哥的正文。

---

大家好，我是SAP成都研究院C4C開發團隊的大衛(David)，下面就由我來給大家分享C4C和微信小程式整合的一個創新案例。

C4C產品自上線以來，一共有三個版本的UI。從最早的基於微軟的Silverlight，到基於SAP UI5的HTML5版本，最後就是目前C4C主推的RUI版本。Silverlight很早就退休了，HTML5用的是UI5的sap.ui.commons 庫，只支援桌面瀏覽器訪問，也將於最近退休。RUI(Responsive UI)的中文是響應式介面佈局，其技術實現用的是UI5的sap.m庫。

關於這三種C4C UI的更多介紹，請參考我的同事周帥的文章： SAP成都C4C小李探花：淺談Fiori Design Guidelines 。

C4C在移動端配合Cordova框架，實現一套程式碼跨平臺執行。更多細節可以閱讀Jerry的文章： SAP移動應用解決方案之一：HTML5應用 + Cordova = 平臺相關的混合應用 。

現在大家看到下面這張截圖，就是C4C移動端App的介面。雖然是在手機上，但依然可以看出，這是CRM經典的L-shape UI佈局。左邊導航欄，上方header bar以及右下方大塊的工作區域。

作為C4C的使用者，我們以銷售代表為例，他/她們會在巡店，客戶拜訪和各種市場活動時使用C4C 的移動端App。那下面我們就以銷售代表在系統裡查詢一個opportunity(商機)為例，看一下C4C的表現。

首先我們開啟App，從左邊導航欄選擇銷售機會檢視，進入右邊工作區列表，找到需要的銷售機會並開啟。

作為一名銷售代表，整天風裡來雨裡去，在跑市場的時候可能只需要一個簡單的服務或者應用，能夠快速查詢某個商業活動或快速建立銷售機會。基於以上業務需求，以及微信在中國的市場地位和小程式的特性。我們組的同事（程式媛Kellyn，關鍵詞：居老師）做了一款C4C小程式，部分介面如下：

開啟微信後，透過小程式入口，我們可以迅速啟動小程式，登入後就是appointments和opportunity的列表。從上圖我們可看到，在小程式底端有兩個標籤頁可以實現兩個服務的切換。

點選列表中任意一條記錄，進入明細介面，並且和C4C中一樣也是以不同的標籤頁(我們內部稱這些標籤頁為facet)去呈現資料。

從頁面佈局上來講，這個微信小程式的頁面佈局和微信與支付寶的佈局(如下圖所示)類似，都是頂部導航欄, 中間工作區，底部標籤區域用於切換不同的頁面或應用。大部分國內使用者比較偏向，或者說習慣這種頁面佈局。

綜合來看，C4C app短期內不會做成微信小程式的頁面風格，但如果能有一些類似微信小程式這樣輕量級的服務應用配合C4C一起使用，相信客戶的工作效率會得到很大提升。

作為開發人員，如果我們接到了需要 把C4C的某些業務功能用微信小程式實現 的開發任務後，怎樣才能快速的開發出這樣一套小程式應用呢? 架構上與C4C整合微信公眾號類似，主要分為三大塊：

• 前臺頁面的微信小程式實現

• 微信Agent Server(有時也稱為微信中間伺服器，訊息伺服器)

• C4C後臺系統，把C4C業務資料透過某種介面暴露給外部消費者

在上面我給大家提到的我們開發的微信小程式例子中，C4C作為後臺系統只需要提供RESTful的API，我們直接用的C4C 標準的OData Service。關於如何用各種程式語言去消費這些標準OData Service，請參考SAP官方的github：

Agent Server的作用主要是請求的分發，使用者的登入和授權以及解決微信小程式訪問C4C OData Service的跨域問題。關於登入和授權，在這個例子中，我們只是簡單用郵箱賬號匹配了C4C後臺的一個Business User。

下面我們就以一個簡單的“Hello World”來幫助大家熟悉小程式的開發。首先，我們需要去微信小程式的官網上完成註冊並下載小程式開發的IDE。如果你要開發一個需要過審的小程式，還需要申請小程式的AppID。

這裡簡單介紹下AppID和OpenID兩個概念，AppID相當於小程式的一個唯一辨識，用於稽核和發版。OpenID這個概念，如果大家已經做過微信公眾號的相關開發應該不會陌生：掃描了小程式的二維碼後，就會自動基於該使用者生成一個OpenID，它是一個用來辨識當前使用者的一個technical Field。

註冊完所有資訊後，開啟微信小程式開發平臺，並建立一個快速啟動模板，下圖就是小程式的Hello World工程在小程式開發IDE中的介面。

我們來簡單看下小程式IDE的介面構成。首先是頂部的工具欄，用於IDE頁面佈局和其他功能的配置。左邊是預覽介面，小程式會在專案開啟時就自動執行並呈現在這裡，它與底部的除錯介面可以說是完全克隆Chrome的開發者工具，經常使用Chrome開發者工具的朋友用起來肯定覺得比較順手。關於Chrome開發者工具的使用技巧，也可以參考Jerry的文章  Jerry和您聊聊Chrome開發者工具 。

再加上檔案目錄和程式碼編輯區，大部分割槽域可以設定隱藏或以新視窗的方式彈出，所以從介面上來看還是比較簡潔的。

接著，我們來看看這個Hello World小程式的功能。整個程式有兩個介面，第一個介面就是截圖中看到的當前使用者的微信頭像和暱稱，下面就是Hello World的文字。當點選使用者頭像之後，跳轉到第二個介面，是記錄日誌log的，小程式每次啟動時都會寫入一條log，內容就是當前的時間日期。這個log會隨著清除快取而被刪除。

基本瞭解Hello World的功能後，再看檔案結構就更容易了。我們先來看看小程式框架中四種型別的檔案：

· .js檔案，基於JavaScript的邏輯層框架

· .wxml檢視層檔案，是小程式框架設計的一套新的標籤語言，用來描述頁面結構

· .wxss樣式檔案，用於描述WXML的元件樣式

· .json檔案，配置檔案，用於單個頁面的配置和整個專案的配置

小程式包含一個描述整體程式的app.js和多個描述各自頁面的具體實現檔案。

app.js 控制整個程式的邏輯，是整個專案的入口程式。比如在這個Hello World小程式中，專案啟動時檢查localstorage並寫入log，完成微信使用者登入和獲取使用者User Profile都是在這裡完成的。app.json負責的是程式佈局頁面的一些公共設定。還是以這個Hello World小程式為例，這個程式中首頁和日誌兩個頁面需要在app.json裡註冊，還有整個window object的屬性控制，比如我們看到的navigation bar上的文字和顏色，另外還包括底部tabBar的表現行為，例如可以新增多少個tabButton及它們顯示的先後順序。app.wxss 就是小程式的公共樣式表，就像我們做UI5開發時stylefolder裡的basefolder。

Pages資料夾下有兩個子資料夾index和log，分別對應Hello World小程式的首頁和日誌頁面。每個資料夾下對應的就是剛才介紹過的四種檔案型別，同時我們發現在這一級目錄下也有json檔案和wxss檔案，意味著頁面級別的配置資訊和樣式資訊，既可以在下級目錄重寫，也可以從小程式級別繼承。

剩下的utils資料夾，透過名字可以看出實際上放的就是一些公共方法，方便呼叫。

Project.config.json存放的是IDE的配置資訊，例如JS庫的版本，編譯型別是小程式還是小遊戲，程式碼上傳時的壓縮策略等等，同時AppID也是記錄在這裡的。

我們再來透過具體的程式碼片段來理解小程式的開發，上圖是Hello World小程式的檢視層和邏輯層。從UX的角度來說，如果使用者沒有登入，會顯示一個獲取頭像暱稱的按鈕；如果登入過，就顯示微信的頭像和暱稱。我們可以看到，檢視層裡已經不是我們原來寫傳統HTML時用到的div，p，span等HTML原生標籤，而是經過微信小程式封裝的view，button，text等標籤，另外還夾雜著一些ifelse判斷和花括號的繫結。

在傳統的Web開發中，我們透過JavaScript程式碼收集來自DOM上的事件，並把狀態記錄在JavaScript變數裡，再透過呼叫DOM的API來改變DOM的屬性或行為。當專案越來越大或業務變得複雜時，程式碼裡的互動邏輯和狀態控制邏輯會非常混亂。而微信小程式採取了MVVM的開發模式（類似Vue），把渲染和邏輯分離，不讓JavaScript直接操作DOM，而只關注狀態變化，這樣實現了Model層和View層的解耦，程式碼結構會變得清晰。

聽到這裡相信大家對微信小程式的開發已經有了一定了解，我們不妨再回過頭來看看小程式的定義。什麼是小程式？這是摘自小程式SDK首頁上的一句話：

微信小程式是一種全新的連線使用者與服務的方式，它可以在微信內被便捷地獲取和傳播，同時具有出色的使用體驗。

張小龍對小程式的定義，則主要強調的是 用完即走 的概念。無需安裝解除安裝，隨時可用，無處不在。

現在是移動網際網路時代，Native App依託於作業系統，效能穩定，可擴充性強，擁有更好的使用者體驗，短時間可能無法被取代；Web App開發成本低，更新快，無需安裝解除安裝，使整個服務輕量化，操作簡便化，正強烈地衝擊原生應用的市場。服務的輕量化是方向，微信小程式似乎就是在尋求兩者中的平衡點。而今天這篇文章介紹的原型開發，體現了SAP成都研究院C4C開發團隊在如何充分利用微信小程式這些優勢來改善SAP C4C客戶使用我們產品的使用者體驗的一些嘗試。

本文介紹的微信小程式的原始碼，可以從“居老師圈外女友” Kellyn的github上獲取：

這裡Kellyn也借這個機會，感謝同事李曉剛對她的畢業論文的撰寫和釋出付出的辛勞和心血。

如果大家對C4C同微信小程式的整合有更多的問題，或者有一些您想到的和微信整合相關的功能，希望新增到C4C標準產品中去，歡迎透過這個公眾號同我們聯絡。感謝閱讀。

更多閱讀

SAP成都研究院的C4C開發團隊的同事們已經寫過很多關於C4C的技術文章了，列表如下：

• C4C和微信公眾號整合系列教程

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

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

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

• SAP Cloud for Customer Extensibility的設計與實現

• 機器學習在SAP Cloud for Customer中的應用

• SAP移動應用解決方案之一：HTML5應用 + Cordova = 平臺相關的混合應用

• 打通C/4HANA和S/4HANA的一個原型開發：智慧服務創新案例

要獲取更多Jerry的原創文章，請關注公眾號"汪子熙":