国企的app前端是怎么做的？献给外包到国企的小伙伴们

刘程锦
378 阅读7分钟

众所周知，大部分国企的app都是外包给外包团队做的，一个国企app项目，模块众多，每个项目组的相互之间又没有联系。那么他们是怎么将这么多不同团队做的模块相互关联起来的呢？ 目前大部分的app都是采用的混合开发的方式。

什么是混合开发？

混合开发是一种同时使用多种技术和框架开发移动应用程序的方法。它结合了本地应用和Web应用的优势，允许使用通用的Web技术（如HTML、CSS和JavaScript）来构建跨平台的移动应用。

在混合开发中，应用程序的核心部分通常是使用Web技术构建的，而底层的原生容器（如WebView）则提供了访问设备功能和原生API的能力。这样，开发人员可以使用熟悉的Web技术来构建用户界面和业务逻辑，并在原生容器中运行应用程序。

以下是一些常见的混合开发框架和工具：

  1. Apache Cordova/PhoneGap: Cordova是一个开源的移动应用开发框架，允许使用HTML、CSS和JavaScript构建跨平台的移动应用。PhoneGap是Cordova的商业版本，提供更多的功能和支持。
  2. React Native: React Native是由Facebook开发的框架，使用JavaScript和React构建原生移动应用。它允许开发人员编写一次代码，然后在多个平台上运行，生成原生的用户界面。
  3. Flutter: Flutter是由Google开发的移动应用开发框架，使用Dart语言编写。它提供了一种快速构建高性能、跨平台移动应用的方式，并具有自己的渲染引擎和组件库。
  4. Ionic: Ionic是一个基于Web技术的开源框架，使用HTML、CSS和JavaScript构建移动应用。它结合了Angular框架和Cordova插件，提供了丰富的UI组件和原生功能的访问。

这些框架和工具都提供了丰富的功能和开发工具，使开发人员能够以更快的速度构建跨平台的移动应用程序。选择适合你的项目需求和技术栈的混合开发框架，并根据具体情况选择合适的工具和库进行开发。

以上几种方法在我司都没有采用，因为你不能指望一个从2012年开始就存在的app，用这些技术，到目前为止我已经经历过了 jquery，vue2，vue3，打包方式，也有webpack vite 等。

还是选择最简单的webview一把嗦吧

基于 Web 的 widget 指的是使用 Web 技术（HTML、CSS 和 JavaScript）构建的 widget。这样的 widget 可以被嵌入到网页或其他支持 WebView 或 WebKit 组件的应用中。

为了创建一个基于 Web 的 widget，你通常需要创建一组 HTML、CSS 和 JavaScript 文件，这些文件定义了 widget 的外观和行为。然后，你可以将这些文件打包到一个应用中，或者将它们部署到一个 Web 服务器上。

在应用中使用这样的 widget 时，你会使用一个 WebView 或 WebKit 组件来加载和显示这个 widget。WebView 或 WebKit 组件就像一个小型的 Web 浏览器，它可以加载并显示 HTML 内容，并执行 JavaScript 代码。因此，你可以使用它来在你的应用中显示一个基于 Web 的 widget。

这种方式的好处是，你可以使用熟悉的 Web 技术来创建 widget，而不需要学习特定平台的编程语言和框架。此外，基于 Web 的 widget 通常可以在多个平台上使用，只要这个平台支持 WebView 或 WebKit 组件。

然而，也有一些缺点。比如，基于 Web 的 widget 通常比使用原生技术开发的 widget 性能差一些，而且在访问设备的硬件和操作系统服务时可能会受到限制。

安卓和ios都有相对应的技术，这里就不再赘述

。

方法简单，不限制技术，你想用什么用什么。

一般这种方式开发的app，前端只需要负责页面的展示，如果需要调用原生的功能就需要封装一个js文件，将原生的功能通过挂载到windows对象当中去获取原生的一些能力 比方说这样，这是vite 工程里边的index.html


export const useUexCoreRequest = <T = any>(data: UseUexCoreRequest): Promise<T> => {  
return new Promise(async (resolve, reject) => {  
let onlyOne: unknown = userStore.getToken;  
if (!onlyOne) {  
onlyOne = await init().catch((err) => {  
reject(err);  
});  
}  
const baseURL = data.basicUrl ? data.basicUrl : globalSettings.apiUrl;  
const json = {  
url: baseURL + data.url,  
notShowLoading: data.notShowLoading === 0 ? data.notShowLoading : 1, // 0 显示loading 1 不显示loading  
type: '01',  
data: {  
onlyOne,  
...data.data,  
},  
};  
  
console.warn('request ==>', json.url);  
console.log('req_param:', json);  
  
$myUexCore(UexCoreEnum.REQUEST, json, (res) => {  
console.info('************ response ***********', '\n', json.url);  
console.log('res:', res);  
  
res.code = res.code.toString();  
resolve(res);  
// if (res.code === '1') {  
// } else {  
// console.log(res, '提交失败');  
// reject(res);  
// }  
});  
// window.uexCore.request(json, (res) => {  
// res.code = res.code.toString();  
// if (res.code === '1') {  
// resolve(res);  
// } else {  
// reject(res);  
// }  
// });  
});  
};

