概述

目前移动web端拥有发布快，无需审核，支持热更新，迭代速度快等优点,现在根据业务需求及战略方案将要进一步在微信小程序，快应用，移动端Native等平台上构建类似的业务。所以如何能复用之前H5代码并快速切换到其他平台的的方案将在此文档体现。

开了一个每日学习分享群，也可直接加我微信入群（mokinzhao）

主流解决方案(react栈)

Taro（京东 凹凸实验室）

Taro 是一套遵循 React 语法规范的 多端开发 解决方案。现如今市面上端的形态多种多样，Web、React-Native、微信小程序等各种端大行其道，当业务要求同时在不同的端都要求有所表现的时候，针对不同的端去编写多套代码的成本显然非常高，这时候只编写一套代码就能够适配到多端的能力就显得极为需要。

使用 Taro，我们可以只书写一套代码，再通过 Taro 的编译工具，将源代码分别编译出可以在不同端（微信/百度/支付宝/字节跳动小程序、H5、React-Native 等）运行的代码。

React 语法风格

Taro 遵循 React 语法规范，它采用与 React 一致的组件化思想，组件生命周期与 React 保持一致，同时支持使用 JSX 语法，让代码具有更丰富的表现力，使用 Taro 进行开发可以获得和 React 一致的开发体验。
快速开发微信小程序
Taro 立足于微信小程序开发，众所周知小程序的开发体验并不是非常友好，比如小程序中无法使用 npm 来进行第三方库的管理，无法使用一些比较新的 ES 规范等等，针对小程序端的开发弊端，Taro 具有以下的优秀特性

✅ 支持使用 npm/yarn 安装管理第三方依赖

✅ 支持使用 ES7/ES8 甚至更新的 ES 规范，一切都可自行配置

✅ 支持使用 CSS 预编译器，例如 Sass 等

✅ 支持使用 Redux 进行状态管理

✅ 支持使用 Mobx 进行状态管理

✅ 小程序 API 优化，异步 API Promise 化等等

支持多端开发转化
Taro 方案的初心就是为了打造一个多端开发的解决方案。目前 Taro 代码可以支持转换到 微信/百度/支        付宝/字节跳动小程序 、 H5 端 以及 移动端（React-Native）。

Chameleon（滴滴）

目前开发者在端内既追求h5的灵活性，也要追求性能趋近于原生。 面对入口扩张，主端、独立端、微信小程序、支付宝小程序、百度小程序、Android厂商联盟快应用，单一功能在各平台都要重复实现，开发和维护成本成倍增加。迫切需要维护一套代码可以构建多入口的解决方案，历经近20个月打磨，滴滴跨端解决方案Chameleon终于发布。真正专注于让一套代码运行多端。

设计理念

软件架构设计里面最基础的概念“拆分”和“合并”，拆分的意义是“分而治之”，将复杂问题拆分成单一问题解决，比如后端业务系统的”微服务化“设计；“合并”的意义是将同样的业务需求抽象收敛到一块，达成高效率高质量的目的，例如后端业务系统中的“中台服务”设计。

而 Chameleon 属于后者，通过定义统一的语言框架+统一多态协议，从多端（对应多个独立服务）业务中抽离出自成体系、连续性强、可维护强的“前端中台服务”。

跨端目标

虽然不同各端环境千变万化，但万变不离其宗的是 MVVM 架构思想，Chameleon 目标是让MVVM跨端环境大统一。

开发语言

