Odoo 与小程序/Web

不念不忘少年蓝@ 2023-10-03 11:11 34阅读 0赞

Alex，神州数码云基地高级前端开发工程师，在航空、铁路、工业控制、CRM/ERP 等领域有丰富的项目研发与管理经验。

### 背景 ###

本文是从前端的角度 探索 Odoo 客户端如何 延伸至 小程序端. 以及如何定制化 客户端的主题。

在 Odoo 组 黄华信 章磊 的支持下 前端组 完成了本次调研的 移动端与Web端 Demo 开发, 借此向他们致谢。

### 概述 ###

采用前后端分离的Odoo底层架构对Uniapp接入到Odoo提供了支持。

Web开发同样可以复用这种接入能力. 降低前端定制化开发成本. 这是本文将Web纳入一起讨论而不是单独分析的主要原因.

前后端的接口依赖于 Odoo RPC Web Service. 掌握 其设计接口规范是该方案的核心与难点。

随着 对于 Odoo RPC 接口规范逐步掌握开发成本会显著降低。

学习成本, 开发成本 是本文 评估最优方案的 主要两个维度。

### Odoo 架构 ###

![94fb4acef507efb3d917f6d6b9307be5.png][]

### 三层架构 ###

#### **展现层** ####

Odoo Web 客户端 对 业务应用 提供完整的支持 包括 登陆会话, 导航菜单, 数据列表, 表单等等. 虽然定制化程度受到约束, 但是能很容易创建一致性的用户体验. UI 定制化不是Odoo核心功能。

Odoo Website 相对而言让 定制化UI更为灵活, 客户端通过 Controller 与Odoo 业务层对接。

以下章节摘录自 [Odoo 12 Development Essentials - Fourth Edition ][Odoo 12 Development Essentials - Fourth Edition]下划线部分文字表明Odoo 具备 完全定制化展现层 的能力 可以和任何平台客户端进行对接。

“ The Odoo server API is very open, and all server functions are available through it. The server API used by the official web client is the same as the one available to any other application. So, *other client implementations are possible, and could be built in almost any platform or programming language. Desktop and smartphone applications can be built to provide specific user interfaces, leveraging the Odoo data and logic tiers for business logic and data persistence.* ”

#### **逻辑层** ####

#### ORM ####

#### RPCs ( Remote Procedure Call ) ####

客户端(展现层) 通过调用PRCs ORM API进行CRUD操作

\* 调研期间 我们在 官方开发者文档中 并未发现 相关的 API 文档

#### **数据层** ####

*不在本文讨论范围*

### UI 相关技术栈 ###

#### **Q-Web** ####

QWeb 是Odoo 使用的主要模版引擎, 在创建View中可以通过其能力进行模版继承方式开发。

#### **Add-on Module** ####

除了框架代码, Odoo所有代码都是基于 Module 单位进行包装。这些 Module 可以随时安装卸载. Module 可以是一个 App 也可以是一段 业务逻辑。可以是对既有App增加新功能。

简而言之 所有 Odoo 的开发都是从 Module 开始。

#### MVC 风格 ####

 models

模型描述业务对象 与业务逻辑 例如 商机, 订单, 合作伙伴, 供应商。

 views

XML 文件用于定义 UI. Odoo 特有的模版语法. 针对一个 Module 一般需要定义 Menu Items,Form Views, List Views, Search Views。

 data

数据文件 例如 初始化 数据。

 controllers

通过在控制器中定义路由结合 View 模版 可以轻松创建一个自定义页面。

 statics

静态页面资源文件。

#### **主题定制** ####

主题定制依然是基于 module。

#### Cross-pages & Unique ####

一个Odoo页面由2类元素组成, Cross-pages 是跨页面使用的元素 例如 header footer。Unique是...

#### Snippets ####

一小段 HTML 代码

#### Styles ####

样式

#### Pages ####

#### **Website** ####

内置的 Website Module 让 Odoo 能提供 CMS 功能。

#### **Widget** ####

