伴隨各大移動(dòng)應(yīng)用廠商推出各自的小程序應(yīng)用解決方案，小程序開發(fā)者也面臨需要兼容多個(gè)平臺(tái)的棘手問題。如何做到 Write once，run everywhere？Rax、uniapp、Taro、Remax 等跨端框架給出了“一套代碼多端運(yùn)行”的解決方案，但是在實(shí)際的業(yè)務(wù)開發(fā)過程中，API 層面卻沒有一個(gè)跨端的標(biāo)準(zhǔn)和解決方案，導(dǎo)致跨端業(yè)務(wù)分支眾多、代碼繁瑣等問題。

Uni API 的誕生

在阿里，先后經(jīng)歷了 Hybrid、Native 融合、動(dòng)態(tài)模板、小程序、Web 漸進(jìn)渲染等一系列發(fā)展之后， 各業(yè)務(wù)的跨端需求越來越頻繁，面對(duì)多樣的業(yè)務(wù)場(chǎng)景和快速的技術(shù)迭代， 業(yè)務(wù)開發(fā)同學(xué)的精力大量集中在跨端的多套代碼開發(fā)或兼容適配上，無法將精力集中投入在業(yè)務(wù)中，API 更是其中尤為費(fèi)精力的一環(huán)。

還記得前段時(shí)間大火的社區(qū)團(tuán)購(gòu)，多個(gè)小程序投放的復(fù)雜場(chǎng)景出現(xiàn)，且時(shí)間緊任務(wù)重，一碼多端成為剛需。阿里數(shù)字農(nóng)業(yè)團(tuán)隊(duì)在經(jīng)歷了盒馬集市的業(yè)務(wù)洗禮后，Uni API 的雛形在業(yè)務(wù)中孕育而生，之后多方共同參與，誕生出了 Uni API。它解決了小程序之間以及 Web 的 API 差異，為你實(shí)現(xiàn)小程序以及 Web 的一碼多端提供堅(jiān)實(shí)基礎(chǔ)。

Uni API 是什么？

Uni API 是一個(gè) API 層面的一碼多端方案，它有以下特性：

Uni API 要解決的問題

小程序容器 API 現(xiàn)狀：

我們對(duì)目前市面上三大主要容器的 API 進(jìn)行了統(tǒng)計(jì)，數(shù)據(jù)來源為各個(gè)容器的官方文檔，統(tǒng)計(jì)如下：

其中，微信的 API 最多，我們?cè)谌咧腥∪蕉加袑?shí)現(xiàn)的 API 作為通用 API，結(jié)果為101 個(gè)，后續(xù)跟隨各個(gè)文檔的升級(jí)可能還會(huì)增大。我們發(fā)現(xiàn)，這 101 個(gè) API 中，有超過一半的 API 在不同容器間有差異，并且，有 70% 左右的 API 在 web 上依然可以支持。

（字節(jié)小程序和快手小程序由于起步晚，API 較少，對(duì)比文檔后，大體基于微信規(guī)范，可以認(rèn)為同樣適用這個(gè) 101 個(gè)通用 API）

我們?cè)賹?duì)這 101 個(gè) API 進(jìn)行拆解：

Uni API 將重點(diǎn)實(shí)現(xiàn)這 101 個(gè)通用 API，并解決以下問題：

規(guī)范

Uni API 以微信小程序 API 規(guī)范為基礎(chǔ)，并遵循通用原則，對(duì)一些不通用的地方進(jìn)行修改，得出一套完整的 API 規(guī)范。

1、API 分類

我們將 API 劃分為4種

  1. 各個(gè)小程序容器之間沒有差異的 API（即入?yún)⒊鰠⒁恢拢δ軐?shí)現(xiàn)一致）
  2. 各個(gè)小程序容器之間有差異但可以無感知抹平的 API（即功能實(shí)現(xiàn)一致，但入?yún)⒊鰠⒒蛘呙胁町悾?/li>
  1. 各個(gè)小程序容器之間有差異且無法抹平的 API（即功能實(shí)現(xiàn)不一致）
  2. 有的小程序?qū)崿F(xiàn)有的小程序沒有實(shí)現(xiàn)的 API（即容器上的特色 API）

Uni API 對(duì)各類 API 的處理：

2、入?yún)⒁?guī)范

根據(jù) API 分類規(guī)則，我們對(duì) API 入?yún)⒆隽私y(tǒng)一，并對(duì)差異性入?yún)⑻峁ext 參數(shù)進(jìn)行處理，如：showActionSheet 入?yún)?itemColor 在微信小程序上支持，在阿里小程序上不支持，title 參數(shù)在阿里小程序支持，在微信不支持，那么，你可以這樣寫：

import showActionSheet from '@uni/action-sheet';



showActionSheet({

  itemList: ['A', 'B', 'C'],

  _ext: {

    aliMiniApp: {

      title: '我是額外參數(shù)標(biāo)題_ext.aliMiniApp',

    },

    wechatMiniProgram: {

      itemColor: '#ff1214',

    },

  },

}).then((res) => {

  console.log(選中項(xiàng)Index:${res.tapIndex});
});

如上，itemColor 將只會(huì)在微信小程序容器時(shí)被接收，同樣的 title 參數(shù)也只會(huì)在阿里小程序容器時(shí)被接收。

3、出參規(guī)范

我們會(huì)統(tǒng)一不同容器 API 的出參，對(duì)有差異的出參抹平能力上的子集，同時(shí)保留其它不在規(guī)范里的出參，留給業(yè)務(wù)自行使用。

核心能力

