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

前言

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

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

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

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

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

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

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

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

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

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

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

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

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

完備的應用開發(fā)實踐

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

應用入口 ** 通過默認生成的代碼運行應用而無需任何配置，只需要調用 runApp 即可啟動小程序。

import { runApp } from 'ice';


runApp();

生命周期

生命周期指的是應用自身的一些函數，這些函數在特殊的時間點或一些特殊的框架事件時被自動觸發(fā)?？蚣芴峁┝送暾膽蒙芷谀芰?。

import { runApp } from 'ice';


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


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


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


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


runApp(appConfig);

全局配置

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

• routes 用于指定應用的頁面，每一項代表對應頁面的路徑及文件信息。

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

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

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

樣式方案

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

數據請求

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

Hooks 方案

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

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

三分鐘上手

初始化項目

基于 npm init ice 命令選擇初始化模板進行下載：

$ 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

啟動項目

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

$ cd <projectName>
$ npm install
$ npm start

• 支付寶小程序效果圖：

• 微信小程序效果圖：

最后

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

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

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