Odoo 提供的 Web Client 定义化 中 前端组件化方案。

#### **Mobile app JS** ####

企业版 Web 移动端 JS 库。

### Odoo Owl 框架 ###

#### **为什么要用 Owl** ####

Odoo 是由 不同 module 组合而成, 因为这种机制导致 UI 可能出现不可预期的行为。

目前的前端框架不能满足 Odoo 的需求, 比如较长时间的响应时间。

更为先进的前端架构, 吸纳了React/Vue的设计思想和核心技术。

#### **开销** ####

 Owl 学习成本

 React / Vue 级别的前端库

 Odoo 开发知识

 QWeb 模版引擎

 Evaluation Context

 XML / XPath

### Odoo 企业版 ###

 提供 改进的, 移动端友好的 UI

 版本升级友好

 官方支持

### 定制化 UI 架构 ###

![2803a238d63fe46a8e8e8e968e00034f.png][]

图一

### 前后端分离 ###

从早期开始 Odoo 产品内部逻辑分层 前端层 和 后端层 即已分开, 并且通过 RPC 风格 接口暴露给 Odoo 客户端。

从我司Odoo实战项目经验来分析, 传统的Odoo Web开发在对原有模块视图的简单拓展（字段的增减；组件的增加，比如按钮）是高效且可插拔的（通过拓展模块的安装和卸载) 但是 涉及到 UI 高度定制化 则效率会受到 Odoo Web Client 规则的约束影响, 学习成本高, 开发效率低。

新模块基础功能（非定制化功能）的开发在按Odoo Web Client规则下是高效的。

**通过源码可以找到 RPC - JSON 风格 API 的规范, 基于此我们成功 实现了 Uniapp 与 Web 移动端 登陆/登出/指定业务模块的CRUD功能**

(图1 \*) 中 **虚线内Odoo 与 虚线外的自定义客户端 通过 Odoo RPC 风格 接口 进行通信**

### Odoo Web ###

前后端分离开发并不会代替 Odoo Web, Odoo Web 依然扮演着核心的角色. 只是其职责中模型操作部分由 自定义UI替代 (图1 \*) 中 红色的 关闭图标即传达此意。

### 约束与依赖 ###

前后端分离 后端与前端的约束与依赖关系

*  静态数据

静态数据, 即是 在 **运行时** UI上不会变化的数据, 例如 每个页面的 Title, 导航栏目 等等

理论上可以通过 Odoo API 获取 其依赖于 Odoo

*  动态数据

**运行时** 动态数据 是通过 RPC 接口进行操作, 其依赖于 Odoo 的 RPC 接口规范

*  动作/controller

如果要实现RPC接口范围外的功能, Odoo 端需要做定制化开发

### 组件化开发 ###

Odoo 作为企业级 CRM/ERP 解决方案产品 其内部架构设计 是组件化的, 同样 如果采用前后端分离方式 前端组件可以遵循 Odoo 的设计模式 进行组件化 封装.

**这种方式从根本上改变以页面为单位的开发模式 与** **交付模式**。

### 小程序端 ###

### Uniapp ###

Uniapp 是一个使用 f="[https://vuejs.org/][https_vuejs.org]">Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到 iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。在跨平台的过程中，不牺牲平台特色，可优雅的调用平台专有能力。

#### **功能框架** ####

![62cb3e06cca9a9f82e5c741d9ad97d7e.png][]

图二

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。

#### **优点** ####

*  跨平台
 *  体验与原生一致, 兼容 weex 原生渲染
 *  vue 语法, 微信小程序API, 内嵌 mpvue
 *  生态开放, SDK兼容

#### **小程序适配** ####

#### 跨段兼容 / 条件编译 ####

uni-app 已将常用的组件、JS API 封装到框架中，开发者按照 uni-app 规范开发即可保证多平台兼容，大部分业务均可直接满足。

但每个平台有自己的一些特性，因此会存在一些无法跨平台的情况。