从事过网页编程的人知道，网页编程采用的是HTML + CSS + JS这样的组合，同样道理，chameleon中采用的是 CML + CMSS + JS。JS语法用于处理页面的逻辑层，与普通网页编程相比，本项目目标定义标准MVVM框架，拥有完整的生命周期，watch，computed，数据双向绑定等优秀的特性，能够快速提高开发速度、降低维护成本。CML（Chameleon Markup Language）用于描述页面的结构，我们知道HTML是有一套标准的语义化标签，例如文本是<span> 按钮是<button>。CML同样具有一套标准的标签，我们将标签定义为组件，CML为用户提供了一系列组件。同时CML中还支持模板语法，例如条件渲染、列表渲染，数据绑定等等。同时，CML支持使用类VUE语法，让你更快入手。CMSS(Chameleon Style Sheets)用于描述CML页面结构的样式语言，其具有大部分CSS的特性，并且还可以支持各种css的预处语言less stylus。
通过以上对于开发语言的介绍，相信你看到只要是有过网页编程知识的人都可以快速的上手chameleon的开发。

实现原理图

Anu （个人开发者）

anujs是一个高级兼容React16的迷你React 框架，它兼容React16.3.0的99%接口， 跑通了官方788个case， 支持React生态圈的99％的组件与UI库。

众所周知， React 一直存在体积过大的诟病， 因此我在熟读其源码的基础上，重新实现了React， gz后只有React+ReactDOM的三分之一。详细数据见 https://bundlephobia.com/, anu@1.4.3只有 13.1 kb， react@16.4.1为 2.3 kb, react-dom@16.4.1为 30.5 kb。如果使用路由器，react-router-dom@4.3.1为11 kb， reach@1.0.1为 4.3kb。

 

 

体积比对

现在React全家桶有如下常用套餐

套餐1：react + react-dom + react-router-dom + redux + react-redux + redux-saga, 体积为 2.3 + 30.5 + 11 + 5 + 4.3 + 8.4 = 61.4 kb 合适于刚入门的人群

套餐2：react + react-dom + react-router-dom + mobx + mobx-react 体积为 2.3 + 30.5 + 11 + 13.8 + 6.4 = 64 kb 合适于对redux怨言的人群

套餐3：anujs + reach + redux + react-redux + rematch 体积为 13.1 + 6 + 2.5 + 5 + 4.3 = 31 kb 合适于体积、兼容性、易用性有要求的人群

 

与其他迷你react的比较

主要竞品有 inferno, preact, rax, react-lite, nervjs, 前两个是海外的， 后三个是中国的，中国由于网络的状况，对体积要来比较高。

inferno, 需要加上inferno-compat， 才能与官方的API保持一致， 但组件套组件的情况下， 生命周期钩子的执行顺序与官方不一致， 因此不兼容React的绝大多数的UI库。不支持旧式IE。

preact, 需要加上preact-compat， 才能与官方的API保持一致， 但组件套组件的情况下， 生命周期钩子的执行顺序与官方不一致， 因此不兼容React的绝大多数的UI库。 并且preact-compat内部使用了Object.definePropety，因此无法运用于IE8， 也造成它的性能严重劣化。

rax， 中国的阿里巴巴集团推出，支持React16大多数API，不支持IE8， 能跑一些React UI库。

react-lite, 中国的携程集团推出，只兼容React15, 支持IE8，能跑一些React UI库。

nervjs, 中国的京东集团推出，支持React16大多数API，代码与inferno, rax很相近， 没有case证明其兼容IE8，性能指标也很可疑。

anujs优势

  1. 支持React16的各种新功能，Fragment, componentDidCatch, creactContext, createRef, forwardRef...

  2. 跑通官方近800多个单元测试（其他迷你库都无法跑官方测试）

  3. 支持React全家桶（react-redux, react-router-dom, react-router-redux， react-lazy-load， react-hot-loader...）

  4. 支持99％的antd组件 （antd为中国最有名的React UI 库）

各平台差异表

平台名称

作者

特性

优点

缺点

Taro

京东

多端统一开发框架，支持用 React 的开发方式编写一次代码，生成能运行在微信小程序、H5、React Native 等的应用

1.快速开发小程序 2.支持使用 ES7/ES8 甚至更新的 ES 规范，一切都可自行配置

3支持使用 CSS 预编译器，例如 Sass 等

4支持使用 Redux 进行状态管理

5.推出时间早整体比较成熟

RN 端的小问题较多 多端统一能力待踩坑

Chameleon

