卫通 CRM 改造项目：移动端掌厅 APP 跨平台开发的挑战与解决方案

hua818

一、背景

卫通CRM转型项目需要开发一款涵盖网上营业厅（网页版）主要业务能力的移动APP。项目整体开发周期短，要求支持多平台（IOS、、H5等）。每个平台都需要相对一致的显示效果和用户体验。多终端、多尺寸设备的适配效果以及SDK接入成为痛点。引入跨平台（混合开发）框架势在必行。

2、移动跨平台技术的演进

过去，最早的发展以.但它是一个非常重的控件，很容易导致内存问题，并且在其上显示的复杂UI的性能并不理想。 JS和代码之间的通信需要上下文切换，这会降低一些性能。

示意图

直到技术革命性的引入，我们才能够把组件放在一边，转而用它们来桥接，将 JS 调用转换为调用，只牺牲一小部分 API 转换的性能。这是跨平台开发的一大进步。框架的构建思路由此而来，Vue深度定制的引入进一步优化了渲染性能和用户体验，而其采用的VueJS通用语法也解决了React平台之间代码差异化过大的问题。需要更多本土知识。

反应及示意图

3. 框架介绍及应用

1. 什么是

uni-app是一个使用Vue.js开发跨平台应用程序的前端框架。开发者编写一套可以编译到IOS、H5、小程序等多个平台的代码。它由（ ）公司推出、运营和维护。

2. 为什么是

与其他移动跨平台框架（如//）相比，在跨终端流畅性、扩展灵活性、性能体验、周边生态、开发成本等方面具有明显优势。

（1）跨终端数量大：一套代码编译后可发布到iOS、H5、小程序等多个平台，跨终端流畅度高，应用显示效果接近一样，才能真正实现生产力。这是相对于其他跨平台框架的最大优势。

（2）优秀的性能体验：是一个体验更好的框架，加载新页面速度更快。并且App支持weex原生渲染，可以实现更流畅的动画效果。相比之下，其所依赖的框架的性能有所欠缺。

（3）生态系统开放、丰富：微信插件市场集成了近千个第三方插件，各种轮子随时可用；同时，由于微信的接口API采用小程序规范，因此微信生态的各种SDK可以直接使用跨平台App。相比之下，React框架的社区活动和文档相对有限。

（4）开发成本低：以前由N个平台开发人员（IOS//H5）完成的开发任务，现在采用通用的前端技术栈来实现，研发、维护、测试成本均大幅下降。

同时，该工具组合可以消除终端调试、可视化创建项目、可视化安装组件和扩展编译器。开发人员的开发体验也变得更好，让他们能够更高效地编写代码。

3、功能框架示意图

在跨平台组件（图中绿色部分）的基础上，还支持特定平台下特殊功能的定制开发。通过引入平台的个性化UI组件或通过条件编译调用专有API，可以实现单个平台的定制化需求，而不影响或干扰其他平台。

4. 应用程序生命周期

支持以下应用程序生命周期函数：

函数名

阐明

uni-app初始化完成时触发（全局仅触发一次）

uni-app启动时，或者从后台进入前台时，显示

当uni-app从前台进入后台时

5.使用方法

(1)下载开发工具：

应用程序开发版本：

(2)安装并打开IDE后，点击工具栏中的File->New->

（3）选择uni-app，输入项目名称，如：uni-test，点击创建，应用创建成功。点击模板中的Hello uni-app即可体验官方示例。

(4) 进入工程，点击工具栏上的运行 -> 运行到浏览器/真机上运行/模拟器上运行。您也可以选择小程序在微信开发者工具中运行。

(5)项目目录结构

6. 开发规范

（1）页面文件遵循Vue单页面组件规范，Vue中的结构仍然使用三个顶级代码块

#%E7%AE%80%E4%BB%8B

（2）组件标签VUE通用模板编写方式，用IOS或原生UI控件编译渲染

（所以不能使用标准的HTML标签，并且要尽量避免JS对DOM的操作）

(3)接口能力微信小程序规范，接口地址前缀由wx修改为uni

(4)样式控制：使用upx作为尺寸单位，指定屏幕的底宽，使用flex布局

%E9%A1%B5%E9%9D%A2%E6%A0%B7%E5%BC%8F%E4%B8%8E%E5%B8%83%E5%B1%80

4. 总结

任何框架首先必须服务于实际的业务需求。技术的选择还必须根据研发团队成员的技术方向和具体情况而定。对于项目建设来说，没有最好的技术框架，只有最适合的技术框架。总体来说，它是一个非常优秀的移动跨平台框架，无论从UI表现力、性能体验、生态成熟度上都经得起推敲。自推出一年多以来，已获得业界认可。他们的知名度也比较高，反馈也不错。它们更适合这个项目和产品短、扁平、快、组件化、小而美的时代，所以我推荐给大家学习和应用。

点击箭头处的“蓝字”即可关注我们！ ！