*  大量写 if else，会造成代码执行性能低下和管理混乱。
 *  编译到不同的工程后二次修改，会让后续升级变的很麻烦。

在 C 语言中，通过 \#ifdef、\#ifndef 的方式，为 windows、mac 等不同 os 编译不同的代码。 uni-app 参考这个思路，为 uni-app 提供了条件编译手段，在一个工程里优雅的完成了平台个性化实现。

### UI 定制化 ###

### 技术栈 ###

*  前端技术栈和Odoo松耦合, 前端开发人员无需过多了解 Odoo 技术栈知识
 *  原生 Web / 移动 方案 Odoo 技术栈知识是必备的

<table> 
 <tbody> 
  <tr> 
   <th>定制化类型</th> 
   <th>技术栈</th> 
   <th>备注</th> 
  </tr> 
  <tr> 
   <th>Uniapp 前后端分离</th> 
   <td>Uniapp / HTML / JS / CSS / 目标小程序技术栈 (微信/叮叮/企业微信)</td> 
   <td>Odoo 无关 (除了 RPC 接口规范)<br> 高度自定义</td> 
  </tr> 
  <tr> 
   <th>Web 前后端分离</th> 
   <td>Antd Pro Vue + 低代码UI框架</td> 
   <td>Odoo 无关 (除了 RPC 接口规范)<br> 高度自定义</td> 
  </tr> 
  <tr> 
   <th>Odoo Web 定制化-主题</th> 
   <td>Python / XML / HTML / JS / CSS<br> Odoo (Widget, Qweb,主题 相关内部技术栈)</td> 
   <td>传统前后端不分离开发模式<br> 不推荐</td> 
  </tr> 
  <tr> 
   <th>Odoo Web 定制化-自定义</th> 
   <td>Python / XML / HTML / JS / CSS<br> Odoo (Widget, Qweb, 主题 相关内部技术栈)</td> 
   <td>传统前后端不分离开发模式<br> 不推荐</td> 
  </tr> 
  <tr> 
   <th>Odoo Web 定制化-Owl</th> 
   <td>Owl<br> Odoo ( Qweb, 主题 相关内部技术栈)</td> 
   <td>依然需要掌握Odoo 相关知识<br> 不推荐</td> 
  </tr> 
 </tbody> 
</table>

### 推荐开发模式 ###

#### **开发流程 (不含测试 运维)** ####

#### Uniapp / Web ####

开发流程如下图所示, 和主流前后端开发模式没有本质区别

![99710ff1cadf8470d410352cdddd45d3.png][]

### 定制化方案 ###

#### **Uniapp 定制化** ####

#### **Web 定制化** ####

### Demo ###

基于前后端分离架构我们分别完成了2个业务模块针对 Uniapp 与 Web 的定制化研发Demo. 基于此我们对 该解决方案的 工作量估时进行评估。

### Uniapp ###

传统 Uniapp 开发模式

#### **截图** ####

*  Odoo Web

![397d3f288d6302a903fb5728b5cd7f83.png][]

![2e7aec8494a497752f0e2ac997e776ed.png][]

![b5f035087b4b352d4b0d33532069e0b6.png][]

*  uniapp编译成的微信小程序界面

![ead4c35c88bc9dbdfd3a63a9e117fe8a.png][]

### Web ###

传统 Web UI 开发模式 沿用 已经使用的 低代码开发框架进行

#### **截图** ####

基于 销售/报价单 模块完成 Web 定制化开发

*  Odoo Web

![ec3a582d8a1f859a0014c7e4c6416861.png][]

*  自研Web

[odoo与企业微信融合][odoo]![2caa570ca855610960de225b8a645dcc.png][]

**参考文献：**

1.  [OpenERP Technical Architecture][]
2.  [Odoo 12 Development Essentials - Fourth Edition][Odoo 12 Development Essentials - Fourth Edition 1]
3.  [Odoo 14 - 主题定制][Odoo 14 -]
4.  [Odoo 14 - 定制化 Web Client][Odoo 14 - _ Web Client]
5.  [Odoo 14 - Mobile Javascript][]
6.  [Odoo 14 - Views][]
7.  [Odoo 14 - 对外API][Odoo 14 - _API]
8.  [Odoo 14 - QWeb模版引擎][Odoo 14 - QWeb]

