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源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。