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

時間 2020-06-06

原文原文鏈接

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

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

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

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

除了C4C大衛哥之外，Jerry還知道其餘一些名叫大衛的帥哥。最聞名中外的大衛莫過於收藏在乎大利弗洛倫薩美術學院的大衛大理石雕像了：小程序

而後就是八零後的青春回憶，曼聯名宿大衛.貝克漢姆：微信小程序

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

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

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的技術文章了，列表以下：