可以自己封装一个简单的promise，使用原生$myuexcore(随便起的名字)，因为这种用了很多年的方法，大部分都是裁采用的回调函数的方式，自己稍加修改就可以

跟原生是怎么桥接的？

在vite功能的public文件夹下边粘贴上 config.xml

<?xml version="1.0" encoding="utf-8" standalone="no"?>  
<widget appId="zhny-wsgw" channelCode="0000" height="480" pid="" sreensize="4.5" version="00.00.0000" viewmode="application" widgetId="" width="320">  
<name>zhny-wsgw</name>  
<description/>  
<author email=""/>  
<icon src="icon.png"/>  
<license href=""/>  
<content encoding="utf-8" src="./index.html"/>  
<updateurl/>  
<logserverip/>  
<showmyspace>false</showmyspace>  
<obfuscation>true</obfuscation>  
<bgcolor>#fefefe</bgcolor>  
<orientation>15</orientation>  
<error/>  
<removeloading/>  
<debug/>  
<partobfuscation/>  
<webapp>false</webapp>  
</widget>

其中

<content encoding="utf-8" src="./index.html"/>

就是你自己的项目的首页

如何获取原生能力？

上述所说的只是其中的一种方式，其实市面上也有类似的桥接方法比方说 uniapp 的5+APP Android平台第三方插件开发指导 - DCloud问答，这个其实不是我们前端需要关心的问题，需要什么功能就让原生开发者给你提供相应的api就可以。

为什么不使用uniapp?

一个运行了很多年的app，当时用的时候就没有使用uniapp，现在要求原生组的人去嵌入uniapp的相关api难度太大了，而且uniapp有太多的繁杂的功能，也用不到，你开发app，又不需要开发小程序，而且到目前为止uniapp还没有一套比较好用的组件库。当然了你是纯前端开发原生app项目，那么不用考虑直接uniapp一把梭就行。只是我们目前只是以微应用wgt的方式嵌入到原生app当中，实现app热更新，一个更新频繁的app，总不能上一个新功能就让用户更新一下app吧。 开发完毕之后，打包项目，然后根据公司需求打包成一个微应用 ，用爱思助手打开你们测试的app放到widget（ios手机，安卓手机可能有区别目录下边

使用 vconsole或者eruda进行调试

为什么不使用react native？

1，技术原因：国企目前react用的少，而且对于新人来说，react确实上手难度比较大，既然外包到国企了，外包人员的水平都是参差不齐的，赶紧把项目做起来，高效完成任务才是主要的。 2，你懂得：我所在的公司后端都要求使用国产数据库了，因为react的某些政治倾向问题。假如一个产品使用react native 开发了，但是假如有一天你的这个项目被要求重构，或者一夜之间砍掉整个项目都有可能。而且，目前我所在的公司前端是禁止使用react的。领导不管别的，vue是国人开发的。能用vue就用vue.可能有些人会反驳我，但是没办法，现在我们这种学历低，技术没那么出众的人，能有口饭吃就不错了。起码国企不会拖欠你的工资，即使干完活把你辞退了。你还可以找下一份工作做。能多挣点钱就多挣点钱吧。我们改变不了什么，先有口饭吃，慢慢在工作当中提升技术。

题外话

学好英语，英语真的很重要，推荐赖世雄美语从头学，从赖世雄美语音标开始读起。英语的听说读写在国内来说，口语是最重要的，也是最能装逼，能给你带来收入的，把口语练好。鹦鹉都能学舌，更何况人呢。 用abobo这个软件学英语，影子跟读法，费曼学习法，艾宾浩斯遗忘曲线。结合自己的实际情况。 45岁之前都不晚，像我们这种低学历，进不了大厂的程序员，也不用担心35岁失业。大不了就做个兼职前端， 从现在开始攒钱，实在不行就润出去。润出去也不难，从现在开始攒钱在你45岁之前攒够30万，出国留个学，能早点结婚就早点结婚，早点要孩子就早点要孩子。到时候带着老婆夫妻双打，带着孩子一起润出去。别灰心，别绝望。Everything will be fine.​

自封装了一套 vue3+vite+ts+vant的快速开发框架

项目地址 badlym/van-view-template (github.com)

后续在接着写吧，感兴趣的小伙伴可以看看

avatar
文章
阅读
粉丝