伴隨各大移動應用廠商推出各自的小程序應用解決方案，小程序開發者也面臨需要兼容多個平臺的棘手問題。如何做到 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 層面的一碼多端方案，它有以下特性：

Uni API 要解決的問題

小程序容器 API 現狀：

我們對目前市面上三大主要容器的 API 進行了統計，數據來源為各個容器的官方文檔，統計如下：

其中，微信的 API 最多，我們在三者中取三方都有實現的 API 作為通用 API，結果為101 個，后續跟隨各個文檔的升級可能還會增大。我們發現，這 101 個 API 中，有超過一半的 API 在不同容器間有差異，并且，有 70% 左右的 API 在 web 上依然可以支持。

（字節小程序和快手小程序由于起步晚，API 較少，對比文檔后，大體基于微信規范，可以認為同樣適用這個 101 個通用 API）

我們再對這 101 個 API 進行拆解：

Uni API 將重點實現這 101 個通用 API，并解決以下問題：

規范

Uni API 以微信小程序 API 規范為基礎，并遵循通用原則，對一些不通用的地方進行修改，得出一套完整的 API 規范。

1、API 分類

我們將 API 劃分為4種

  1. 各個小程序容器之間沒有差異的 API（即入參出參一致，功能實現一致）
  2. 各個小程序容器之間有差異但可以無感知抹平的 API（即功能實現一致，但入參出參或者命名有差異）
  1. 各個小程序容器之間有差異且無法抹平的 API（即功能實現不一致）
  2. 有的小程序實現有的小程序沒有實現的 API（即容器上的特色 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

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 支持度檢測工具

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 實現，同時保證每個模塊的功能獨立，調用方式一致，因此可以實現業務中原子化引用，達到極致體積，并且可以被其它庫依賴。

結語

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

本文章轉載微信公眾號@阿里巴巴終端技術

未來 101 個 API 疊加 6 個容器維度，將達到驚人的 606 個?模塊實現、50+ package。

上一篇：

接口開發神器啊！YesApi這個平臺太牛了！輕松開發上百個API接口

下一篇：

什么是比較好的低代碼產品
#你可能也喜歡這些API文章!

我們有何不同？

API服務商零注冊

多API并行試用

數據驅動選型，提升決策效率

查看全部API→
??

熱門場景實測，選對API

#AI文本生成大模型API

對比大模型API的內容創意新穎性、情感共鳴力、商業轉化潛力

25個渠道
一鍵對比試用API 限時免費

#AI深度推理大模型API

對比大模型API的邏輯推理準確性、分析深度、可視化建議合理性

10個渠道
一鍵對比試用API 限時免費