搜索

QQ空間 QQ好友新浪微博微信

【原】SAP UI5和微信小程序?qū)Ρ戎乙?/span>

汪子熙 2019-11-06

展開全文

關于Wang Cong種菜的手藝，大家請移步到他以前的文章 SAP成都研究院非典型程序猿，菜園子小哥：當我用UI5診斷工具時我用些什么去觀摩，這里不再贅述。

下面是他的正文。

近幾年微信小程序發(fā)展之勢如火如荼，越來越多的用戶放棄原生App，轉(zhuǎn)而投入小程序的懷抱，大有"一個微信行天下"的趨勢。

面對如此巨大的流量機遇，百度、阿里等公司也紛紛在自家的核心產(chǎn)品中推出小程序功能，欲與騰訊的微信在這場入口大戰(zhàn)中一較高下。至少在今天看來，微信小程序的生態(tài)圈依然是其中最為繁榮的。

同為"前端框架"，SAP UI5與微信小程序有著諸多異同點。這里我們摘取其中本人覺得比較有特點的方面進行對比，看看二者相似的表象下隱含著哪些設計理念上的區(qū)別。

本文僅代表作者個人作為一個前端開發(fā)人員的個人觀點。

UI5是SAP開發(fā)的一套開源的前端框架，而微信小程序則是局限在微信內(nèi)部，表現(xiàn)形式類似于普通App。

雖然兩者的核心(或者說大部分功能)都是與用戶進行交互，但從架構的角度看，存在很多本質(zhì)上的不同，我們可以從接口的角度窺見一二。

入口

UI5不依托任何平臺，通過UI5實現(xiàn)的頁面可以從多種入口進行訪問，基本上只要支持瀏覽器功能的平臺，都可以訪問UI5頁面。而微信則是微信小程序的唯一入口。

后端

UI5是一個純粹的前端框架，對于后端沒有做任何的限制，同時也沒有任何的支持。微信小程序不但允許你自由地選擇后端，而且提供了一些基礎的后端支持，在很多情況下開發(fā)者甚至無需搭建自己的服務器，就能滿足需求。這些支持有：

(1) 數(shù)據(jù)庫：微信小程序提供遠端的類似MongoDB的JSON數(shù)據(jù)庫支持，用戶不需要購買數(shù)據(jù)庫，也不需要任何復雜的前期配置，就能在小程序中直接對JSON數(shù)據(jù)庫進行增刪查改等操作。

(2) 存儲：類似于上面提到的JSON數(shù)據(jù)庫，用戶可以在微信小程序中直接利用免費且免配置的遠端存儲空間來存儲文件。

(3) 云函數(shù)：除了數(shù)據(jù)庫和存儲之外，微信小程序還提供了后端邏輯的支持。云函數(shù)可以理解成一個功能有限的后端服務器，也可以理解成一個運行在云端的JavaScript方法。優(yōu)點是方便，一鍵部署而且免費。缺點是功能有限，無法實現(xiàn)復雜的后端功能。

以上功能全部免費免配置，如果發(fā)現(xiàn)免費的配額不夠，可以申請?zhí)嵘漕~或考慮自己搭建服務器。

訪問限制

作為開放的框架，UI5對于外部訪問沒有做任何限制。而微信小程序則有著嚴格的審核機制，首先要訪問的鏈接必須是https的安全鏈接，其次地址必須提交給微信進行審核，審核過后還需維護在小程序后臺的訪問列表當中。

如果上述步驟沒有做好，就連騰訊自己的官網(wǎng)都無法訪問。其實這樣做的原因也很容易理解：用戶通過微信小程序訪問的所有鏈接，最初的入口都是微信本身，這也是微信為了自身生態(tài)安全而做的必要控制。

但這項限制在本文發(fā)稿時為止還不是特別完善。因為云函數(shù)尚未對訪問做限制，開發(fā)者可以使用云函數(shù)作為路由，訪問未經(jīng)審核的鏈接。

從上面和下面兩張圖中我們可以看出UI5應用和微信小程序在接口方面的區(qū)別，其中虛線框內(nèi)分別為UI5和微信小程序框架內(nèi)所提供的功能范圍。

技術細節(jié)

一個熟悉SAP UI5的前端開發(fā)人員，上手微信小程序應該沒有什么難度。兩者同為前端框架在設計上自然有很多相似的地方。例如：

(1) 在微信小程序中的app.js極其類似于UI5中的component.js，都代表整個應用的一個全局實例。某些作用范圍為全局的方法或數(shù)據(jù)都可以存于其中。

(2) 兩者在數(shù)據(jù)綁定方面,都支持靈活的表達式綁定，將更多的本應出現(xiàn)在controller層的邏輯向前推放到view層當中，簡化邏輯層。

