【重磅更新】飛冰（ICE）現(xiàn)已支持無線開發(fā)

前言

從我們正式發(fā)布飛冰（ICE）項(xiàng)目截止到目前，在過去的這段時間里，僅僅淘寶內(nèi)部已經(jīng)有約 2000+ 項(xiàng)目使用它進(jìn)行開發(fā)；除了內(nèi)部之外同時也持續(xù)得到了業(yè)內(nèi)廣大的關(guān)注，并被社區(qū)眾多個人與公司在其中后臺項(xiàng)目中采用，飛冰致力于提供簡單而友好的前端研發(fā)體系。

然而在實(shí)際中除了中后臺業(yè)務(wù)場景外，也被部分用戶經(jīng)常問到能否使用飛冰開發(fā)無線應(yīng)用，何時能支持無線開發(fā)等問題，這意味著之前的產(chǎn)品定位和架構(gòu)設(shè)計(jì)已不能滿足業(yè)務(wù)場景的需要。

經(jīng)過持續(xù)的高速迭代，ice.js 終于迎來了重大的升級（完全向下兼容），正式支持無線 Web App 和小程序的開發(fā)，目前支持的小程序平臺包括阿里小程序和微信小程序。這意味著如果你想開發(fā)多端投放的小程序、Web App、中后臺管理系統(tǒng)，那么你只需使用 ice.js 就夠了，這在一定程度上能極大的提升開發(fā)效率。更重要的是，無需學(xué)習(xí)各個平臺的小程序語法，只要你會使用 React 即可開發(fā)。

多端一致的開發(fā)體驗(yàn)

毫無疑問，小程序原生語法的開發(fā)體驗(yàn)是為人所詬病的，從微信開始到后來的眾多追隨者如支付寶、百度、頭條等，都選擇了與微信類似的架構(gòu)設(shè)計(jì)，但也存在著一定的差異性，導(dǎo)致開發(fā)人員需要適配的小程序平臺越來越多，而每個端開發(fā)一套代碼又不現(xiàn)實(shí)，進(jìn)一步導(dǎo)致研發(fā)成本上升，代碼維護(hù)困難。

社區(qū)基于小程序的上層開發(fā)框架也層出不窮，這類框架主要的區(qū)別和重心在于 DSL 和 多端適配。核心解決的是能復(fù)用現(xiàn)有 Web 的生態(tài)，以及能提供不同平臺一致性的開發(fā)體驗(yàn)。如能使用類 React 或者類 Vue 去開發(fā)小程序，能復(fù)用 NPM 上數(shù)以萬計(jì)的工具包等。

這是很重要但也很基礎(chǔ)的能力，但在飛冰體系中卻有所不同，除了支持阿里、支付寶等不同端開發(fā)的一致性之外，我們致力于為 ICE 開發(fā)者提供更簡單更平滑的開發(fā)小程序的解決方案， 這意味著如果你使用 ice.js 開發(fā)過中后臺應(yīng)用，那么幾乎可以無任何成本的上手小程序開發(fā)。同時將中后臺領(lǐng)域沉淀出的標(biāo)準(zhǔn)化的 React 應(yīng)用開發(fā)模式和最佳實(shí)踐，完全應(yīng)用到了小程序開發(fā)上，包括但不限于狀態(tài)管理、數(shù)據(jù)請求、生命周期、樣式、Hooks 等能力，

提供從中后臺到小程序開發(fā)的體驗(yàn)一致性是至關(guān)重要的，這其中包括：

• 開發(fā)心智：提供完整的 React 支持，無需額外的學(xué)習(xí)成本；
• 開發(fā)體驗(yàn)：提供基于 VS Code 的輔助插件，默認(rèn)支持 TypeScript；
• 多端適配：一次編碼多端投放，已支持阿里小程序，支付寶小程序，Web；
• 社區(qū)生態(tài)：與現(xiàn)有社區(qū)生態(tài)完全兼容。

不受限制地使用 React 所有特性

ice.js 的小程序機(jī)制基于 Rax 小程序的運(yùn)行時方案，采用模擬 DOM/BOM API 的方式適配，因此可做到 DSL 無關(guān)。目前這套方案已經(jīng)在阿里內(nèi)部落地 100+ 小程序項(xiàng)目，經(jīng)過了大量線上項(xiàng)目的驗(yàn)證，值得信賴。讓你可以不受限制地使用 React 所有特性。

• 幾乎沒有任何語法約束
• 支持使用 Hooks
• 支持操作 DOM （不推薦）
• 豐富的 React 社區(qū)生態(tài)

