1.跨端框架对前端开发者来说难度较高，若是不具有移动终端开发能力，很难上手；
javascript
2.平台差别大，相同功能甚至要为不一样的平台使用不一样的接口编写大量平台相关代码。css
而本文主要介绍的，是国内几个大厂推出的解决方案：Hippy、Chameleon 、Taro、Weex前端
腾讯跨端框架- Hippy
去年2月20日，腾讯QQ浏览器部门发起的开源跨端框架 Hippy。在腾讯内部，Hippy 已运行3年之久，跨 BG 共有 18 款线上业务正在使用 Hippy，日均 PV 过亿，且已创建一套完整生态。相较于其余跨端框架，Hippy 对前端开发者更友好：紧贴 W3C 标准，听从网页开发各项规则，使用 JavaScript 为开发语言，同时支持 React 和 Vue 两种前端主流框架。java
Hippy 实现了相似 Flutter 的引擎直通架构（在 React Native 中的 Fabric 架构），经过 C++ 开发的模块直接插入 JS 引擎中运行，绕过了前终端通信编解码的开销，有效提高了 JS 前端代码和终端的通信性能。在此基础之上，Hippy 正在实现高性能自绘，以提供更强的性能和更好的用户体验。react
hippy-react 从语法上更加接近终端底层，某种程度上语法接近 React Native，同时经过官方提供了 hippy-react-web 组件库，也能够方便地生成 Web 版网页。android
特征：
为传统 Web 前端设计，官方支持 React 和 Vue 两种主流前端框架。webpack
不一样的平台保持了相同的接口。ios
经过 JS 引擎 binding 模式实现的前终端通信。git
提供了高性能的可复用列表。github
皆可平滑迁移到 Web 浏览器。
完整支持 Flex 的布局引擎。
滴滴跨端框架 - Chameleon
-
API 接口协议（Library)：定义基础接口能力标准。
-
内置组件协议（Library)：定义基础 Ui 组件标准。
-
框架协议（Framework)：定义生命周期、事件、路由等框架标准。
-
DSL 协议（Language)：定义视图和逻辑层的语法标准。
-
多态实现协议（Interface)：定义容许用户使用差别化能力标准。
<template> <view> <text>{{title}}</text><text>{{reversedTitle}}</text> </view></template>
<script>class Index { data = { title: "chameleon" } computed = { reversedTitle: function () { return this.title.split('').reverse().join('') } } mounted() {} destroyed() {}}export default new Index();</script>
网页编程采用的是 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。
特色：
1. 多端高度一致
深刻到编程语言维度保障一致性，包括框架、生命周期、内置组件、事件通讯、路由、界面布局、界面单位、组件做用域、组件通讯等高度统一
在用 CML 写页面时，chameleon 提供了丰富的组件供开发者使用，内置的有
button
switch radio checkbox
等组件，扩展的有
c-picker c-dialog c-loading
等等,覆盖了开发工做中经常使用的组件。
3. API
为了方便开发者的高效开发，chameleon 提供了丰富的 API 库,发布为 npm 包chameleon-api，里面包括了网络请求、数据存储、地理位置、系统信息、动画等方法。
4. 自由定制
基于多态协议，可自由扩展任意 API 和组件，不强依赖框架的更新。各端原始项目中已积累大量组件，也能直接引入到跨端项目中使用，可充分隔离各端差别化实现。
5. 智能规范校验
代码规范校验，当出现不符合规范要求的代码时，编辑器会展现智能提示，不用挨个调试各端代码，同时命令行启动窗口也会提示代码的错误位置
6. 渐进式跨端
不只能够用 cml 开发页面，也能够将多端重用组件用 cml 开发，直接在原有项目里面调用。
京东跨端框架 - Taro
NPM 包管理系统
ES6+ 语法
自由的资源引用
CSS 预处理器和后处理器（SCSS、Less、PostCSS）
import Taro, { Component } from '@tarojs/taro'import { View, Button } from '@tarojs/components'
export default class Homeextends Component{ constructor (props) { super(props) this.state = { title: '首页', list: [1, 2, 3] } }
componentWillMount () {} componentDidMount () {} componentWillUpdate (nextProps, nextState) {} componentDidUpdate (prevProps, prevState) {} shouldComponentUpdate (nextProps, nextState) { return true }
add = (e) => { // dosth }
render () { const { list, title } = this.state return ( <ViewclassName='index'> <ViewclassName='title'>{title}</View> <ViewclassName='content'> {list.map(item => { return ( <ViewclassName='item'>{item}</View> ) })} <ButtonclassName='add'onClick={this.add}>添加</Button> </View> </View> ) }}
阿里无线前端 - Weex
<template> <div class="wrapper"> <div class="login"> <div class="input-wrapper"> <input οnchange="onchangeUserNumber" class="input" type="text" placeholder="手机号" autofocus="true" value=""/> <image class="input-img" src="resources/img/login_input_user_img.png"></image> </div> //...... </div> <toast id="toast"></toast> </div></template>
<script> module.exports = { data:{ userNumber:'', userPassword:'' }, methods:{ onchangeUserNumber:function (event) { this.userNumber = event.value; }, onchangeUserPassword:function (event) { this.userPassword = event.value; }, //...... } }</script>
<style> ......</style>
◆ ◆ ◆ ◆ ◆
VS Code · 编程开发 · 业界资讯
本文分享自微信公众号 - 玩转VS Code（vs_code）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。