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

今天的文章来自Wu David，SAP成都研究院C4C开发团队的架构师，在加入团队之前曾经在SAP上海研究院工作，组内同事习惯亲切地称呼他为大卫哥。

大卫哥身高据Jerry目测有1米8以上，是成都C4C开发团队身高最高的几位男同事之一。身体非常结实，是成都SAP篮球队的成员之一。有一次大卫哥坐在自己座位上，一手撑在桌子上认真地看着向他求助的同事电脑上打印的日志，飞机哥张航拍了一张大卫哥的背影，评价道：“从照片里看出了大卫哥发达的背阔肌。”

飞机哥张航后来完成了一幅素描，下图左边正在沉思的男子就是大卫哥。

有随后新加入团队的同事声称晚上曾经花了两个小时翻完了大卫哥朋友圈的所有照片，看到大卫哥以前发的一张高中时期的照片。大家一看，啧啧，这颜值绝对够得上去拍偶像剧了。高挑的身材，发达的背阔肌配上高颜值，使得大卫哥随便往人群中一站都非常地引人注目。

除了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的技术文章了，列表如下：

• 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的原创文章，请关注公众号"汪子熙":