邏輯層做的事情其實(shí)比較復(fù)雜。首先要做的是，去處理節(jié)點(diǎn)間的關(guān)系，去模擬appendChild/ removeChild/updateNode 等各個行為來操作 VDOM 樹。其次是去模擬事件，在邏輯層每一個節(jié)點(diǎn)類會繼承自 EventTarget 基類，這個和 W3C 是一樣的，然后通過 nodeId 作為標(biāo)識去收集需要監(jiān)聽的事件，當(dāng)視圖層通過 action 觸發(fā)了某個節(jié)點(diǎn)的事件之后，再通過原生小程序事件中的 event.currentTarget.dataset.nodeId獲取到目標(biāo)節(jié)點(diǎn)的 id，最終觸發(fā)目標(biāo)回調(diào)。

完備的應(yīng)用開發(fā)實(shí)踐

ice.js 小程序在設(shè)計(jì)上繼承了Web應(yīng)用開發(fā)的最佳實(shí)踐，如果你使用過ice.js 開發(fā)過應(yīng)用，那么使用它開發(fā)小程序幾乎是零成本的，遵循同一套開發(fā)規(guī)范和最佳實(shí)踐。

應(yīng)用入口 ** 通過默認(rèn)生成的代碼運(yùn)行應(yīng)用而無需任何配置，只需要調(diào)用 runApp 即可啟動小程序。

import { runApp } from 'ice';


runApp();

生命周期

生命周期指的是應(yīng)用自身的一些函數(shù)，這些函數(shù)在特殊的時間點(diǎn)或一些特殊的框架事件時被自動觸發(fā)?？蚣芴峁┝送暾膽?yīng)用生命周期能力。

import { runApp } from 'ice';


const appConfig = {
  app: {
    // 應(yīng)用啟動的時候觸發(fā)
    onLaunch() {},


    // 應(yīng)用喚起時觸發(fā)
    // 應(yīng)用從后臺切到前臺的時候觸發(fā)
    onShow() {},


    // 應(yīng)用從前臺切到后臺的時候觸發(fā)
    onHide() {},


    // 監(jiān)聽全局錯誤
    onError(error) {}
  }
};


runApp(appConfig);

全局配置

用于對應(yīng)用進(jìn)行全局的靜態(tài)配置，如設(shè)置路由、窗口表現(xiàn)等。

• routes 用于指定應(yīng)用的頁面，每一項(xiàng)代表對應(yīng)頁面的路徑及文件信息。

{
  "routes": [
    {
      "path": "/",
      "source": "pages/Home/index"
    }
  ]
}

• window 用于配置應(yīng)用的窗口表現(xiàn)，同時也支持針對每個頁面設(shè)置窗口表現(xiàn)。目前已經(jīng)支持的參數(shù)的有：

{
  "window": {
    "titleBarColor": "",
    "pullRefresh": true,
    "title": "Home"
  }
}

樣式方案

默認(rèn)推薦使用 CSS Modules 方案，這能很好的解決樣式開發(fā)中的全局污染和命名混亂的兩個痛點(diǎn)問題。但同時也支持 Sass、Less 等編寫樣式。

數(shù)據(jù)請求

大多數(shù)情況下都需要通過 HTTP 協(xié)議與后端服務(wù)器通訊，開發(fā)小程序時我們提供了 universal-request 用于網(wǎng)絡(luò)請求，該模塊已支持多端發(fā)送請求。

Hooks 方案

開發(fā)小程序時除了使用基礎(chǔ)的 Hooks 之外，我們還提供了一套完備的自定義 Hooks 的工具庫 ahooks，覆蓋絕大部分的 Hooks 場景，助力您的應(yīng)用開發(fā)。

更多其他細(xì)節(jié)如狀態(tài)管理，工程配置，事件等能力詳見官網(wǎng)文檔。

三分鐘上手

初始化項(xiàng)目

基于 npm init ice 命令選擇初始化模板進(jìn)行下載：

$ npm init ice <projectName>


# 或者使用 yarn
$ yarn create ice <projectName>

選擇模板

可選擇小程序 TypeScript 或者 JavaScript 模板：

? Please select a template (Use arrow keys)
? Lightweight JavaScript template with Mini Program
  Lightweight TypeScript template with Mini Program

啟動項(xiàng)目

使用小程序開發(fā)者工具打開項(xiàng)目，執(zhí)行以下命令即可看到如下界面:

$ cd <projectName>
$ npm install
$ npm start

• 支付寶小程序效果圖：

• 微信小程序效果圖：

最后

隨著業(yè)務(wù)場景的不斷復(fù)雜和需要，飛冰（ICE）從專注中后臺領(lǐng)域升級為面向多終端的研發(fā)框架，但初心未變我們始終致力于提供簡單而友好的前端研發(fā)體系，提升開發(fā)效率和幸福感。

文章來源：公眾號--前端人

以上就是W3Cschool編程獅關(guān)于 【重磅更新】飛冰（ICE）現(xiàn)已支持無線開發(fā) 的相關(guān)介紹了，希望對大家有所幫助。