**传送门：**

[PM成长系列之项目初探（上）][PM]

[odoo与企业微信融合][odoo]

[odoo框架源码研读一：前后端交互][odoo 1]

[94fb4acef507efb3d917f6d6b9307be5.png]: https://img-blog.csdnimg.cn/img_convert/94fb4acef507efb3d917f6d6b9307be5.png
[Odoo 12 Development Essentials - Fourth Edition]: https://link.zhihu.com/?target=https%3A//learning.oreilly.com/library/v%3C/u%3Eiew/odoo-12-development/9781789532470/
[2803a238d63fe46a8e8e8e968e00034f.png]: https://img-blog.csdnimg.cn/img_convert/2803a238d63fe46a8e8e8e968e00034f.png
[https_vuejs.org]: https://link.zhihu.com/?target=https%3A//vuejs.org/
[62cb3e06cca9a9f82e5c741d9ad97d7e.png]: https://img-blog.csdnimg.cn/img_convert/62cb3e06cca9a9f82e5c741d9ad97d7e.png
[99710ff1cadf8470d410352cdddd45d3.png]: https://img-blog.csdnimg.cn/img_convert/99710ff1cadf8470d410352cdddd45d3.png
[397d3f288d6302a903fb5728b5cd7f83.png]: https://img-blog.csdnimg.cn/img_convert/397d3f288d6302a903fb5728b5cd7f83.png
[2e7aec8494a497752f0e2ac997e776ed.png]: https://img-blog.csdnimg.cn/img_convert/2e7aec8494a497752f0e2ac997e776ed.png
[b5f035087b4b352d4b0d33532069e0b6.png]: https://img-blog.csdnimg.cn/img_convert/b5f035087b4b352d4b0d33532069e0b6.png
[ead4c35c88bc9dbdfd3a63a9e117fe8a.png]: https://img-blog.csdnimg.cn/img_convert/ead4c35c88bc9dbdfd3a63a9e117fe8a.png
[ec3a582d8a1f859a0014c7e4c6416861.png]: https://img-blog.csdnimg.cn/img_convert/ec3a582d8a1f859a0014c7e4c6416861.png
[odoo]: https://zhuanlan.zhihu.com/p/363248042
[2caa570ca855610960de225b8a645dcc.png]: https://img-blog.csdnimg.cn/img_convert/2caa570ca855610960de225b8a645dcc.png
[OpenERP Technical Architecture]: https://link.zhihu.com/?target=https%3A//doc.odoo.com/6.0/developer/1_2_module_development/1_server_module/
[Odoo 12 Development Essentials - Fourth Edition 1]: https://link.zhihu.com/?target=https%3A//learning.oreilly.com/library/view/odoo-12-development/9781789532470/
[Odoo 14 -]: https://link.zhihu.com/?target=https%3A//www.odoo.com/documentation/14.0/howtos/themes.html
[Odoo 14 - _ Web Client]: https://link.zhihu.com/?target=https%3A//www.odoo.com/documentation/14.0/howtos/web.html
[Odoo 14 - Mobile Javascript]: https://link.zhihu.com/?target=https%3A//www.odoo.com/documentation/14.0/reference/mobile.html
[Odoo 14 - Views]: https://link.zhihu.com/?target=https%3A//www.odoo.com/documentation/14.0/reference/views.html
[Odoo 14 - _API]: https://link.zhihu.com/?target=https%3A//www.odoo.com/documentation/14.0/webservices/odoo.html
[Odoo 14 - QWeb]: https://link.zhihu.com/?target=https%3A//www.odoo.com/documentation/14.0/reference/qweb.html
[PM]: https://zhuanlan.zhihu.com/p/364345129
[odoo 1]: https://zhuanlan.zhihu.com/p/358372874