滴滴

MVVM 架构思想，通过定义统一的语言框架+统一多态协议，从多端（对应多个独立服务）业务中抽离出自成体系、连续性强、可维护强的“前端中台服务”

1.丰富的UI组件 和API          2.支持路由配置页面跳转 3.智能编码规范校验

2018年12月推出，不够成熟，需要踩坑，要学习使用CML + CMSS + JS语言格式

Anu

知名个人开发者

React转微信小程序的转码器

1.体积小

2.支持在视图中写事件回调的函数体，支持复杂的传参

3.ReactWX.wx拥有小程序的wx的所有方法 4.支持Promise风格

5.支持组件继承

个人开发者，团队资源较少，维护和扩展进度较弱

微信小程序化方案

微信小程序原生开发之痛

开发小程序由三部分组成，这三大部分都是由四种类型文件，如下图所示：

我们以 JS 文件为例：

页面或者组件无法被继承的时候，我们在实现一些功能的时候会受到一些限制

，同时小程序本身提供了一些 API ，但是却没有提供一个跟编辑器很好结合的东西，当我们在使用这些 API 的时候缺乏智能提示。

使用React 开发小程序

react 和 小程序是有一些共同特点的

– View = F(Data)，都是通过数据来驱动视图模型

– 同时都是用一种类似的 API 来驱动整个视图的更新 （小程序：this.setData()， react：this.setState() ）

正因为这样，也是更加想用 react 来开发小程序。

经过进一步的研究发现，小程序和 react 之间的差异是非常大的

主要是由于三大块的差异：

JS 代码对比：

生命周期对比：

模板对比：

编译原理的一个大致过程大概如图所示：

其中最核心的就是把源代码编译成 AST (虚拟语法树)，然后将 AST 进行转换操作得出目标代码。

在 JS 中，它是有自己的 AST 规范来进行定义，这个规范就是 ESTree Spac

在 JS 领域中，有非常多的 JS 的解析器，来帮你把代码转换成语法树的工具，其中最广为应用的就是 BABEL。

它提供了一套非常完成的工具来帮你做代码转换。

从源代码到语义分析，我们都可以借助 BABEL 来进行转换。

在这之后的语法树转换、代码优化还是需要们自己来进行的，这一部分也是非常繁琐且复杂。

在 JSX 中，通常有各种各样的写法：

Taro编译转换的过程

总结

目前我们的项目属于(React技术栈)系，Chameleon 类VUE 语法，所以框架架构和语法差距比较大，移植比较困难，Anu  是react 框架 衍生出来的，有着体积小，支持redux,支持组件继承等诸多优点，但是基本属于小团队个人开发者维护的，在没有熟读源码的前提下，使用起来风险较高。目前综合比较下来Taro相对比较成熟，是相对较大公司团队维护，在微信小程序化方面做的比较早，也是类react框架，移植起来相对会简单一些。

