微信小程序开发实现 tabs 选项卡效果实例代码解析
784
2023-01-25
跨端开发应用实例研究（跨端开发框架）
本篇文章给大家谈谈跨端开发应用实例研究，以及跨端开发框架对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。
今天给各位分享跨端开发应用实例研究的知识，其中也会对跨端开发框架进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！
有过混合应用开发经验的同学，对基于WebView的Hybrid开发模式应该不会陌生。借助于原生端各平台的WebView组件，可以实现Native和JavaScript的双向通信，从而将Web App与Mobile App融合起来，开启混合开发的新模式。
基于WebView的Hybrid开发模式到如今已经非常成熟，不再是一个实验性新技术，而是广泛应用在各大厂商的平台型应用如微信、手Q中。
JSBridge作为连接Native和JavaScript的桥梁，是基于WebView的Hybrid开发模式中的关键点。
在了解其通信原理后，再来看JSBridge究竟是什么。从前端角度来看，可能会把JSBridge理解为业务开发过程中，以全局变量注入到WebView中，帮助调用原生API的JavaScript工具库。这样的理解不够准确，按照我的理解，JSBridge不是一个标准的规范，基于原生系统为WebView组件提供的能力，已经可以建立起WebView JavaScript bridge，即使不再做更高程度的封装，也可以完成从Native到JavaScript的双向通信了。
我们所说的JSBridge，是对底层通道的抽象封装，这一过程包括了原生和JavaScript两侧内容，在原生端需要考虑系统API差异，对上层调用提供统一接口，在JavaScript端需要考虑调用方式，请求管理等内容。JSBridge的设计实现已经是成熟技术了，其设计可以参考 In-depth Profiling of JSBridge 、 Hybrid APP架构设计思路 ，一个安卓端完整JSBridge实现可以参考 JsBridge实现 。
目前，基于WebView的Hybrid开发模式非常成熟，广泛应用于各类平台型App中。实现一个完善的JSBridge是在现有App中集成使用Hybrid开发模式的基础，在完成这一基础设施建设后，大家继续在各个方向深挖，在不同的维度不断优化性能和体验。
多数App的Hybrid部分做到上面部分，已经有了还不错的体验。在我的了解中，空间团队在上面基础上继续优化给出的是当前做的更好的方案。其主要流程如下图所示，详细内容可以参考 QQ空间前端工程师如何做首屏优化
除了在现有App中集成使用这一开发模式，还可以使用这一技术开发独立App。早期的PhoneGap、Cordova、现在的Ionic，是这一领域较为知名的开发框架。
我司前端技术栈曾以Angular为主，一些App也由前端团队基于Angular技术栈选型Ionic。初入团队曾维护过基于Angular 1.x的Ionic App，用于我司投资顾问服务客户的以IM为主、综合一些其他业务，可以算一个比较复杂的应用。
前端技术背景的同学，采用Ionic框架开发App的学习成本不高。开发过程中仍在沿用前端技术，写的仍是Web App,跑在原生WebView容器中。采用Ionic提供的组件库，可以快速搭建项目界面。其扩展原生的机制也比较方便，如有原生能力的需求，并且没有现成实现的，可以自行封装使用，不过这个过程就需要原生开发同学的参与了。在我们的上述App开发中，主要是安卓端消息推送模块由原生开发同学提供了支持，其余对原生能力的需求如拍照、相册访问等常见需求，都有现成方案。
然而，采用Ionic完成上述应用，也有明显不足的地方。首先是聊天列表方面，我们知道，如微信和QQ聊天窗口，这是一个异构的无限滚动长列表，在进入聊天界面时，一般只加载最近的一屏聊天数据，然后通过滚动加载历史消息。在原生端完成这一需求有各种常见手段，而仅靠Web端技术，在各种折腾后，效果都不尽如人意。其次是动画，这里的动画包括了换页动画和其他动画，流畅程度一般。最后是前端开发通病，要处理浏览器兼容性问题，crosswalk只是一个理论解决方案，其体积限制了几乎不会被采用。
Ionic不断迭代，新的版本中依赖新的Angular。新的Angular与Angular 1.x开发体验已经完全不同，如果你还不了解，可以阅读我们团队书籍 揭秘Angular 2 。新的Ionic的开发体验，相比以往也有提升，在其工具链中，提供了拖拽式项目生成工具
同时，Ionic pro提供的开发者工具，为应用整个生命周期提供了完善的支持平台，包括了以下功能，不过，使用需要付费。
站在当下来看，对于前端技术背景开发者来说，如果已有Angular基础，不希望引入过高学习成本，需要快速开发一个复杂程度不算太高、或者对应用性能不是特别敏感的跨终端App，选择Ionic依然是一个可行方案。
然而，既然你已经身在前端领域这样一个技术更迭日新月异的圈子里，还是应该使劲的折腾，关注跨端开发这个主题新的技术热点，接下来我也会继续谈谈在NativeScript、React Native、Flutter的一些体验，可以保持关注。
首先我推荐一个：react native跨端开发应用实例研究，facebook推出的一个跨平台解决方案，去年推出了iOS版，手机淘宝的有一个模块“猜你喜欢”就是用react native实现的，效果还不错，另外今年9月份，facebook推出了android版，大家不妨试一下，这里针对于webapp，做了一个比对：
相对于Webapp的优势：
不用Webview，彻底摆脱了Webview让人不爽的交互和性能问题跨端开发应用实例研究；
有较强的扩展性，这是因为Native端提供的是基本控件，JS可以自由组合使用跨端开发应用实例研究；
可以直接使用Native原生的「牛逼」动画（在FB Group这个app里面，面板滑出带一点果冻弹动，面板基于某个点展开这种动画随处可见，这种动画用Native code来做小菜一碟，但是用Web来做就难上加难）。
相对于Native app的优势：
可以通过服务端远程更新JS，进而直接更新app的页面；
相对于Webapp和Native的劣势：
扩展性仍然远远不如web，也远远不如直接写Native code；
从Native到Web，要做很多概念转换，势必造成双方都要妥协。最终web要用一套CSS的阉割版，Native要费劲地把这个阉割版转换成native原生的表达方式（比如iOS的Constraint\origin\Center等属性）。
另外我以前在CocoaChina上收藏过的一个帖子，整理了许多iOS和Android跨平台解决方案，感觉很不错，现在拿出来分享给大家，希望对题主有帮助。
1、jQuery Mobile
jQuery Mobile是jQuery 在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库，而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。jQuery Mobile文档比较全面，同时有在线工具帮你快速创建自己中意的UI风格。
技术需求：HTML，CSS，jQuery
平台支持: 绝大多数移动浏览器
2、Corona SDK（使用Lua语言）：
Corona SDK的优点：
稳定；支持硬件加速、GPS、指南针及照相机等；支持与Map、Facebook、OpenFient、GameCenter的集成；内建的物理集成；Lua语言比较容易学习；
已经有了一些很不错的应用，至少能够证明这个SDK是可以做出优秀应用来的；不错的社区支持。
Corona SDK不太好的地方：
只支持iOS和Android；Lua语言不是面向对象的；每年都要交授权费（99美元/年）。
另外还有其他的一些补充，比如：
对于Corona SDK不支持的第三方SDK没法自己去集成；编译项目的时候需要把代码上传到Corona的服务器上去编译，不能在本地直接编译；无法扩展Corona的功能；物理模块还有一些缺陷。
3、Airplay SDK（后来更名为Marmalade，不少大的公司在使用Airplay SDK，尤其适用于进行2D/3D游戏的开发）
目前使用Marmalade的游戏有《割绳子》、《植物大战僵尸》、《你猜我画》、Build 'n' Bash 3D、Catch the Monkey、Need for Speed Shift以及WorkSnug Pro等多款游戏。
Airplay SDK文档中还包含多个示例。“感觉受到限制”的开发者还可以在Airplay SDK上进行扩展。开发者需要对C++比较熟悉。
4、Appcelerator（Titanium）
Appcelerator允许使用HTML/Javascript来开发原生app，开发者可以免费使用。目前世界上185个国家中有超多46万的开发者在使用Appcelerator提供的解决方案。
Titanium为Appcelerator于2008年底所推出的跨平台应用程序开发解决方案，目前支持iOS/Android/Blackberry/WM7等行动平台，以及Windows/Linux/OS X这三种主流的桌上型平台。
然而这么做又会来带新的问题，那就是weex所提供的消息机制只能是在单容器内使用，按照官方的说法即这是一个实例级别的事件而不是应用级别的。那么就需要我们自己来做一套消息通知机制供应用级别使用，来解决多weex容器实例以及连通weex、native以及H5。其实这套机制并不复杂，因为原生已经有很多消息机制可以供我们选择了，包括EventBus、LocalBroadcast等等。这里可以详见我的之前有关消息机制实现的文章（传送门： https://www.jianshu.com/p/774b77ddde52 ）
之前说到大多数的weex使用场景是单容器（或者说是单实例）的，因此一般的实现也都是在一个Activity中（以安卓为例，下同）只有一个WXSDKInstance。然后有时候需求就是这么坑爹，在某些原生页面中希望可以内嵌一个甚至多个Weex的容器，那么这时候用来实现Weex容器的就不能再是Activity而是View了。我们需要自定义一个View来实现IWXRenderListener接口，并且在该View内部来维护一个WXSDKInstance，虽然初始化WXSDKInstance时候传入的Context还是Activity，但是好在instanceId是自增的，因此在一个Activity中有多个Weex的View，它们还是可以通过id来区分的。另外在使用View做容器的时候，也需要自己hook Activity的生命周期，来与WXSDKInstance中相应的方法绑定，不然在自定义Module等应用场景中将无法正确拿到Activity的生命周期回调。
想必很多团队在接触或者决定使用weex的时候，所在的项目已经是开发甚至是上线一段时间了，并且大多项目一定会用到WebView承载的H5页面，那么在开发H5相关页面时自然而然会定义很多通用的Bridge能力，比如账号登录机制、通用的loading组件、网络请求代理等等。然而我们在开发weex页面时候则不希望再重复实现这套Bridge，因此我们就需要实现一个适配器，通俗地说就是通过定义一个weex的Module去实例化H5的Bridge并且调用实例的方法。这套机制核心需要关注的是H5的Bridge需要怎么样的环境，我们通过哪种方法来实例化H5的Bridge（大多数情况下会需要用到反射）。此外，这种做法由于无法完全在weex容器中还原一个H5的环境，因此也并不是能100%复用H5的Bridge能力，对于无法复用的，我们还是需要基于weex重新开发一套。
在深度使用weex的时候，weex官方提供的组件会逐渐变得无法满足当前需求，这时就需要我们来做一些自定义的组件。当然这块并不需要用到什么黑科技，weex官方就提供了这类扩展，也就是WXComponent以及WXVContainer。常规的独立组件继承WXComponent即可，类似写一个原生的自定义View，具体的属性以及方法定义也可以参考官方文档（ http://weex.apache.org/cn/guide/extend-android.html ）。对于View的容器组件则需要继承WXVContainer，然后你就可以自定义各种cell，并且通过addSubView方法拿到加进去的cell。
weex官方提供了playground app，帮助你在设备上调试。但对于依赖自己项目环境的功能，就必须在项目内提供一个调试工具了，核心类似playground app，即提供一个扫码功能，能进入weex页面进行调试，对于调试这块功能，我会在后续的文章中详细讲解。
小程序平台现在已经成为一款应用不可或缺的阵地，因此跨端方案自然不能少了小程序这个平台。目前核心做法还是依赖于babel，并且需要在小程序端预先实现一套相对应的组件。详细的内容也将在后续文章中详细展开。
跨端方案既然是以提高效率为目的，那么自然需要有足够的数据来做支撑，因此我们需要在weex的几个生命周期内做好埋点，来统计各种耗时。另外在业务上也会有数据需求，一般也是通过埋点的形式来做统计
多端融合一定是未来移动端开发的一个方向，它除了解决一部分体验问题之外还能提高人效，因此未来各大企业也会越来越多地依赖这项技术。至于具体的方案选型，诸如weex、rn或者flutter，还是需要根据具体的业务场景来选择，目前并没有完美的方案，当然基于这些开源方案来二次开发，从而补足这些方案存在的不足则是更好的了。
对于我个人而言，自身的技术规划加上公司业务需求，有幸在这个时间点能学习到前端知识并且落地这套方案。因此我打算开一个文章系列，记录一下这套方案不断演进过程中的点点滴滴。
这段时间经历了很多事情，说是一夜长大也不为过吧。但是没有时间再自怨自艾了，找对方向，就算再难受爬着也要向前。失去的东西总会回到我们身边，虽然有时并不是以我们希望的方式。
1、Hilo 支持多种模块范式的包装版本，包括AMD，CMD，COMMONJS，Standalone多种方式接入。另外，你可以根据需要新增和扩展模块和类型；
2、极精简的模块设计，完全面向对象；
3、多种渲染方式, 提供DOM，Canvas，Flash，WebGL等多种渲染方案（目前已经申请专利）；
4、全端浏览器的支持和高性能方案，独有的Flash渲染方案，即使在低版本IE浏览器下也可以跑起来“酷炫” 游戏 ； DOM渲染方案能显著解决低性能手机浏览器遇到的性能问题；
5、物理引擎支持——Chipmunk，支持自扩展物理实现；骨骼动画支持——DragonBones，同时内建骨骼动画系统——Tahiti（目前内部使用）；
6、案例丰富，框架成熟，已经经历多届阿里巴巴双十一，年中大促互动营销活动考验；
舞台Stage是一个各种图形、精灵动画等的总载体。所以可见的对象都要添加到舞台或其子容器后，才会被渲染出来。
Stage构造函数接收一个参数properties，此参数包含创建stage的各种属性。
舞台Stage上的物体的运动等变化，都是通过一个定时器Ticker不断地调用Stage.tick()方法来实现刷新的。
舞台上的一切对象都是可视对象，可以是图片、精灵、文字、图形，甚至DOM元素等等。Hilo提供了一些基本的可视类供您使用，比如添加一个图片到舞台上：
要想舞台上的图形、精灵动画等对象能响应用户的点击、触碰等交互事件，就必需先为舞台开启DOM事件响应，然后就可以使用View.on()来响应事件。
接下来，您就可以开始利用hilo提供的各种可视类来创建各种图形、精灵动画，尽情发挥您的创造力，开始您的HTML5 游戏 之旅吧！
Hilo对于开发H5 游戏 的开发者和对Web端渲染感兴趣的小伙伴来说值得一看，Hilo有诸多案例可供参考，如果你想继续深入了解它，可移步官方文档或者Github一探究竟！
在 uniapp 和 taro 这两个之中进行选择 在参了官方和社区示例后最终选择了 taro 。原因在于 uniapp 目前对于 vue3 的支持尚不完全比如说暂不支持 setup 语法糖对于h5的支持比较差 没有支持 vue3 的 ui 框架等等。
node.js
注意tarojs的版本 建议使用 taro 3.0.24 以上的版本
由于引用 node_modules 的模块，默认不会编译，所以需要额外给 H5 配置 esnextModules ，在 taro 项目的 config/index.js 中新增如下配置项：
如果出现类似 Could not find module View in @tarojs/components 的问题，请在进行如下设置：
详情请参考 https://github.com/dexterBo/mall 关于跨端开发应用实例研究和跨端开发框架的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。 跨端开发应用实例研究的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于跨端开发框架、跨端开发应用实例研究的信息别忘了在本站进行查找喔。
本文目录一览：
- 1、跨端开发面面谈之基于WebView的Hybrid开发模式
- 2、如何实现iOS和安卓跨平台的开发
- 3、基于Weex的跨多端融合方案（一）
- 4、阿里跨终端的H5游戏开发解决方案——Hilo
- 5、移动APP开发框架盘点2：Web移动前端框架大全
- 6、使用vue3+ typeScript 开发小程序
跨端开发面面谈之基于WebView的Hybrid开发模式
跨终端移动开发是近期准备总结的一个主题，作为这一系列的开始，首先简单说说基于WebView的Hybrid混合开发模式。有过混合应用开发经验的同学，对基于WebView的Hybrid开发模式应该不会陌生。借助于原生端各平台的WebView组件，可以实现Native和JavaScript的双向通信，从而将Web App与Mobile App融合起来，开启混合开发的新模式。
基于WebView的Hybrid开发模式到如今已经非常成熟，不再是一个实验性新技术，而是广泛应用在各大厂商的平台型应用如微信、手Q中。
JSBridge作为连接Native和JavaScript的桥梁，是基于WebView的Hybrid开发模式中的关键点。
在了解其通信原理后，再来看JSBridge究竟是什么。从前端角度来看，可能会把JSBridge理解为业务开发过程中，以全局变量注入到WebView中，帮助调用原生API的JavaScript工具库。这样的理解不够准确，按照我的理解，JSBridge不是一个标准的规范，基于原生系统为WebView组件提供的能力，已经可以建立起WebView JavaScript bridge，即使不再做更高程度的封装，也可以完成从Native到JavaScript的双向通信了。
我们所说的JSBridge，是对底层通道的抽象封装，这一过程包括了原生和JavaScript两侧内容，在原生端需要考虑系统API差异，对上层调用提供统一接口，在JavaScript端需要考虑调用方式，请求管理等内容。JSBridge的设计实现已经是成熟技术了，其设计可以参考 In-depth Profiling of JSBridge 、 Hybrid APP架构设计思路 ，一个安卓端完整JSBridge实现可以参考 JsBridge实现 。
目前，基于WebView的Hybrid开发模式非常成熟，广泛应用于各类平台型App中。实现一个完善的JSBridge是在现有App中集成使用Hybrid开发模式的基础，在完成这一基础设施建设后，大家继续在各个方向深挖，在不同的维度不断优化性能和体验。
多数App的Hybrid部分做到上面部分，已经有了还不错的体验。在我的了解中，空间团队在上面基础上继续优化给出的是当前做的更好的方案。其主要流程如下图所示，详细内容可以参考 QQ空间前端工程师如何做首屏优化
除了在现有App中集成使用这一开发模式，还可以使用这一技术开发独立App。早期的PhoneGap、Cordova、现在的Ionic，是这一领域较为知名的开发框架。
我司前端技术栈曾以Angular为主，一些App也由前端团队基于Angular技术栈选型Ionic。初入团队曾维护过基于Angular 1.x的Ionic App，用于我司投资顾问服务客户的以IM为主、综合一些其他业务，可以算一个比较复杂的应用。
前端技术背景的同学，采用Ionic框架开发App的学习成本不高。开发过程中仍在沿用前端技术，写的仍是Web App,跑在原生WebView容器中。采用Ionic提供的组件库，可以快速搭建项目界面。其扩展原生的机制也比较方便，如有原生能力的需求，并且没有现成实现的，可以自行封装使用，不过这个过程就需要原生开发同学的参与了。在我们的上述App开发中，主要是安卓端消息推送模块由原生开发同学提供了支持，其余对原生能力的需求如拍照、相册访问等常见需求，都有现成方案。
然而，采用Ionic完成上述应用，也有明显不足的地方。首先是聊天列表方面，我们知道，如微信和QQ聊天窗口，这是一个异构的无限滚动长列表，在进入聊天界面时，一般只加载最近的一屏聊天数据，然后通过滚动加载历史消息。在原生端完成这一需求有各种常见手段，而仅靠Web端技术，在各种折腾后，效果都不尽如人意。其次是动画，这里的动画包括了换页动画和其他动画，流畅程度一般。最后是前端开发通病，要处理浏览器兼容性问题，crosswalk只是一个理论解决方案，其体积限制了几乎不会被采用。
Ionic不断迭代，新的版本中依赖新的Angular。新的Angular与Angular 1.x开发体验已经完全不同，如果你还不了解，可以阅读我们团队书籍 揭秘Angular 2 。新的Ionic的开发体验，相比以往也有提升，在其工具链中，提供了拖拽式项目生成工具
同时，Ionic pro提供的开发者工具，为应用整个生命周期提供了完善的支持平台，包括了以下功能，不过，使用需要付费。
站在当下来看，对于前端技术背景开发者来说，如果已有Angular基础，不希望引入过高学习成本，需要快速开发一个复杂程度不算太高、或者对应用性能不是特别敏感的跨终端App，选择Ionic依然是一个可行方案。
然而，既然你已经身在前端领域这样一个技术更迭日新月异的圈子里，还是应该使劲的折腾，关注跨端开发这个主题新的技术热点，接下来我也会继续谈谈在NativeScript、React Native、Flutter的一些体验，可以保持关注。
如何实现iOS和安卓跨平台的开发
这是个比较专业的问题首先我推荐一个：react native跨端开发应用实例研究，facebook推出的一个跨平台解决方案，去年推出了iOS版，手机淘宝的有一个模块“猜你喜欢”就是用react native实现的，效果还不错，另外今年9月份，facebook推出了android版，大家不妨试一下，这里针对于webapp，做了一个比对：
相对于Webapp的优势：
不用Webview，彻底摆脱了Webview让人不爽的交互和性能问题跨端开发应用实例研究；
有较强的扩展性，这是因为Native端提供的是基本控件，JS可以自由组合使用跨端开发应用实例研究；
可以直接使用Native原生的「牛逼」动画（在FB Group这个app里面，面板滑出带一点果冻弹动，面板基于某个点展开这种动画随处可见，这种动画用Native code来做小菜一碟，但是用Web来做就难上加难）。
相对于Native app的优势：
可以通过服务端远程更新JS，进而直接更新app的页面；
相对于Webapp和Native的劣势：
扩展性仍然远远不如web，也远远不如直接写Native code；
从Native到Web，要做很多概念转换，势必造成双方都要妥协。最终web要用一套CSS的阉割版，Native要费劲地把这个阉割版转换成native原生的表达方式（比如iOS的Constraint\origin\Center等属性）。
另外我以前在CocoaChina上收藏过的一个帖子，整理了许多iOS和Android跨平台解决方案，感觉很不错，现在拿出来分享给大家，希望对题主有帮助。
1、jQuery Mobile
jQuery Mobile是jQuery 在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库，而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。jQuery Mobile文档比较全面，同时有在线工具帮你快速创建自己中意的UI风格。
技术需求：HTML，CSS，jQuery
平台支持: 绝大多数移动浏览器
2、Corona SDK（使用Lua语言）：
Corona SDK的优点：
稳定；支持硬件加速、GPS、指南针及照相机等；支持与Map、Facebook、OpenFient、GameCenter的集成；内建的物理集成；Lua语言比较容易学习；
已经有了一些很不错的应用，至少能够证明这个SDK是可以做出优秀应用来的；不错的社区支持。
Corona SDK不太好的地方：
只支持iOS和Android；Lua语言不是面向对象的；每年都要交授权费（99美元/年）。
另外还有其他的一些补充，比如：
对于Corona SDK不支持的第三方SDK没法自己去集成；编译项目的时候需要把代码上传到Corona的服务器上去编译，不能在本地直接编译；无法扩展Corona的功能；物理模块还有一些缺陷。
3、Airplay SDK（后来更名为Marmalade，不少大的公司在使用Airplay SDK，尤其适用于进行2D/3D游戏的开发）
目前使用Marmalade的游戏有《割绳子》、《植物大战僵尸》、《你猜我画》、Build 'n' Bash 3D、Catch the Monkey、Need for Speed Shift以及WorkSnug Pro等多款游戏。
Airplay SDK文档中还包含多个示例。“感觉受到限制”的开发者还可以在Airplay SDK上进行扩展。开发者需要对C++比较熟悉。
4、Appcelerator（Titanium）
Appcelerator允许使用HTML/Javascript来开发原生app，开发者可以免费使用。目前世界上185个国家中有超多46万的开发者在使用Appcelerator提供的解决方案。
Titanium为Appcelerator于2008年底所推出的跨平台应用程序开发解决方案，目前支持iOS/Android/Blackberry/WM7等行动平台，以及Windows/Linux/OS X这三种主流的桌上型平台。
基于Weex的跨多端融合方案（一）
大多数的应用都会在一个weex容器中进行页面跳转，这种场景下使用navigator就能比较好地实现（页面切换）。但是在实际混合开发场景中，会碰到更为复杂的跳转逻辑，如原生页面A跳转Weex页面，再从B跳转远程页面C，继而再从C跳转Weex页面D……再加上还会有跳转H5页面等等，这样对于后退栈的管理就会比较复杂。目前我们采用的解决方案是：为每一个weex页面单独使用一个容器（对于H5也是一样），这样页面的跳转就能交给原生系统的后退栈来管理。当然这么做也会有性能开销，但是综合来说，这种场景不多，因此从性价比考虑这么做是目前最合适的。然而这么做又会来带新的问题，那就是weex所提供的消息机制只能是在单容器内使用，按照官方的说法即这是一个实例级别的事件而不是应用级别的。那么就需要我们自己来做一套消息通知机制供应用级别使用，来解决多weex容器实例以及连通weex、native以及H5。其实这套机制并不复杂，因为原生已经有很多消息机制可以供我们选择了，包括EventBus、LocalBroadcast等等。这里可以详见我的之前有关消息机制实现的文章（传送门： https://www.jianshu.com/p/774b77ddde52 ）
之前说到大多数的weex使用场景是单容器（或者说是单实例）的，因此一般的实现也都是在一个Activity中（以安卓为例，下同）只有一个WXSDKInstance。然后有时候需求就是这么坑爹，在某些原生页面中希望可以内嵌一个甚至多个Weex的容器，那么这时候用来实现Weex容器的就不能再是Activity而是View了。我们需要自定义一个View来实现IWXRenderListener接口，并且在该View内部来维护一个WXSDKInstance，虽然初始化WXSDKInstance时候传入的Context还是Activity，但是好在instanceId是自增的，因此在一个Activity中有多个Weex的View，它们还是可以通过id来区分的。另外在使用View做容器的时候，也需要自己hook Activity的生命周期，来与WXSDKInstance中相应的方法绑定，不然在自定义Module等应用场景中将无法正确拿到Activity的生命周期回调。
想必很多团队在接触或者决定使用weex的时候，所在的项目已经是开发甚至是上线一段时间了，并且大多项目一定会用到WebView承载的H5页面，那么在开发H5相关页面时自然而然会定义很多通用的Bridge能力，比如账号登录机制、通用的loading组件、网络请求代理等等。然而我们在开发weex页面时候则不希望再重复实现这套Bridge，因此我们就需要实现一个适配器，通俗地说就是通过定义一个weex的Module去实例化H5的Bridge并且调用实例的方法。这套机制核心需要关注的是H5的Bridge需要怎么样的环境，我们通过哪种方法来实例化H5的Bridge（大多数情况下会需要用到反射）。此外，这种做法由于无法完全在weex容器中还原一个H5的环境，因此也并不是能100%复用H5的Bridge能力，对于无法复用的，我们还是需要基于weex重新开发一套。
在深度使用weex的时候，weex官方提供的组件会逐渐变得无法满足当前需求，这时就需要我们来做一些自定义的组件。当然这块并不需要用到什么黑科技，weex官方就提供了这类扩展，也就是WXComponent以及WXVContainer。常规的独立组件继承WXComponent即可，类似写一个原生的自定义View，具体的属性以及方法定义也可以参考官方文档（ http://weex.apache.org/cn/guide/extend-android.html ）。对于View的容器组件则需要继承WXVContainer，然后你就可以自定义各种cell，并且通过addSubView方法拿到加进去的cell。
weex官方提供了playground app，帮助你在设备上调试。但对于依赖自己项目环境的功能，就必须在项目内提供一个调试工具了，核心类似playground app，即提供一个扫码功能，能进入weex页面进行调试，对于调试这块功能，我会在后续的文章中详细讲解。
小程序平台现在已经成为一款应用不可或缺的阵地，因此跨端方案自然不能少了小程序这个平台。目前核心做法还是依赖于babel，并且需要在小程序端预先实现一套相对应的组件。详细的内容也将在后续文章中详细展开。
跨端方案既然是以提高效率为目的，那么自然需要有足够的数据来做支撑，因此我们需要在weex的几个生命周期内做好埋点，来统计各种耗时。另外在业务上也会有数据需求，一般也是通过埋点的形式来做统计
多端融合一定是未来移动端开发的一个方向，它除了解决一部分体验问题之外还能提高人效，因此未来各大企业也会越来越多地依赖这项技术。至于具体的方案选型，诸如weex、rn或者flutter，还是需要根据具体的业务场景来选择，目前并没有完美的方案，当然基于这些开源方案来二次开发，从而补足这些方案存在的不足则是更好的了。
对于我个人而言，自身的技术规划加上公司业务需求，有幸在这个时间点能学习到前端知识并且落地这套方案。因此我打算开一个文章系列，记录一下这套方案不断演进过程中的点点滴滴。
这段时间经历了很多事情，说是一夜长大也不为过吧。但是没有时间再自怨自艾了，找对方向，就算再难受爬着也要向前。失去的东西总会回到我们身边，虽然有时并不是以我们希望的方式。
阿里跨终端的H5游戏开发解决方案——Hilo
Hilo是由阿里巴巴集团开发的一款 HTML5 跨终端 游戏 解决方案，可以帮助开发者快速创建 HTML5 游戏 。有以下特征：独立模块设计，支持多种模块范式的包装版本;面向对象程序化开发;多重渲染模型，其中包括 Canvas，DOM 和 WebGL 等;兼容多台台式机和移动浏览器；使用 Flash Shim 来支持 IE ;支持物理扩展： Chipmunk；支持骨骼动画扩展： DragonBone！1、Hilo 支持多种模块范式的包装版本，包括AMD，CMD，COMMONJS，Standalone多种方式接入。另外，你可以根据需要新增和扩展模块和类型；
2、极精简的模块设计，完全面向对象；
3、多种渲染方式, 提供DOM，Canvas，Flash，WebGL等多种渲染方案（目前已经申请专利）；
4、全端浏览器的支持和高性能方案，独有的Flash渲染方案，即使在低版本IE浏览器下也可以跑起来“酷炫” 游戏 ； DOM渲染方案能显著解决低性能手机浏览器遇到的性能问题；
5、物理引擎支持——Chipmunk，支持自扩展物理实现；骨骼动画支持——DragonBones，同时内建骨骼动画系统——Tahiti（目前内部使用）；
6、案例丰富，框架成熟，已经经历多届阿里巴巴双十一，年中大促互动营销活动考验；
舞台Stage是一个各种图形、精灵动画等的总载体。所以可见的对象都要添加到舞台或其子容器后，才会被渲染出来。
Stage构造函数接收一个参数properties，此参数包含创建stage的各种属性。
舞台Stage上的物体的运动等变化，都是通过一个定时器Ticker不断地调用Stage.tick()方法来实现刷新的。
舞台上的一切对象都是可视对象，可以是图片、精灵、文字、图形，甚至DOM元素等等。Hilo提供了一些基本的可视类供您使用，比如添加一个图片到舞台上：
要想舞台上的图形、精灵动画等对象能响应用户的点击、触碰等交互事件，就必需先为舞台开启DOM事件响应，然后就可以使用View.on()来响应事件。
接下来，您就可以开始利用hilo提供的各种可视类来创建各种图形、精灵动画，尽情发挥您的创造力，开始您的HTML5 游戏 之旅吧！
Hilo对于开发H5 游戏 的开发者和对Web端渲染感兴趣的小伙伴来说值得一看，Hilo有诸多案例可供参考，如果你想继续深入了解它，可移步官方文档或者Github一探究竟！
移动APP开发框架盘点2：Web移动前端框架大全
开源项目其实有一个成熟周期，这个周期大概是三年左右，自React框架在2013年发布并引爆了前端框架的大潮，这个属于前端的周期就此开始了。
之后在2015年5月开源的React Native又开启了属于Web移动前端的周期，15-16年，18-19年，21-22年正好就是属于移动前端的三个爆发点。
三年前，在第一个成熟收获期，我盘点了移动开发框架。在这第二个成熟收获期，理所当然要来盘点一波。
不过，当我点开github项目的code-frequency时，还是被这个准到吓人的周期猜想惊呆了，先给你们看一波，剩下的自行验证。
1、https://github.com/youzan/vant/graphs/code-frequency
2、https://github.com/quasarframework/quasar/graphs/code-frequency
再来说第二个比较有意思的发现，停止维护的项目绝大多数是Vue框架项目。
盘点开始的时候我还觉得React框架处于绝对劣势，到完成时我发现React无论在选择面还是成熟度上都超过了Vue。
原因我这里就不分析了，反正大家都有自己的看法。
网页类框架就是前端组件框架，这一次虽然有大量项目停止维护，但是也有很多项目坚持了下来，而且还涌现出了一批新项目。
大厂占了主导，因为这些年大厂在移动开发上的需求，远高于其它方面。个人项目要坚持确实不易。
本来是想要做一个验证项目，把所有框架都试用一遍并给出推荐度的。由于进度太慢，还是下一次再发吧。
这次的重点是渐进类框架，就是所谓多端同构框架（小程序框架）。这几年国内的重点的各种小程序平台，所以多端框架的需求很是旺盛。
不过大多数先行者都没挺过来还是让我很意外，只有Taro成功了，想想还是有很多让人唏嘘的东西。
在这里还是先预测一波吧，因为这一类框架最变化最大，最终还是有很多框架要出局的。
渐进类框架是一个过渡性的产品，最终会变成桥接类框架的一部分，所以，与桥接类框架协同才是框架的出路。
这个赛道基本全是大厂了。
腾讯新一代跨端开发框架Hippy
Hippy一看就是淘宝Weex的对标项目，Kpi功能全面压制。所以官方支持 React 和 Vue 两种主流前端框架。在Weex2019年实质停更后发布，要不要这么卷？
Hippy 2.x 架构主要分成三层，UI(JS) 层 Hippy-React 和 Hippy-Vue 负责驱动 UI 指令生成；中间层 C++ HippyCore 负责抹平平台差异性和提供高性能模块；渲染层 Android 和 iOS 负责提供终端底层模块、组件，并与布局引擎通信。
对Weex惨遭遗弃，我上次就说过：「ReactNative提供工具，Weex提供框架，将平台差异化屏蔽（Write Once, Run Everywhere）。所以Weex则注定功能相对弱小，并且坑比较多。」Weex最终下马也是必然的，淘宝又发布升级版北海，为了实现（Write Once, Run Everywhere），它采用自绘，而且是基于Flutter自绘。
所以Hippy3.x就一如既往的Kpi功能层层加码，很有腾讯风格。在未来的 3.x 中业务与渲染层中的具体实现可根据用户实际场景进行切换：业务层上不再局限于 JS 驱动，还可选择（如：DSL/Dart/WASM 等）其它语言进行驱动；在渲染层中，渲染引擎除了支持现有原生（Native）渲染之外，还可以选择其他渲染 Renderer，如 Flutter(Voltron) 渲染。
「Kraken 北海」是一款高性能Web渲染引擎。底层基于 Flutter 进行渲染。
Kraken 不限制上层开发者使用的框架，无论你是使用 Vue 、Rax 还是 React 都可以开发 Kraken 应用。
Kraken 的 runtime 通过 JS Engine Binding 的方式提供了一系列 Web 标准的 API 接口，调用相应 API 会执行相关逻辑并创建一系列需要发送给 Dart 层处理的指令。
Kraken 其实就是一个小程序平台，而且追求全平台完全一致。我虽然认为各平台不一致是很自然的事情，但是也表示理解，毕竟别人吹牛有当真的传统（KFC表示认同）。
Kraken 现在也是一个小号浏览器，所以它的主要工作就是抠标准，毕竟它是一款基于 W3C 标准的高性能渲染引擎。
最后，我劝淘宝领导定Kpi要理智些，毕竟Hippy4我还蛮期待的。
滴滴出品的超轻量级动态化跨端开发框架，主打轻量和实用。
Hummer 以 JS 引擎为基石，目前已支持 JavaScriptCore、Hermers、QuickJS 等业内知名 JS 引擎（这里本来还有个V8的，我删除了，源码里面没有，Kpi需要）。再配合经过调优的 Yoga 布局引擎，抹平了两端视图布局差异（性能更佳的自研布局引擎开发中）。顺便提一下，Hippy采用V8（功能更强）自研布局引擎（性能更佳）。
Hummer 的特点是抛弃了业界其他动态化跨端框架普遍使用的DSL层和VDOM层，因此原生 Hummer 不具备前端开发常用的响应式编程的能力，但同时换来的是接近原生开发的体验和性能。再以原生 Hummer 为基础，在此之上开发了一套基于MVVM架构的开发框架 —— Tenon ，通过 Tenon，可以把使用 Vue/React 编写的代码，转换成原生 Hummer 的代码。
Hummer也是一个小程序平台，而且超轻量。如果想要无限提升自己APP的能力，可以考虑嵌入Hummer。
Web移动前端框架正在迎来第三个高速发展期，各类框架得到极大繁荣。
个人在具体项目的贡献已经微乎其微了，创新、架构创新是唯一制胜的手段，这也是我看好React的根本原因。
最后，还是想做点微不足道的 探索 ，现在前端组件库层出不穷，更换组件库带来的代价有点大。想创建一个框架，来实现上次说的组件公约数和公倍数，无缝切换组件库。理论上支持所有组件库 ，也能为后来者提供弯道超车的机会。我想大厂可能没有需求，也不会愿意发布这种框架，毕竟都是平台部门说了算。
这个库就是useMobile，当然分为useMobileReact和useMobileVue。下次先发布useMobileReact。等我发布后，再来填上面表中缺的推荐度。
原文地址： https://www-blogs.com/windfic/p/16019457.html
使用vue3+ typeScript 开发小程序
要求是使用 vue3 + typescript 进行开发小程序和H5的跨端应用在 uniapp 和 taro 这两个之中进行选择 在参了官方和社区示例后最终选择了 taro 。原因在于 uniapp 目前对于 vue3 的支持尚不完全比如说暂不支持 setup 语法糖对于h5的支持比较差 没有支持 vue3 的 ui 框架等等。
node.js
注意tarojs的版本 建议使用 taro 3.0.24 以上的版本
由于引用 node_modules 的模块，默认不会编译，所以需要额外给 H5 配置 esnextModules ，在 taro 项目的 config/index.js 中新增如下配置项：
如果出现类似 Could not find module View in @tarojs/components 的问题，请在进行如下设置：
详情请参考 https://github.com/dexterBo/mall 关于跨端开发应用实例研究和跨端开发框架的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。 跨端开发应用实例研究的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于跨端开发框架、跨端开发应用实例研究的信息别忘了在本站进行查找喔。
版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。
相关文章
发表评论
最近发表
推荐文章
热评文章
暂时没有评论，来抢沙发吧~