开源的前端代码跨平台运行的前端开发框架_多端前端框架

开源的前端代码跨平台运行的前端开发框架

“只编写一套代码就能够适配到多端”是一个伟大的工程！

一、 四种开源跨平台开发框架

1.1 uni-app（支持多平台应用）

1、简介

• （1）uni-app由DCloud推出；2018年1月12日开始进行内测，2018年10月10日1.0.0版正式发布。
• （2）开发需在Dcloud自己研发的开发工具HbuildX中开发，调试效果最佳。
• （3）兼容适配面较广，支持一套代码生成App(iOS，Android)，小程序（微信，支付宝，头条，百度），H5等多套代码。
• （4）官方示例中，App(iOS，Android)、小程序（微信，支付宝，头条，百度）、H5平台皆有产品展示。
• （5）可靠性较高。
• （6）开发语言为Vue，模板系统为字符串系统；上手成本需熟悉Vue，数据流管理为Vuex。
• （7）开发App必须使用HBuildX开发工具，其他编辑器搭配Cli只能开发小程序及H5。开发编辑器最好使用HBuildX。
• （8）开发某种平台项目则需遵守该平台所定规则。

2、学习成本

• 熟悉Vue及Vue相关技术栈，开发编辑器最好使用HBuildX。

1.2 Taro（支持多平台应用）

1、简介

• （1）Taro由京东的O2开发团队推出；于2018年3月开始立项，2018年6月开始开源。有专门的开发团队，维护比较有保障。
• （2）Taro初期是为了使用react的语法来写微信小程序；作为微信小程序的开发框架而诞生，后期为了满足更多的需求，逐步兼容快应用、react native应用；所以在兼容性上，对H5页面及微信小程序的兼容性最好。
• （3）开发语言为React规范，模板系统为JSX，数据流管理为Redux。
• （4）想快速上手需熟悉React。
• （5）京东团队研发出了一款类React框架Nerv；有配套的开发工具Taro CLI，可以让开发流程自动化，可以从命令行开始创建项目。
• （6）官网表示Taro已适配微信小程序，H5，React Native，支付宝小程序，百度智能小程序，字节跳动小程序；但是快应用及QQ浏览器轻应用待上线。
• （7）2019年官网上的应用案例只有微信小程序，现在应该有更多了。
• （8）微信小程序代码可由Taro工具直接行转化成Taro代码。

2、学习成本

需熟悉react，以及react相关技术栈。可使用京东的Nerv框架，与react类似。京东的主要技术栈为react。

1.3 chameleon（支持多平台应用）

1、简介

• （1）chameleon由滴滴团队开发，有点类似于基于微信小程序打造的一套滴滴的代码规则。
• （2）chameleon的组成结构为CML+CMSS+JS。
• chameleon的语法有两套，分为CML-标准语法，CML-类vue语法。
• chameleon构建有自带的chameleon-tool脚手架工具，可根据不同环境进行初始化项目，进入开发/生产模式，分不同环境进行查看帮助信息，包括开发模式构建、执行打包模式构建。
• （3）网络查阅相关网站上资料较少，部分网站上的内容基本照搬官网.
• （4）社区生态不如uni-app和Taro活跃；

学习成本

• 未知

1.4 mpvue（支持H5与微信小程序两端共用）

1、简介

• （1）mpvue（mpvue官网）由美团推出；是美团点评在多个实际业务项目中得到验证后才开源；于2018奶奶3月14日在GitHub上开源。
• （2）官网表明未来的最终目标是可以一套代码直接跑在多端，如：web，小程序（微信和支付宝），Native（借助weex）。
• （3）mpvue （mpvue的github 地址）是一个使用 Vue.js 开发小程序的前端框架。mpvue 框架基于 Vue.js 核心，修改了 Vue.js 的 runtime 和 compiler 实现，使其可以运行在小程序环境中，从而为小程序开发引入了整套 Vue.js 开发体验。
• （4）mpvue框架2019年仅支持H5与微信小程序两端共用1套代码。
• （5）mpvue保留了 vue.runtime 核心方法，无缝继承了 Vue.js 的基础能力。
• （6）mpvue-template-compiler 提供了将 vue 的模板语法转换到小程序的 wxml 语法的能力。
• （7）修改了 vue 的建构配置，使之构建出符合小程序项目结构的代码格式： json/wxml/wxss/js 文件。
• （8）支持vue.js的组件模块内容，不过只能使用单文件组件（.vue 组件）的形式进行支持。
• （9）支持小程序的原生组件.
• （10）由于基本只适配微信小程序且构造基本为vue，所以在构建项目时需遵守vue.js及微信小程序的规范进行构建项目。
• （11）不支持内容见：mpvue使用手册。

2、学习成本

• 熟悉vue及vue相关的技术栈。

二、总结

• 由于小程序、快应用等应用本身规范较多，而且复杂应用一般对于开发方式有较高的要求，如组件和模块化、自动构建和集成、代码复用和开发效率等皆有一定的要求；所以在使用以上跨平台开发框架需要基于实际情况进行选择。以上跨平台开发框架产品均是在微信小程序方面完成度比较高，对于其他的平台可能坑比较多。

三、参考

1. 跨平台开发框架介绍
2. uni-app官网 ，一个跨平台解决方案，旨在实现开发一次全端覆盖，支持iOS、Android、小程序、H5。
3. Taro官网
4. chameleon官网
5. mpvue官网