(3) 兩者都支持列表渲染，例如UI5中的ListBase中的items屬性，而微信小程序中則是通過wx:for屬性實現(xiàn)同樣的功能。

(4) 兩者都支持自定義控件/模板，UI5有component和custom control，微信小程序有component和template。

但兩者也有很多技術上的區(qū)別，例如：

(1) 前文提到的列表渲染，UI5僅支持對列表類控件的子控件進行列表渲染。而微信小程序則顯得更加靈活一些，任何一個控件都可以通過wx:for屬性進行重復渲染。例如上面例子中被重復渲染的就是image元素。

(2) 除了列表渲染，微信小程序更支持wx:if的條件渲染。即if條件檢測的結果為true時渲染，為false時則忽略。UI5中實現(xiàn)類似功能則更多是通過控制visible屬性來進行。

(3) Routing的實現(xiàn)。兩者都是使用棧的方式記錄跳轉(zhuǎn)的歷史，但是與UI5的"寬容"不同，微信小程序最多僅支持5層跳轉(zhuǎn)。

如用戶需要繼續(xù)向下訪問，則必須通過其他workaround實現(xiàn)，例如通過redirectTo將棧頂?shù)呐f頁面彈出棧，換成新頁面。

(4) 數(shù)據(jù)綁定方面。

UI5的數(shù)據(jù)綁定功能極其強大，支持各種類型的數(shù)據(jù)模型的排序和篩選，并且提供雙向綁定和單向綁定多種綁定方式。另外數(shù)據(jù)在view層和controller層的反饋也更加積極。

關于SAP UI5和Angular數(shù)據(jù)綁定的比較，可以參考Jerry這篇文章：

https://blogs./2016/06/30/compare-data-binding-mechanism-sapui5-and-angular/

關于SAP UI5和Vue數(shù)據(jù)雙向綁定的實現(xiàn)區(qū)別，可以參考Jerry這篇文章：

https://blogs./2017/06/14/two-way-data-binding-ui5-vs-vue/

相對而言微信小程序的數(shù)據(jù)綁定功能要稍弱一些。首先不提供排序和篩選功能。另外反饋也不夠積極：view層改動數(shù)據(jù)模型需要借助觸發(fā)事件來調(diào)用controller層中的方法進行手動賦值；controller層在更改模型時也必須通過setData方法，才能讓改動在view層中生效。

(5) 微信小程序的底層是"巨人"微信, 因此可以借助微信方便地調(diào)用很多硬件以及軟件API，例如：NFC，WIFI，藍牙，微信運動，生物認證，二維碼，登陸以及支付功能等。

(6) 縱觀兩者的控件庫，我們可以發(fā)現(xiàn)UI5可謂大而全，就連一個表格都要提供responsive table，grid table，smart table等, 目的就是為了支持尺寸各異的不同設備以及各種業(yè)務場景。而微信小程序則極其專注在移動端的常用控件，輕量，簡易且統(tǒng)一。

理念

綜合以上的比較，我們可以大致發(fā)現(xiàn)UI5和微信小程序自面世起便肩負著不同的使命。

UI5是SAP為其自研的企業(yè)管理軟件前端頁面所設計的前端框架，以此來實現(xiàn)SAP推薦的Fiori風格的前端應用。它的出現(xiàn)體現(xiàn)了SAP對于確保未來產(chǎn)品擁有統(tǒng)一風格，友好界面和良好用戶體驗的決心。

而微信小程序雖然小，卻足以彰顯微信擴張的雄心：通過豐富的前后端支持以及簡易的上手體驗，實現(xiàn)生態(tài)圈的急速擴充。而入口和外部訪問的限制則是快速擴張的同時，仍然恪守的那份理智。輕量，小巧，快速，簡易，移動，一站式。微信想要對你說的是，你的生活，被我承包了。

關于SAP UI5和微信小程序，SAP成都研究院的開發(fā)人員們做過很多研究，如果您想進行更多閱讀，可以參考下面的鏈接：

(1) 我的同事，SAP成都研究院大衛(wèi)哥Wu David的文章：SAP C4C中國本地化之微信小程序集成

(2) 以前Jerry寫的SAP UI5框架代碼自學教程

(3) Jerry在SAP社區(qū)上發(fā)表過的59篇SAP UI5相關的文章合集

(4) Jerry和您聊聊Chrome開發(fā)者工具：關于Chrome開發(fā)者工具一些搞笑的故事

(5) Jerry通過自己調(diào)試的方式解決過的UI5的問題合集：

https://blogs./2016/04/30/my-ui5-debugging-tips-and-experience-collection-how-to-resolve-ui5-issues-through-debugging-by-yourself/

(6) Jerry日常工作中使用Chrome開發(fā)者工具積累的一些技巧：