微信小程序容器组件 view 实现水平纵向布局详解
2312
2022-10-16
本文讲述了什么是小程序容器,一文帮你搞透彻,小程序容器框架。
一、小程序容器是什么
1、如何理解容器
“容器”一词来源于英文单词 Container ,翻译过来也是“集装箱”,那为什么要把容器比作集装箱呢?
首先,单从外形上来看,整整齐齐的集装箱不管是尺寸还是材质都是一样的(连我的强迫症都被治愈了),就像是工厂有一台大型机器,只需放入制造集装箱的原材料就能快速的批量生产完全一致的集装箱。
其次,集装箱的作用是对商家的货物进行打包隔离,一般会将不同商家的货物打包装到不同的集装箱内,这样不管是装载还是卸货都不容易混淆。
另外,集装箱还有一个更重要的功能:保护箱内的货物。不管海运过程中遇到强风暴雨还是烈日暴晒,我们对箱内的货物都能放心。
其实我们也希望容器能达到同样的效果,只要我们提供的原材料(镜像)一样,得到的结果(运行实例)都是一样的,并且还能实现打包隔离和轻松运输。
2、前端容器的优势
如果把容器类比成集装箱的话,可以很清晰的汇总容器的优势:“提供的原材料(镜像)一样,得到的结果(运行实例)一样”、“打包隔离”、“轻松运输” 等。
容器内运行的服务或服务对应的多个进程就应该是集装箱里对应的货物了,可以很自然地想到,容器的目的就是为进程集合提供一个独立的运行环境。
那我们具体应该怎么实现 “独立的运行环境” 呢?
2.1 文件系统隔离
每个容器都具有独立的文件系统,单个容器内对文件系统进行增删改查不会影响到其他容器
参考 Linux 下的 chroot 命令,可以将子目录变为根目录
2.2资源隔离
利用 namespace 隔离进程之间的相互可见及通信
使用 Cgroup 限制资源使用率,设置其能够使用的 CPU 以及内存量的大小
所以容器的本质就是一个视图隔离、资源可限制、独立文件系统的进程集合,它将系统的其他资源隔离开来,具有自己独立的资源视图。“视图隔离”,指的是能够看到部分进程、有独立的主机名,“资源可限制”,指的是可以限制内存大小、CPU 使用个数等。
2、小程序容器相较于h5、原生的优势
在国内,时代的搅局者非小程序莫属。
随着微信、支付宝、百度、抖音等小程序平台的推出,小程序生态获得空前的成功,那有没有一种可能,小程序生态和容器相结合,形成小程序容器呢?
小程序容器顾名思义,是一个承载小程序的运行环境,可主动干预并进行功能扩展,达到丰富能力、优化性能、提升体验的目的。
可能大家也会想,H5也能实现为啥非要搞小程序,如果用小程序和我们更常接触和使用的“H5 移动应用”与“移动原生应用”作比较,我们会发现小程序的又具有非常明显的几大优势。
具备跨平台的能力,一套代码可以在 iOS 与 Android 等多个平台中运行;
远超过 H5 的体验(支持本地缓存,Webview,有丰富的组件与支持库);
能获取更多系统权限,完成更加丰富的产品设计;
可以避免 DOM 泄露(不使用常用的 window 对象与 document 对象);
包尺寸有效减少,节省流量和存储
服务不再受发版所限制,支持热更新
二、小程序容器可以发挥的价值
总而言之小程序容器可以帮助开发者快速优化发布包大小,节省流量和存储。同时,App 服务迭代不再受发版限制,快速发布,快速迭代。甚至,基于统一的开发标准,小程序仅需开发一次,便可快速投放至多端。
1、多端投放上架
因为语法的规范性和兼容性,在开发工作中只需要开发一次小程序,就能在不同的应用打开,天然解决跨端痛点。同时,通过IDE工具调试适配后可将小程序投放至例如微信、阿里、百度、字节等开放平台,连接各大流量平台,触及海量用户,满足多端引流的需求。
2、迭代更敏捷
对于例如金融、社交、电商等复杂的业务本身会有频繁迭代的需求,其实较好的方式是将这部分业务剥离改造为小程序,继而通过上下架的形式到 App 中,可以做到热更新,不再需要等待主版发版和频繁的提交App Store审核,满足复杂业务多变的场景。
3、打造开放生态平台
对于有生态建设的企业来说,同样可以通过小程序上下架形式引入第三方商户,在 App 内打造一个自有轻应用集散中心(应用商店),快速覆盖衣食住行、办公协同等各类高频小程序场景,像微信、支付宝一样形成自己的开放生态平台。
三、怎样引入小程序容器
小程序容器很好,很多公司也都是内部在自研,不过仅限于有实力的公司,研发出来也是自己内部在用。例如,腾讯、阿里、字节、百度等大厂都有自己的小程序平台,但他们几乎也都是仅限于内部使用。
更普遍的现实是更多的公司想用但没这个实力搞,如果确实需要一个小程序容器该用怎样的正确姿势获得呢?
这里就推荐下 FinClip ,一个能够让任何 App 运行小程序的解决方案,只需要在你的 App 里面,引入它的 SDK,就能加载运行外部小程序了。除了 SDK,它还提供一个后台管理系统,统一管理小程序的上架和下架,以及收集和分析小程序数据。
使用下来,想谈下对 FinClip 的体验:
遵循微信小程序的开发标准与规范,开发轻松很多
也就是说,现有的微信小程序可以不改一行代码,直接放进你的 App 里面,运行效果保持不变,不必额外二次开发和改造,大大节省了人力成本。
开发者的福音,支持多终端运行
除了移动端的 iOS 与 Android,看到还支持了包括 Linux、Windows、MacOS、麒麟等操作系统。相当于PC 端、车载设备、智能电视都能使用小程序了,看得出来做产品确实很用心。
提供IDE 与文档,上手的学习成本低
提供小程序 IDE 开发工具,界面与微信小程序的开发工具类似,自带调试和真机预览,简单易上手。可以在这个 IDE 里面,对现有项目进行二次开发,扩展功能和接口,或者从零开始写出一个小程序。
而且从官网(finclip.com)看到,FinClip 已经得到了很多大公司的认可,有上百家客户,包括券商、股份制银行、航空公司、车载设备服务商、省级移动警务平台等重要企业。开发者人数超过3万,服务用户达到2500万人,在真实的生产环境经受了百万级的并发压力考验。
FinClip 有社区版,供个人开发者免费使用;也有企业版,不过需要按年付费,或者购买专属私人化服务。
小程序开发上还是推荐主流的前端框架,例如 Flutter、React native、Taro等除了能用于小程序的开发运行还能用到移动端的开发上,在后面的移动端开发中也能起到非常大的帮助。
下面也简单的说说这几个主流框架:
FinClip
FinClip 是凡泰极客研发的一套小程序容器技术,也可以说是小程序SDK Runtime/Engine,提供 Runtime 基于浏览器内核,采用动态语言(JS)和声明式 View 构建(XML),兼容互联网主流小程序技术,可采用 Vue、react 基础上的 DSL 框架。
与Taro、Flutter、Reactive-Native等跨端语言不同的是,FinClip严格意义上讲是一项容器技术。与上述的跨端技术不仅不冲突,还可以完美融合。不管是通过Flutter、Taro、 kbone等开发出来的小程序均可在FinClip当中运行。
这种小程序容器技术,将视图层与逻辑层分离也带来了许多好处:
方便多个小程序页面之间的数据共享和交互。在小程序的生命周期中具有相同的上下文可以为具备原生应用程序开发背景的开发人员提供熟悉的编码体验;
Service 和 View 的分离和并行实现可以防止 JS 执行影响或减慢页面渲染,这有助于提高渲染性能;
因为 JS 在 Service 层执行,所以 JS 里面操作的 DOM 将不会对 View 层产生影响,所以小程序不能操作 DOM 结构的,这也使得小程序的性能比传统的 H5 更好。
Flutter
Flutter作为谷歌的移动 UI 框架,在快速构建 iOS 和 Android 应用及开发、高性能、可移植性上表现优秀,其他也能开发运行小程序。
优点:
1、跨平台;
2、性能强大,流畅,混合开发中,最接近原生开发的框架;
3、Dart语言简单易学;
4、极大降低了开发成本。原来需要招一个iOS、一个安卓,用了flutter后,只需要招一个flutter人员就够了。
缺点:
1、Widget的类型难以选择,糟糕的UI控件API;
2、Dart 语言的生态小,精通成本比较高。
3、开发工具版本升级后,修改量大;
4、原生集成第三方SDK后,兼容性适配是个令人头痛的问题;
5、代码可读性较差(嵌套地狱),对代码质量和管理要求较高。
React native
React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架,RN使用Javascript语言,类似于HTML的JSX,以及CSS来开发移动应用,因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。主要特性:
1、原生的iOS组件
通过React Native,开发者可以使用UITabBar、UINavigationController等标准的iOS平台组件,让应用界面在其他平台上亦能保持始终如一的外观、风格。
2、异步执行
JavaScript应用代码和原生平台之间所有的操作都采用异步执行模式,原生模块使用额外线程,开发者可以解码主线程图像、后台保存至磁盘、无须顾忌UI等诸多因素直接度量文本设计布局。
3、触摸处理
React Native引入了一个类似于iOS上Responder Chain响应链事件处理机制的响应体系,并基于此为开发者提供了诸如TouchableHighlight等更高级的组件。
Taro
Taro 是由京东 - 凹凸实验室打造的一套遵循 React 语法规范的多端统一开发框架。、
一套代码,通过 Taro 的编译工具,将源代码分别编译出可以在不同端(微信小程序、H5、App 端等)运行的代码。同时 Taro 还提供开箱即用的语法检测和自动补全等功能,有效地提升了开发体验和开发效率。
Taro自研了一套打包机制将 AST 不断传递,因此代码分析的速度得到了很大的提高。一台 2015 年 的 15寸 RMBP 在编译上百个组件时仅需要大约 15 秒左右。
在 Taro 中,你不用像小程序一样区分什么是 App 组件,什么是 Page 组件,什么是 Component 组件,Taro 全都是 Component 组件,并且和 React 的生命周期完全一致。可以说,一旦你掌握了 React,那就几乎掌握了 Taro。同样使用声明式的 JSX 语法。相比起字符串的模板语法,JSX 在处理精细复杂需求的时候会更得心应手。
上文就是小编为大家整理的什么是小程序容器,一文帮你搞透彻,小程序容器框架。
国内(北京、上海、广州、深圳、成都、重庆、杭州、西安、武汉、苏州、郑州、南京、天津、长沙、东莞、宁波、佛山、合肥、青岛)Finclip软件分析、比较及推荐。
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~