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

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

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

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

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

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

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

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

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：

https://github.com/SAP/C4CODATAAPIDEVGUIDE

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上獲取：

https://github.com/kellynlee/C4C4Miniprogram

這裏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的原創文章，請關註公眾號"汪子熙":

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