來源：Alibaba F2E公衆号
作者：一歎
伴随各大移動應用廠商推出各自的小程式應用解決方案，小程式開發者也面臨需要相容多個平台的棘手問題。如何做到 Write once，run everywhere？Rax、uniapp、Taro、Remax 等跨端架構給出了“一套代碼多端運作”的解決方案，但是在實際的業務開發過程中，API 層面卻沒有一個跨端的标準和解決方案，導緻跨端業務分支衆多、代碼繁瑣等問題。
Uni API 的誕生
在阿裡，先後經曆了 Hybrid、Native 融合、動态模闆、小程式、Web 漸進渲染等一系列發展之後， 各業務的跨端需求越來越頻繁，面對多樣的業務場景和快速的技術疊代， 業務開發同學的精力大量集中在跨端的多套代碼開發或相容适配上，無法将精力集中投入在業務中，API 更是其中尤為費精力的一環。
還記得前段時間大火的社群團購，多個小程式投放的複雜場景出現，且時間緊任務重，一碼多端成為剛需。阿裡數字農業團隊在經曆了盒馬集市的業務洗禮後，Uni API 的雛形在業務中孕育而生，之後多方共同參與，誕生出了 Uni API。它解決了小程式之間以及 Web 的 API 差異，為你實作小程式以及 Web 的一碼多端提供堅實基礎。
Uni API 是什麼？
Uni API 是一個 API 層面的一碼多端方案，它有以下特性：
- 支援 Web、微信小程式、頭條小程式、阿裡小程式、百度小程式、快手小程式
- 無架構依賴
- 提供雙國文檔、豐富樣例
- 覆寫 101 個 API 實作
- 支援按需加載，按環境剔除無用代碼
- 提供完善的 TypeScript 聲明，讓你可以擺脫文檔，沉浸程式設計
Uni API 要解決的問題
小程式容器 API 現狀：
我們對目前市面上三大主要容器的 API 進行了統計，資料來源為各個容器的官方文檔，統計如下：
其中，微信的 API 最多，我們在三者中取三方都有實作的 API 作為通用 API，結果為101 個，後續跟随各個文檔的更新可能還會增大。我們發現，這 101 個 API 中，有超過一半的 API 在不同容器間有差異，并且，有 70% 左右的 API 在 web 上依然可以支援。
（位元組小程式和快手小程式由于起步晚，API 較少，對比文檔後，大體基于微信規範，可以認為同樣适用這個 101 個通用 API）
我們再對這 101 個 API 進行拆解：
Uni API 将重點實作這 101 個通用 API，并解決以下問題：
- 不同小程式容器 tt 、wx 等字首，API 調用方式不統一。
- 不同小程式容器 API 入參出參規範有差異。
- 原生 API 缺乏 Ts 聲明，不能自動聯想，編寫體驗差
- 做跨端應用時，需要翻看多個平台的文檔，并且在代碼中相容差異
- 做跨端應用時，編寫相容代碼，會導緻無用代碼過多，無法剔除
- 做跨端應用時，缺乏 Web 實作，無法在浏覽器端正常調試
規範
Uni API 以微信小程式 API 規範為基礎，并遵循通用原則，對一些不通用的地方進行修改，得出一套完整的 API 規範。
1、API 分類
我們将 API 劃分為4種
- 各個小程式容器之間沒有差異的 API（即入參出參一緻，功能實作一緻）
- 各個小程式容器之間有差異但可以無感覺抹平的 API（即功能實作一緻，但入參出參或者命名有差異）
- 各個小程式容器之間有差異且無法抹平的 API（即功能實作不一緻）
- 有的小程式實作有的小程式沒有實作的 API（即容器上的特色 API）
Uni API 對各類 API 的處理：
- 對第一種，API 之間并沒有什麼差異，是以 Uni API 對這種 API 做了去字首或者 Promise 化處理。
- 對第二種，Uni API 根據規範抹平了入參出參的不一緻。
- 對第三種，由于能力有缺失，Uni API 在規範中透出各個容器的能力子集，但保留各個容器不一緻的能力。
- 對第四種，Uni API 通用 API 中暫不支援
2、入參規範
根據 API 分類規則，我們對 API 入參做了統一，并對差異性入參提供_ext 參數進行處理，如：showActionSheet 入參 itemColor 在微信小程式上支援，在阿裡小程式上不支援，title 參數在阿裡小程式支援，在微信不支援，那麼，你可以這樣寫：
import showActionSheet from '@uni/action-sheet';
showActionSheet({
itemList: ['A', 'B', 'C'],
_ext: {
aliMiniApp: {
title: '我是額外參數标題_ext.aliMiniApp',
},
wechatMiniProgram: {
itemColor: '#ff1214',
},
},
}).then((res) => {
console.log(`選中項Index:${res.tapIndex}`);
}); 如上，itemColor 将隻會在微信小程式容器時被接收，同樣的 title 參數也隻會在阿裡小程式容器時被接收。
3、出參規範
我們會統一不同容器 API 的出參，對有差異的出參抹平能力上的子集，同時保留其它不在規範裡的出參，留給業務自行使用。
核心能力
1、真正的一碼多端
Uni API 幫你識别環境差異， 幫你做好不同容器的相容，是以你可以把精力更好的投入到業務實作中。
2、真正的無依賴跨端能力
Uni API 不依賴任何架構及 DSL（可以在任何小程式原生項目或跨端架構項目中無差别使用），Web 端完全原生 Dom 操作，無架構依賴，UI 對齊規範
3、更易用的 API
- Uni API 對 API 按功能關聯性做了聚類，将幾個關聯性強的 API 放在一起，你可以不需要一個一個引用，
- Uni API 對異步 API 做了 Promise 改造，更友善業務維護自己的代碼
- 完善的 Typescript 聲明，結合 Typescript 的代碼自動提升，可以給予你超過原生的程式設計體驗。
- 對 API 錯誤做了統一處理，更友善業務處理異常。
4、更全面的 API
Uni API 規劃提供 100+ API，一期實作 70+，覆寫80%以上應用場景。
5、更極緻的 API
超大的 API 覆寫，超小的代碼體積，Uni API 在實作層面就把體積問題作為重點考慮，并重新設計了工程，是以，當你使用 Uni API 時，最終的代碼産物，就像你自己直接調用原生一樣，完全不會有多餘代碼。
配套能力
1、雙國文檔
Uni API 官網以及 Rax 官網提供詳盡的中英文版 API 調用文檔，文檔粒度細緻到每個 API 每個參數的用法及其支援度，絕大部分情況下，使用者可以舍棄各平台的文檔，僅參考 Uni API 官方文檔即可滿足開發需求。
為友善一碼多端的需要，文檔裡針對不通用能力（無法抹平的能力）進行了标記警告。
2、真機 Demo
Uni API 為支援的各端都提供了完善的 API 使用示例和體驗 Demo，可直接掃碼在真機上體驗所有支援的 API
小程式碼：
3、完善的 Typescript 聲明
Uni API 為每個 API 提供了詳盡的 Typescript 聲明，結合編輯器觸發代碼的自動提示，這将給你帶來原生無法提供的程式設計體驗，甚至可以離開文檔，直接程式設計，Typescript 的自動校驗，可以讓你的 API 代碼更加規範，提前避免手誤粗心之類的錯誤。
4、CAN I USE
Uni API 提供了canIUse 支援度檢測工具
- canIUse API，可以在業務代碼中調用，檢測目前環境是否支援目标 API：
import canIUse from '@uni/caniuse';
canIUse('clipboard');// true
canIUse('clipboard.getClipboard');// true - 未來還計劃提供站點形式的 canIUse
如何使用 Uni API ?
1、安裝引用
Uni API 提供兩種模式引用：
小包引入
npm install --save @uni/storage
import { getStorageSync } from '@uni/storage';
getStorageSync({key: 'key'}); 大包引入
npm install --save @uni/apis
import {
application,
env,
unitTool,
canvas,
accelerometer,
clipboard,
systemInfo,
file,
actionSheet,
alert,
toast,
loading,
element,
intersectionObserver,
confirm,
location,
image,
navigate,
request,
storage } from '@uni/apis';
confirm({content: '顯示模态框'});
storage.getStorageSync({key: 'key'}); 分端建構
Uni API 内部基于原子化 API 實作，是以可以支援分環境，分 API 引入，達到極緻體積。
我們提供了 babel 插件幫助使用方剔除 Uni API 的無用代碼，你可以這樣用：
npm i @uni/babel-plugin-universal-api-import 在 babel 配置中加入插件：
[
'babel-plugin-universal-api-import',
{
target: 'miniapp'
}
] 我們還專門為 Rax 使用者提供了插件，你可以這樣使用：
npm i @uni/build-plugin-rax-api-import 在 build.json 檔案中加入插件：
"plugins" : [
[
"build-plugin-rax-api-import"
]
] 設計方案
Uni API 對 API 進行原子次元開發，從 API ，容器兩個次元進行子產品編寫，截止目前 65 個 API 疊加 6 個容器次元，共有 390 個 API 實作，同時保證每個子產品的功能獨立，調用方式一緻，是以可以實作業務中原子化引用，達到極緻體積，并且可以被其它庫依賴。
未來 101 個 API 疊加 6 個容器次元，将達到驚人的 606 個 子產品實作、50+ package。
結語
Uni API 旨在解決各大小程式廠商之間、以及小程式與 Web 之間 API 在實作和規範上無法對齊的問題，解決 Api 層面的一碼多端。未來會支援更多的容器和更廣泛的API，提供輕量便捷的解決方案，在滿足業務需求的同時，追求極緻的代碼體積和最優的體驗。
希望有了 Uni API，開發者可以離真正完美的一碼多端更近一步。
相關連結
Uni API 官網連結：
https://universal-api.js.org/Rax 官網連結：
https://rax.js.org/Github 位址：
https://github.com/raxjs/universal-api答疑位址：
https://github.com/raxjs/universal-api/issues