微前端前言

JavaScript026

微前端前言,第1张

微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。

主框架不限制接入应用的技术栈,微应用具备完全自主权

微应用仓库独立,前后端可独立开发,部署完成后主框架自动完成同步更新

在面对各种复杂场景时,我们通常很难对一个已经存在的系统做全量的技术栈升级或重构,而微前端是一种非常好的实施渐进式重构的手段和策略

每个微应用之间状态隔离,运行时状态不共享

微前端架构旨在解决单体应用在一个相对长的时间跨度下,由于参与的人员、团队的增多、变迁,从一个普通应用演变成一个巨石应用后,随之而来的应用不可维护的问题。这类问题在企业级 Web 应用中尤其常见。

1.url 不同步。浏览器刷新 iframe url 状态丢失、后退前进按钮无法使用。

2.UI 不同步,DOM 结构不共享。想象一下屏幕右下角 1/4 的 iframe 里来一个带遮罩层的弹框,同时我们要求这个弹框要浏览器居中显示,还要浏览器 resize 时自动居中。

3.全局上下文完全隔离,内存变量不共享。iframe 内外系统的通信、数据同步等需求,主应用的 cookie 要透传到根域名都不同的子应用中实现免登效果。

4.慢。每次子应用进入都是一次浏览器上下文重建、资源重新加载的过程。

通过监听 url change 事件,在路由变化时匹配到渲染的子应用并进行渲染,这个思路也是目前实现微前端的主流方式。同时single-spa要求子应用修改渲染逻辑并暴露出三个方法:bootstrap、mount、unmount,分别对应初始化、渲染和卸载,这也导致子应用需要对入口文件进行修改。过于基础,成本太高,不建议。

qiankun是阿里推出的一个基于single-spa的微前端实现库,旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。因为是基于single-spa进行封装,所以single-spa的特点也被qiankun继承下来。成本低于single-spa,高于MicroApp。

MicroApp是京东推出的一款基于类WebComponent进行渲染的微前端框架,不同于目前流行的开源框架,它从组件化的思维实现微前端,旨在降低上手难度、提升工作效率。它是目前市面上接入微前端成本最低的框架,并且提供了JS沙箱、样式隔离、元素隔离、预加载、资源地址补全、插件系统、数据通信等一系列完善的功能。是目前市面上接入微前端成本最低的方案。

single-spa github地址: https://github.com/single-spa/single-spa

qiankun官网: https://qiankun.umijs.org/zh

MicroApp官网: https://cangdu.org/micro-app/

初步理解

先抛开钉钉官方推荐的NowaGUI开发工具,以及推荐saltUI样式库。大致理解如下。

那如果是不涉及到钉钉功能的常规H5页面,由管理员配置后台应用,添加对应链接即可。

如需要钉钉的功能,涉及到access_token (相当于一个许可)进行请求,具体如下,前端负责使用corpId 调用钉钉接口 将结果中的code返回 给后端 ,后端去请求,将获取到的钉钉的access_token等信息返回。

具体步骤

首先得有这个项目的开发权限,

其次需要管理员,后台新建微应用,可以看到这个应用的 corpId

前端 要引入 钉钉官方的js文件

然后 通过一个钉钉的请求 用corpid获取code 将code发送给后端,由后端使用code获取到钉钉方的数据

【注意】正常情况下access_token有效期为7200秒,有效期内重复获取返回相同结果,并自动续期。

相关补充

钉钉官方开发文档 获取access_token https://open-doc.dingtalk.com/microapp/serverapi2/eev437

PS :

步骤1 官网链接如下 https://open-doc.dingtalk.com/microapp/isv/ytudoa

步骤2 官网链接如下 https://open-doc.dingtalk.com/microapp/isv/oivs5z

步骤3 关于这个js说明 官网(https://open-doc.dingtalk.com/microapp/dev/welcome-to-lark)

钉钉功能调用

部分钉钉功能是不需要鉴权,不过也要完成上一步的引入,具体信息如https://open-doc.dingtalk.com/microapp/dev/swk0bg

钉钉鉴权(https://open-doc.dingtalk.com/microapp/dev/uwa7vs)

如果是调用钉钉的一些功能,譬如Ding,打开通讯录,钉钉聊天等,在上述的基础上还需要,做钉钉jsapi的鉴权操作。

钉钉官方Jsapi文档 https://open-doc.dingtalk.com/microapp/dev/welcome-to-lark

如何鉴权

鉴权操作需要在进行调用功能之前执行即可。

调用要求

鉴权成功与否

调用钉钉功能的接口的通用格式,如下官网图(https://open-doc.dingtalk.com/microapp/dev/welcome-to-lark)

功能测试

钉钉功能 测试地址 ,就是那个鉴权里面的功能 ,https://wsdebug.dingtalk.com/,手机扫码进行查看,个别需要输入特定参数,参数具体信息,https://open-doc.dingtalk.com/microapp/dev/about

相关工具与资源

NowaGUI https://nowa-webpack.github.io/

Nowa 是一个跨终端的可视化的 web 开发工具,旨在帮助用户部署环境,简化项目的创建、构建、开发以及调试流程。

内置了一整套 webpack 构建体系,提供了简洁而强大的配置界面。

saltui https://salt-ui.github.io/

钉钉官方合作 高效、简洁的移动端UI组件库

手机钉钉小程序开发者工具 以及如何调试 等 https://open-doc.dingtalk.com/microapp/kn6zg7