我们是如何构建移动端低代码的

上周，有个网友找到我，问我们的低代码平台有没有移动端，说的是他们自己电脑端已经实现了，当前没有移动端，想找找移动端的低代码，因为客户要求时间比较短，当前还没有实现移动端低代码。

今天刚好有时间，我写一下我们公司的低代码实现思路，供大家参考，也请大家多多指导指导思路。

首先，我们说下，我了解到当前实现移动端低代码无外乎有三种方式。

第一种：电脑端和移动端一套代码，前台页面全部用服务端后台拼接html响应给前端，在后端进行电脑端或移动端的判断，加载不同的h5代码。

第二种：电脑端和移动端一套代码，完全h5方式，电脑端实现一套代码，用响应式来适配移动端，钉钉、企业微信等直接用h5电脑端h5即可，移动端app套壳。

第三种：电脑端和移动端分别两套代码，移动端前端使用uniapp，后端都是用一套api。

基于以上三种，如果有开发经验的很好理解，优势和劣势需要根据自己公司情况去分析。分析维度：开发人员上手度、公司项目时间周期要求、历史客户是否适配兼容、客户群体需求满足度、后续可扩展性等，从每个维度都要去梳理考虑。

从以上维度我们公司整体考虑后，用的是第三种方式，第三种方式是最适合后续发展的，且成本是可控，上手也简单的，当然里面的坑也不少。废话不多说，我们直接讲下我们的移动端代码体系是如何构建的。

一、使用的HBuilder X 开发工具

既然选择了用uniapp的方式，那我们就必须用他们的开发工具，这款工具有个最大的特点就是更新版本比较频繁，所以有可能会导致我们后期代码的兼容性，这一点我们必须要去适应，千万不要长期半年或一年都不去更新，一旦有新的需求要用新特性，如果我们才去更新，会麻烦很多很多。

uniapp支持一码多端，这个相信大家也是看重这一点，才选择了使用它，当然开源和vue语法特点也是重要考虑点。

HBuilder X 开发工具

二、移动端前端代码结构

我们主要分为这几大模块进行构成。

1. app配置信息、
2. 公用信息、
3. 组件信息、
4. 混入插件、
5. node插件、
6. uni插件、
7. 页面集合、
8. 静态文件、
9. 系统配置及入口文件

appInfo：对应的是app基础的一些配置，比如，api后端接口，前端访问url。

common：共用的一些类和具体方法，比如消息推送，后端接口请求类等

components：前端基础组件，文本框、下拉框、单选框、按钮等；客户定制的组件、审批组件等

hybrid：混入第三方插件、ofd预览、pdf预览等

node_modules：引入的第三方插件，这个npm导入即可

pages：移动端组装的页面

static：包含静态图片、组件、字体、js、css等

uni_modules：uni引用的插件，主要调用手机相关的系统接口

三、后端代码承载

移动端接口路径设置如下：

后端接口承载，和电脑端的接口是用的同一套，这里需要注意的是存放session需要独立出来，我们用的redis：

四、配置过程和结果效果图展示

配置移动端：

配置移动端-列表

配置移动端-填单

配置后手机app上的效果展示：

五、总结分析

移动端低代码相对于电脑端来说，其实会简单很多，主要是底层架构选项会繁琐些，毕竟我们移动端屏幕只有这么大，很多复杂的操作逻辑还是需要电脑端，更多的移动端是用来审批和填写一些不那么复杂的业务。当然，即使是复杂的业务，都是会通过需求设计来进行步骤拆分，让填写人易操作。

以上主要是我们公司的移动端低代码的实现方式，后续我们还会做一次大升级，原因是要适配鸿蒙，适配鸿蒙就必须要用vue3.0,这升级过程中，我们也将会把我们遇到的坑和解决方案分享给大家，感谢阅读。