小程序下一破局點？釘釘小程序卡片，應用與平臺的深度集成

原創

2021-10-04 11:28

“傳統”應用	卡片應用
藏在圖標或鏈接背後的系統	以區塊化方式，前置到溝通、工作臺、搜索等核心場景中
查看數據需要跳轉進入應用頁面進行操作需要跳轉進入應用頁面	沉浸式交互，無須跳離上下文。卡片上實時透出內容，數據自動更新（實時座位信息）基本交互閉環可以在卡片上操作完成（進行搶座）
人與系統的交互	融入溝通後，增加了人與人的互動

"}}},{"type":"heading","attrs":{"align":null,"level":1},"content":[{"type":"text","text":"Anywhere 運行","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我們希望當開發者完成小程序卡片開發後，可以將其運行在：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"多端：iOS、Android、Windows、Mac 端；","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"多運行時：native（IM列表、搜索結果頁）、小程序、H5，甚至 iOS widget 內。","attrs":{}}]}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/1d/1ded2bf4218cfdf7f416f9d1040dde33.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"傳統小程序使用 webview 作爲渲染容器，但如果直接在 IM 中爲每張卡片嵌入一個 webview 就顯得過於重了，且多卡片共存情況下內存佔用過大的問題也難以解決。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"所以，基於同一套 DSL ，我們會通過不同的 compiler 將其打包成不同產物以適應不同的宿主環境，並通過 DSL 的強約束性保證多端渲染一致性。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/8e/8ea2695c62183ed73d6f2a986d99dcbd.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"依託於當前小程序離線包機制，我們將多種產物（未來可配置）統一打包到小程序離線包內實現資源離線化。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在卡片被渲染前，卡片框架會先判斷當前所處的環境，並根據不同環境選擇不同打包產物進行卡片渲染。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/03/03908b78935defcf199c6d28133b075a.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"使用卡片統一 DSL 可以將業務代碼與\"卡片底層引擎實現\"解耦，未來加入更多渲染引擎支持時業務可以無痛升級。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"基於這套方案，釘釘小程序卡片已支持 ","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"Webview","attrs":{}},{"type":"text","text":"、","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"Native","attrs":{}},{"type":"text","text":"、","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"小程序","attrs":{}},{"type":"text","text":" 三種容器。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":1},"content":[{"type":"text","text":"一致的開發體驗","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"使用小程序 DSL","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"開發者使用小程序 DSL 作爲卡片統一 DSL 開發 ","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"小程序卡片","attrs":{}},{"type":"text","text":"。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在我們確定開發者應以何種方式開發區塊級應用時，我們覺得其必須滿足以下三個條件：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"numberedlist","attrs":{"start":1,"normalizeStart":1},"content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":1,"align":null,"origin":null},"content":[{"type":"text","text":"被開發者廣泛接受並使用","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":2,"align":null,"origin":null},"content":[{"type":"text","text":"足夠標準化","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":3,"align":null,"origin":null},"content":[{"type":"text","text":"面向開放","attrs":{}}]}]}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"被廣泛接受並使用","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"被廣泛接受並使用意味着其生態必定有相當規模，而規模效應會帶來成本降低。成本包括兩方面：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"numberedlist","attrs":{"start":1,"normalizeStart":1},"content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":1,"align":null,"origin":null},"content":[{"type":"text","text":"開發者本身需要掌握的技術成本和生態爲開發者帶來的各種技術紅利（多端框架、UI庫等）;","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":2,"align":null,"origin":null},"content":[{"type":"text","text":"繁榮的小程序生態爲企業所節約的人才成本。","attrs":{}}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"自 2016 年微信推出微信小程序後，小程序憑藉其較低的開發成本、開箱即用的開發模式和相比於傳統 web 應用更優的性能表現，快速成爲各平臺最熱門的開放應用形態。在 2018 年，小程序開發者數量就已到 ","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"百萬級別","attrs":{}},{"type":"text","text":" 。小程序生態的快速成熟和像支付寶、淘寶、釘釘等擁有海量註冊用戶的玩家入場，勢必會大大加速小程序的普及，進而吸引更多高質量的開發者入場。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"標準化的 DSL","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"足夠標準化的 DSL 意味着穩定。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"2019年9月，阿里巴巴結合自身的小程序實踐並聯合相關公司，在W3C制定發佈《小程序標準化白皮書 / MiniApp Standardization White Paper》，推動制定統一的小程序標準。當前，已成立了 MiniApps Ecosystem Community Group，同Google，華爲，小米，Facebook等公司一同孵化小程序的國際標準。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"正是在該標準中，定義了卡片 —— 這種區塊級的小程序應用形態。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"章節 2.1.4 ：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"In addition to being presented in the form of an MiniApp page, MiniApp can also be displayed in the form of information fragment, that is, a MiniApp widget. In this form, developers can put their service and/or content to various host scenarios, called host environment, such as assistants, search page, etc.. This feature connects services of the MiniApp with the scenario, providing users with more convenience.","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"面向開放","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"區塊級應用作爲一種獨立的應用形態，開放是其天然訴求。但隨着小程序開發者數量越來越龐大，開發者水平","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"難免會參差不齊","attrs":{}},{"type":"text","text":"。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"小程序本身","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"雙線程架構 + 統一運行時 + 離線包機制","attrs":{}},{"type":"text","text":"可以保證其性能始終處於較高水平，提升應用質量底線。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"且由於我們對小程序架構有完整的控制力，這意味着我們可以對其進行持續迭代升級，而這些對開發者來說都將是透明的，開發者將從框架本身的升級中持續受益。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"小程序卡片","attrs":{}},{"type":"text","text":" 在框架設計和平臺管控策略上將與小程序保持一致。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"IDE 集成","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"爲了降低卡片研發門檻，我們在 IDE 中新增了小程序卡片應用，開發者可以在 IDE 中","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"一站式創建、開發、測試、預覽、上傳","attrs":{}},{"type":"text","text":"小程序卡片（目前在專有釘工作臺項目中落地）。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"同時，我們在","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"卡片 Anywhere 運行","attrs":{}},{"type":"text","text":"和","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"卡片編碼靈活度","attrs":{}},{"type":"text","text":"上進行了取捨。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"小程序卡片作爲區塊級應用，決定了其業務場景中的交互和 UI 不會過於複雜（圖表等場景可使用卡片 canvas 繪製），所以我們對小程序卡片 DSL 進行了簡化。嚴格來說其爲小程序 DSL 的子集。同時，爲了能更好的適配多端多場景，我們使用了","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"類 tailwindcss","attrs":{}},{"type":"text","text":" 技術實現卡片樣式開發，從而實現對樣式的強約束。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在對小程序 DSL 進行簡化及加入 tailwindcss（子集）後，勢必需要工具對其進行","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"校驗和預編譯","attrs":{}},{"type":"text","text":"，方便在開發階段對開發者進行相關提示。基於此，我們提供了卡片官方 IDE 插件，該插件負責在卡片卡發過程中對 DSL 能力進行校驗並提供必要的錯誤提示。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"當開發者在 IDE 中創建小程序卡片應用時，IDE 將自動爲其創建可直接運行的初始化代碼，並同時","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"自動安裝官方 IDE 插件","attrs":{}},{"type":"text","text":"。初始化代碼包含一個 demo 卡片和簡單的卡片數據 mock 方案，可以讓開發者快速上手進行第一個卡片開發。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"低代碼搭建","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"對於專用於 IM 的卡片，目前釘釘團隊已結合釘釘場景羣業務，於釘釘開放平臺正式對外提供卡片搭建服務。詳情請見：創建消息模板 - 釘釘開放平臺。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/07/073188fd02bec39bfdfdced4ee4a3468.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在搭建平臺上，釘釘結合自身的小程序卡片實踐，目前已沉澱了一系列通用模板供開發者直接使用，旨在幫助開發者以儘可能低的成本開發、使用小程序卡片。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":1},"content":[{"type":"text","text":"演進路線","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"小程序卡片作爲一個全新的應用形態和技術方案，仍有諸多不完善之處，之後我們會持續迭代與優化，提高卡片性能和產品化能力。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"全平臺支持","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"目前小程序卡片只可運行在釘釘客戶端內的 IM、搜索、工作臺等場景中，宿主環境支持native、H5、小程序，對於更大的應用場景：端外 web 並不支持。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"卡片的 H5 運行時端內外並無太大差異，問題在於資源鏈路和數據鏈路。其中涉及到鑑權、離線資源加載、容器協議 web 化、數據安全等問題，但這些問題並非完全無解，之後我們將逐步解決鏈路問題，實現卡片Anywhere價值最大化。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"基礎能力升級","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在運行時層面，小程序卡片會在已有組件基礎上做持續擴充，引入諸如 ","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"地圖","attrs":{}},{"type":"text","text":"、","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"視頻","attrs":{}},{"type":"text","text":"、","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"音頻、畫布","attrs":{}},{"type":"text","text":" 等基礎組件，並逐步完成與小程序標準組件的對齊。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"JS 運行時支持上，卡片將逐步接入符合小程序標準的","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"自定義組件","attrs":{}},{"type":"text","text":"模式，提高卡片開發效率。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"生產效率提升","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"目前小程序卡片 fullcode 模式主要以 CLI 方式面向一方開發者，CLI 模式足夠靈活，但在對外開放時，卻並不適合所有外部開發者。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"所以，未來我們會把已在專有釘落地的 IDE 集成開發模式做持續優化並遷移到標準釘，同時在標準釘上建立一條較爲完善的從開發到上線的卡片研發鏈路，給開發者提供開箱即用的卡片研發環境。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":"center","origin":null},"content":[{"type":"text","marks":[{"type":"color","attrs":{"color":"#FF7021","name":"orange"}},{"type":"strong","attrs":{}}],"text":"關注我們，每週 3 篇移動技術實踐&乾貨給你思考！","attrs":{}}]}]}