移动大前端跨平台解决方案相关推荐

  1. Electron：前端人的最佳跨平台解决方案

    作为一个跨平台的桌面应用开发框架,Electron 的迷人之处在于,它是建立在Chromium 和 Node.js 之上的 :二位分工明确,一个负责界面,一个负责背后的逻辑,典型的「你负责貌美如花,我 ...

  2. 当我们在谈大前端的时候，我们谈的是什么

    在今天,大前端并不是一个陌生的词汇,我们偶尔会听人谈起它,前些天还看到卓同学写了一篇<大前端时代下App开发者的生存之道>,说明这个词开始成为某种共识了. \\ 但是大前端到底指的是什么? ...

  3. 牛赞：音视频前端跨平台技术应用

    点击上方"LiveVideoStack"关注我们 Flutter是近两年大火的跨终端框架,实时音视频因为疫情的缘故也越来越融入到人们的日常工作生活中,如线上会议.在线教育等.两者结 ...

  4. 2021 大前端技术回顾及未来展望

    作者:腾讯 IMWeb 前端团队 2021 年大前端领域没有出现革命性的明星项目,但在各个细分的技术领域都有一定的拓展与深耕,有很多新技术或者新特性有望在 2022 年迎来爆发.在互联网 " ...

  5. 前端18个月难度翻番？来这里把握大前端技术本质进展丨稀土开发者大会

    图片来源:pexels.com "别更新了,学不动了"向来是前端开发群体的切肤之痛: React 还没学明白,Vue 就出来了: Vue 2.0 还没上手,3.0 就发布了: No ...

  6. 2019年一半已过，这些大前端技术你都GET了吗？- 下篇

    在上一篇文章中已经介绍了大前端关于状态管理.UI组件.小程序.跨平台和框架层的内容.在本文中,我会继续介绍编程语言.工程化.监控.测试和服务端,同时也会对下半年大前端可以关注的部分进行展望. 结合个人 ...

  7. ​2020 年大前端技术趋势解读

    作者 | IMWeb 团队 来源 | 腾讯 IMWeb 前端团队公众号 如今的前端早已不再拘泥于满足页面展示,而是开始延展到通过全栈来闭环产品.这表明前端已经有能力透过业务深入产业,继而影响商业结果. ...

  8. 客户端软件GUI开发技术漫谈：原生与跨平台解决方案分析

    原生开发应用开发 Microsoft阵营的 Winform WinForm是·Net开发平台中对Windows Form的一种称谓. 如果你想深入的美化UI,需要耗费很大的力气,对于目前主流的CSS样 ...

  9. 2019年，大前端技术趋势程度解读

    在过去的2018 年的事儿特别多,从 React v16 普及,到 jQuery 被 GitHub 下掉完成阶段性历史使命,在唏嘘之外,版本帝 AngularJS 又发布了 v6 和 v7 两个版本. ...

最新文章

  1. Linux 监视磁盘空间和使用情况
  2. 收益 or 挑战？Serverless 究竟给前端带来了什么
  3. springboot工程中使用spring.version导致无法启动
  4. Windows Server 2008 R2中的Hyper-V
  5. 微软登录界面加载不出_微软要硬了，做出这个目前最好用的浏览器
  6. 四川中级职称计算机考试考b级,四川省职称计算机B级考试1卷
  7. python decimal用法_Python decimal模块使用方法详解
  8. java sdp_[java,SDP] java 7 SDP 技术/Socket Direct Protocol 2
  9. 原来人生真的是一场苦的修行
  10. python 菜鸟-Python3 面向对象
  11. 三十二 、K8s审计
  12. 阿里面试题，深入理解Java类加载机制
  13. 磁盘不见了只剩一个c盘_电脑硬盘分区不见了怎么恢复数据？
  14. VCPKG 升级问题
  15. hashmap java 排序_HashMap的排序
  16. 单片机原理及接口技术--01什么是单片机
  17. 我的毕业设计后端技术栈
  18. qq浏览器无小程序版本号与服务器不符,QQ浏览器发力小程序，同时兼容适配微信小程序...
  19. 写给安徽合肥高三的你——少年不惧岁月长，敢挽桑弓射玉衡
  20. 下一代云计算架构，VMware要占“半壁江山”

热门文章

  1. 创建对象的几种方法的总结
  2. 企业邮箱收发信息服务器怎么设置,网易闪电邮企业邮箱收发设置教程（IMAP）...
  3. server 群辉emby_群晖NAS | 安装使用Emby媒体服务器（解决无法启动的问题）
  4. FPGA调试笔记~PCIE之XDMA（一）：一些概念性介绍
  5. 区块链史上的一次冰河世纪，凛冬之下，随处可见的烂尾链
  6. 高中数学辅导补习方法:三角函数的图象及应用
  7. revit模型怎么在手机上看_BIM查看软件是什么？BIM模型手机查看软件有哪些？
  8. python彩色字体显示
  9. 烟花爆炸色彩效果—ExplosionField
  10. 显示屏在线测试软件,Monitor Test Screens显示器测试