1、真正的一碼多端

Uni API 幫你識(shí)別環(huán)境差異， 幫你做好不同容器的兼容，因此你可以把精力更好的投入到業(yè)務(wù)實(shí)現(xiàn)中。

2、真正的無依賴跨端能力

Uni API 不依賴任何框架及 DSL（可以在任何小程序原生項(xiàng)目或跨端框架項(xiàng)目中無差別使用），Web 端完全原生 Dom 操作，無框架依賴，UI 對(duì)齊規(guī)范

3、更易用的 API

4、更全面的 API

Uni API 規(guī)劃提供 100+ API，一期實(shí)現(xiàn) 70+，覆蓋80%以上應(yīng)用場(chǎng)景。

5、更極致的 API

超大的 API 覆蓋，超小的代碼體積，Uni API 在實(shí)現(xiàn)層面就把體積問題作為重點(diǎn)考慮，并重新設(shè)計(jì)了工程，因此，當(dāng)你使用 Uni API 時(shí)，最終的代碼產(chǎn)物，就像你自己直接調(diào)用原生一樣，完全不會(huì)有多余代碼。

配套能力

1、雙語文檔

Uni API 官網(wǎng)以及?Rax 官網(wǎng)提供詳盡的中英文版 API 調(diào)用文檔，文檔粒度細(xì)致到每個(gè) API 每個(gè)參數(shù)的用法及其支持度，絕大部分情況下，用戶可以舍棄各平臺(tái)的文檔，僅參考 Uni API 官方文檔即可滿足開發(fā)需求。

為方便一碼多端的需要，文檔里針對(duì)不通用能力（無法抹平的能力）進(jìn)行了標(biāo)記警告。

2、真機(jī) Demo

Uni API 為支持的各端都提供了完善的 API 使用示例和體驗(yàn) Demo，可直接掃碼在真機(jī)上體驗(yàn)所有支持的 API

3、完善的 Typescript 聲明

Uni API 為每個(gè) API 提供了詳盡的 Typescript 聲明，結(jié)合編輯器觸發(fā)代碼的自動(dòng)提示，這將給你帶來原生無法提供的編程體驗(yàn)，甚至可以離開文檔，直接編程，Typescript 的自動(dòng)校驗(yàn)，可以讓你的 API 代碼更加規(guī)范，提前避免手誤粗心之類的錯(cuò)誤。

4、CAN I USE

Uni API 提供了canIUse 支持度檢測(cè)工具

import canIUse from '@uni/caniuse';



canIUse('clipboard');// true

canIUse('clipboard.getClipboard');// true

未來還計(jì)劃提供站點(diǎn)形式的 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: '顯示模態(tài)框'});

storage.getStorageSync({key: 'key'});

分端構(gòu)建

Uni API 內(nèi)部基于原子化 API 實(shí)現(xiàn)，因此可以支持分環(huán)境，分 API 引入，達(dá)到極致體積。

我們提供了 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"

]

]

設(shè)計(jì)方案

Uni API 對(duì) API 進(jìn)行原子維度開發(fā)，從 API ，容器兩個(gè)維度進(jìn)行模塊編寫，截止目前 65 個(gè) API 疊加 6 個(gè)容器維度，共有 390?個(gè) API 實(shí)現(xiàn)，同時(shí)保證每個(gè)模塊的功能獨(dú)立，調(diào)用方式一致，因此可以實(shí)現(xiàn)業(yè)務(wù)中原子化引用，達(dá)到極致體積，并且可以被其它庫(kù)依賴。

結(jié)語

Uni API 旨在解決各大小程序廠商之間、以及小程序與 Web 之間 API 在實(shí)現(xiàn)和規(guī)范上無法對(duì)齊的問題，解決 Api 層面的一碼多端。未來會(huì)支持更多的容器和更廣泛的API，提供輕量便捷的解決方案，在滿足業(yè)務(wù)需求的同時(shí)，追求極致的代碼體積和最優(yōu)的體驗(yàn)。

希望有了 Uni API，開發(fā)者可以離真正完美的一碼多端更近一步。

相關(guān)鏈接

Uni API 官網(wǎng)鏈接：https://universal-api.js.org/

Rax 官網(wǎng)鏈接：https://rax.js.org/

Github 地址：https://github.com/raxjs/universal-api

答疑地址：https://github.com/raxjs/universal-api/issues

本文章轉(zhuǎn)載微信公眾號(hào)@阿里巴巴終端技術(shù)

未來 101 個(gè) API 疊加 6 個(gè)容器維度，將達(dá)到驚人的 606 個(gè)?模塊實(shí)現(xiàn)、50+ package。

上一篇：

接口開發(fā)神器啊！YesApi這個(gè)平臺(tái)太牛了！輕松開發(fā)上百個(gè)API接口

下一篇：

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

我們有何不同？

API服務(wù)商零注冊(cè)

多API并行試用

數(shù)據(jù)驅(qū)動(dòng)選型，提升決策效率

查看全部API→
??

熱門場(chǎng)景實(shí)測(cè)，選對(duì)API

#AI文本生成大模型API

對(duì)比大模型API的內(nèi)容創(chuàng)意新穎性、情感共鳴力、商業(yè)轉(zhuǎn)化潛力

25個(gè)渠道
一鍵對(duì)比試用API 限時(shí)免費(fèi)

#AI深度推理大模型API

對(duì)比大模型API的邏輯推理準(zhǔn)確性、分析深度、可視化建議合理性

10個(gè)渠道
一鍵對(duì)比試用API 限時(shí)免費(fèi)