小程序跨端框架介绍
跨端技术产生背景
应用多平台投放
自微信推出小程序开始，各大厂商都针对自己的平台推出了相应的小程序的方案，可以说是层出不穷，基本上每一个厂都有一个对应的小程序的一个方案（如下图所示）。
但是很多第三方开发者或者厂商开发的应用不只是投放至单一平台的。很多时候有一码多投的需求，在这种情况下，开发者不得不需寻求跨端解决方案。
代码高可复用
如何做到代码高可复用是开发者痛点之一
比较典型的反面案例是：
同步课模块我们做了三个版本
分别是xyAPP版、xy小程序版、wxAPP-H5版wxAPP与小程序版本差距过大
wxAPP即将迭代到6.0版本，首页和课程课程板块改动较大，
而wx小程序在最近一年才不疼不痒修复若干BUG，这些BUG还是因为版本相差过大导致…
使用现代技术提升效率
大家知道，通过这些年的发展，高效的前端框架层出不穷。
反观微信传统的小程序开发模式，是非常低效且痛苦的。
每个页面由html、css、js、json4个文件。
无法使用双向数据绑定和状态管理，编写代码非常低效。
很多开发者想着使用现代前端框架来解决开发体验的问题，所以也会去使用跨端框架，比如基于Vue或基于React的第三方跨端框架。
上述三个痛点总结下来就是两个词：”跨端和效率”
“跨端 & 效率 需求催生大量跨端框架”
这也是大厂为什么都要开发跨端框架的原因。
目前我们选择的跨端方案是uni-app。关于具体选型，这里就不讲了。
跨端框架的特点
如何做到跨端和提效，以及他有什么优势呢，下面让我们来看下 跨端框架的技术特点
write once, run everywhere
一处编写，多端运行
我们知道跨端框架能过够编译打包成H5以及各种小程序
对于大前端来说，使用现代前端框架，开发更快
对于服务端来说，只用出一套接口即可
站在开发者角度：降低开发成本、提升研发效率、代码重用
站在企业角度：支持多平台、触及更广的市场、降低前期成本
那么他是如何做到 一处编写 处处运行的呢？
我们看第一张图，各端常用组件和API都有交叉的部分。
跨端框架将常用的组件、JS API 进行封装如第二张图所示，开发者只要按照标准规范开发就能满足大部分业务需求 并 保证兼容性。
对于一些平台特性以及定制化业务需求，我们可以通过条件编译的方式来解决。
条件编译简单点说就是通过标记，不同平台编译不同代码，一个工程里优雅的完成了平台个性化实现。条件编译最早出现在 C 语言中，解决 windows、mac 等不同系统编译问题。
条件编译可以用在组件上，不同平台显示不同内容。可以用在样式上，不同平台呈现不同效果。用在脚本上，不同平台执行不同逻辑或调用专有api。
相比同时开发多端，跨端在效率上至少可以提升50%。
性能优化
微信等原生框架耗时主要在 数据变动及渲染 上，开发者若不单独优化，则每次都会传递大量数据。之前做过的xy小程序，每个页面数据渲染前，都需要花较多时间在数据合并优化上。
而 Uni-app、Taro 等跨端框架都在 赋值渲染前 做diff对比计算，每次仅传递变动的数据。
如图所示
随着 列表数量不断增加，页面渲染列表花费时间也越来越长。我们看到使用跨端框架后渲染性能强于 优化前的原生框架。
这里可能有人会问，性能真的优于原生吗？其实并不是，针对每个场景，我们都可以用原生写出性能最佳的代码。但是这样做工作量太大，实际项目开发中需要掌握效率与优化之间的平衡。跨端框架的优势在于能让我们在书写更有效率的代码、拥有更丰富的生态的同时，还带来了不错的性能。
跨端UI框架支持
大家可以打开钉钉，查看“内部小程序DEV” 体验一下
UI框架，可以避免我们重复造轮子。
关于高性能上面已经说了，不再赘述。
第二点，组件都是多端自适应的，底层磨平了很多小程序平台的差异及BUG。
第三点，可以自定义主题风格，并在此基础上扩展我们自己的业务组件
最后一项是实时免打点，在后续开发中我们再深入研究
站在开发者角度，使用现代前端框架，让我们开发更高效，跨端框架集成了大量高效前端工具
直接使用工具预编译样式
支持最新ES新标准，如Asncy/Await、Object.values、Promise
状态管理，参考Vuex和Redux
双向数据绑定
过滤器
不用将WXSS、WXML和JS代码分离到3个不同的文件中
确保效果一致性
站在产品角度和设计角度
保证各平台小程序、H5在UI上一致性，设计稿无论是1080px还是750px进行设计，通过少量配置后框架可自动转换比例，页面可等比缩放，还原度更高
这也是我们目前 前端H5项目 采用的主流方案。
业务增强
灵活编译，功能增强
a. 框架提供小程序SDK ，让APP能快速获取小程序的能力，如右图所示
我们知道小程序体验优于H5，后期产品可以考虑下部分模块使用此功能
b. 交互体验增强
特别是可以有效减少白屏、弱网体验较差的问题
c. 定位、相册、水印以及其它系统API增强
对于培训会签到以及定位功能- 钉钉小程序、H5微应用都支持定位
- 微信小程序（非特定类目）不支持定位。可以灵活编译成H5，使用微信js-sdk支持
H5微应用中调用相机和相册以及添加水印等API已不再支持，很有可能突然哪一天就无法使用，而小程序API支持
技能延展，高效协作，提升业务能力
轻量且强大的IDE，类Vue简单语法，前端和移动应用开发人员很容易上手，框架支持编译成小程序、H5、Android、IOS。让开发人员技能得到延展，也让前端与移动端组加交流深，可以更高效协作开发
项目应用
跨端框架可以应用在很多地方
应用产品：
wxAPP6.0即将启动开发，wx小程序微信版、钉钉版也将在之后由移动应用组进行全面升级
同时wx中例如：园所模块、同步课、线下培训等等在后期迭代过程中也可逐步替换成小程序以增强体验
面向家庭的ytxy
新的家庭产品（数字资源）项目，未来是否有 应用多投 的需求，我们也需早做准备。
管理产品：
企业H5微应用逐步迁移到企业内部小程序
目前部分模块准备使用跨端框架开发，编译成小程序程序
最新的开发文档，11月1日才更新 支持小程序嵌入已有的H5微应用这项功能，在我写PPT之前还没有，我们可以平滑的过渡。
小程序相比微应用有什么有点呢？
一个是性能上，首次加载略慢，后续加载快
二是体验上接近Native，弱网体验也更好，不会出现弱网白屏
三是调试方便，涉及到钉钉API，不用真机调试在电脑上就可以调试
开发注意事项
深入学习各端小程序开发文档，深入了解其特性，只有这样才能解决定制化和差异化问题，同时知道怎么处理可能出现的奇怪兼容性BUG
性能问题
虽然框架帮助我们解决常规性能问题，但若要编写性能更好的代码，就必须严格按照标准规范来。
例如：避免视图层和逻辑层频繁进行通讯，减少组件数量、减少节点嵌套层级（小程序有限制，节点超过1024*1024就会直接崩溃，其实没到这个数就非常的卡），优化数据更新…
注意框架的兼容性
小程序端没有限制，H5及App端需注意。
vue2兼容性最好，
由于国内的特殊性，使用vue3只能支持内核大于53的版本的系统。android集成x5内核能够解决这个问题。
条件编译
支持平台越多，条件编译代码也就越多。推荐将差异性脚本和样式集中管理，方便后期维护。
CSS兼容，避免使用不支持的选择器，注意同层渲染的特殊性。使用推荐布局模型，这样兼容性最好。
总结
说了这么多，大家对小程序跨端框架应该有了一些了解，下面我来总结一下。
任何技术方案首先要服务于实际业务需求，技术的选择也需根据研发团队成员的技术方向和具体情况而定。在这个做项目做产品讲究短平快、组件化的时代，对于我们精简后的团队，选择跨端框架应该是最为适合。
最后分享一个视频
这是迪士尼动画 “小熊维尼”和“丛林之书” 的对比视频。
华特·迪士尼获得了56个奥斯卡金像奖提名和7个艾美奖，是世界上获得奥斯卡奖最多的人。他创建了经典模板来重复在他的电影作品中使用。80%标准化和20%定制化，效率提升了，作品也同样精彩。
在我们信息部工作中，我们收集到各种各样的需求。
我们能否在产品设计、开发上高效的提供标准化和定制化技术方案呢。
希望此次分享能给大家带来启发，让我们群策群力，在工作上能突破常规，更加高效，达成新学期目标。
我的分享到此结束，感谢大家聆听。
参考资料
跨平台方案简介
小程序云开发一体化方案
Taro跨端实践
小程序多种开发方式对比 - 跨端？低代码？原生？还是云开发？
主流跨端技术比较
跨平台移动端框架UniApp的应用实践
uniapp与其他对比
主流跨端技术实现 （小程序跨端）
小程序多端框架全面测评
小程序原生开发与第三方框架选择
uni-app和微信原生开发的详细比较
微信小程序的原生框架和taro对比
IT标准化和定制化
uni-api
小程序跨端技术的核心