整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
具的選擇不是越多人用越好。像Axure這類專業(yè)的原型制作軟件，在標(biāo)尺、對(duì)齊上面，是iH5遠(yuǎn)比不上的。但后者在與人溝通以及查看時(shí)有著優(yōu)勢(shì)。
最近支付寶進(jìn)行了一次比較大的版本更新，引起了很多人的關(guān)注，無論從視覺還是交互體驗(yàn)上都有了很大的改變，但是從原型制作來說，其實(shí)比之前更加簡(jiǎn)單了。
通過臨摹這些知名廠商的產(chǎn)品，是快速進(jìn)步的一種方式，可以更好的借鑒他們的交互與邏輯，比體驗(yàn)觀看，更能深刻的理解，從而更好的改進(jìn)自己的產(chǎn)品。
說到原型，很多人就會(huì)想到Axure，這類常用的原型工具，他們使用的都是HTML規(guī)范，動(dòng)效以及交互大部分引入的jQuery庫(kù)或者封裝的JS庫(kù)，其效果可以在軟件預(yù)覽以及導(dǎo)出HTML文件在瀏覽器預(yù)覽，同樣類別的還有Justinmind等等。
與其原理類似的也有很多，如定位于開發(fā)工具的Animate，其動(dòng)畫效果比Axure要強(qiáng)大的多，以及谷歌的web design，還有向國(guó)內(nèi)線上制作平臺(tái)的iH5，他們面向的是基礎(chǔ)交互，可自由編輯度高，不僅可以做出H5實(shí)例，同樣也可以用于原型。
這些工具可以分為線上與離線兩種制作方式，我個(gè)人偏向使用線上的制作工具，因?yàn)殡x線工具生成的原型不方便發(fā)給別人那看，而且制作嚴(yán)重依賴于軟件安裝，不便與即時(shí)查看與他人溝通。
對(duì)于臨摹來說，事先無需過多分析，了解一下大致交互，直接上手就可以。
工具：iH5
材料準(zhǔn)備：用手機(jī)把新版支付截屏，調(diào)到PS用切片把其分為各個(gè)模塊，如導(dǎo)航欄，對(duì)話框等等。
描述：底部導(dǎo)航的切換交互，跳轉(zhuǎn)頁面并且圖標(biāo)變?yōu)樗{(lán)色。可以用點(diǎn)擊事件控制兩種狀態(tài)，一是遮罩的移動(dòng)，二是頁面的跳轉(zhuǎn)。
新建時(shí)間軸，在其下面新建一個(gè)畫布，將藍(lán)色與灰色兩個(gè)底部導(dǎo)航欄，以及一個(gè)與圖標(biāo)大小的白色矩形，放入其中，在藍(lán)色導(dǎo)航圖片的屬性——遮罩，選擇白色矩形。然后在矩形下建立軌跡，四個(gè)關(guān)鍵幀分別對(duì)應(yīng)四個(gè)圖標(biāo)。
在舞臺(tái)上建四個(gè)頁面用來存放導(dǎo)航里的內(nèi)容。
在圖標(biāo)位置添加透明按鈕，在其下方添加事件，當(dāng)輕觸時(shí)跳轉(zhuǎn)頁面，以及跳轉(zhuǎn)到該時(shí)間軸的某一幀。
描述：當(dāng)頁面滑動(dòng)一段距離，頂部導(dǎo)航欄發(fā)生變換。通過監(jiān)測(cè)時(shí)間軸滑動(dòng)的時(shí)間，來觸發(fā)菜單欄的更換。
在頁面一，新建滑動(dòng)時(shí)間軸，所有素材放入其中，將兩個(gè)頂部導(dǎo)航疊放在一起，為內(nèi)容添加軌跡，讓其讓下滑動(dòng)，一秒時(shí)滑動(dòng)到底部，為初始默認(rèn)的導(dǎo)航添加兩個(gè)事件，當(dāng)滑動(dòng)時(shí)間軸滑動(dòng)0.1秒時(shí)，置于底層，當(dāng)時(shí)間為0時(shí)，至于頂層。
描述：類似圖片的輪播效果，將未顯示的圖片放在屏幕之外或者隱藏，通過手指的左右滑動(dòng)來控制圖片的進(jìn)出。
在頁面二，把準(zhǔn)備好三張輪播的圖，帶有三個(gè)鏤空?qǐng)A點(diǎn)的PNG圖片，以及一個(gè)大小與圓點(diǎn)差不多的矩形，都放入滑動(dòng)時(shí)間軸下面，新建軌跡，創(chuàng)建三個(gè)關(guān)鍵幀，通過調(diào)整圖片坐標(biāo)來控制在每一幀上顯示的圖片，當(dāng)你滑動(dòng)時(shí)，就會(huì)出現(xiàn)圖片的輪播效果，如果需要在圖片上加入鏈接，直接在該圖片添加點(diǎn)擊事件，動(dòng)作設(shè)置為跳轉(zhuǎn)頁面即可。
描述：點(diǎn)擊按鈕時(shí)彈框出現(xiàn)，然后點(diǎn)擊其周圍彈框消失。為彈框設(shè)置好動(dòng)畫之后，利用事件，來控制其正向與反向播放即可。
在頁面三上，準(zhǔn)備一張黑背景圖片以及設(shè)計(jì)好的彈框，將其放入時(shí)間軸下，利用軌跡制作出想要的效果，在背景上的“+”添加一個(gè)透明按鈕，增加一個(gè)事件，當(dāng)點(diǎn)擊時(shí)讓該時(shí)間軸從頭播放，然后在黑色背景下添加同樣的事件，把動(dòng)作改為反向播放。
其他的一些交互無外乎都是頁面的跳轉(zhuǎn)，原型制作上并沒有多少壓力。
制作完成之后，就可發(fā)布了，會(huì)生成一個(gè)網(wǎng)址鏈接與二維碼，可以在線編輯與查看。
工欲善其事，必先利其器，工具的選擇不是越多人用越好。像Axure這類專業(yè)的原型制作軟件，在標(biāo)尺、對(duì)齊上面，是上面所使用的iH5遠(yuǎn)比不上的（后者得通過x|y坐標(biāo)等精確控制），而且其還擁有眾多有手機(jī)圖標(biāo)等模板，可以大大加快原型制作，但后者在與人溝通以及查看時(shí)有著優(yōu)勢(shì)，并且隨著H5營(yíng)銷的流行，其也可以快速制作出相關(guān)的營(yíng)銷案例，并迅速在網(wǎng)上傳播，不用再依靠別人，或者重新學(xué)習(xí)其他制作工具，擁有更多的可操作性。
本文由 @iood 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。
移動(dòng)支付已經(jīng)成為現(xiàn)代生活中不可或缺的一部分。隨著技術(shù)的不斷發(fā)展和普及，越來越多的人通過手機(jī)進(jìn)行支付。支付寶和微信支付作為中國(guó)最主要的移動(dòng)支付平臺(tái)，已經(jīng)成為人們?nèi)粘Ｉ钪凶畛Ｓ玫闹Ц斗绞街弧Ｈ欢瑢?duì)于一些初創(chuàng)企業(yè)或者中小型企業(yè)來說，要接入支付寶和微信支付并不是一件容易的事情。傳統(tǒng)的接入方式需要大量的開發(fā)工作和技術(shù)支持，對(duì)于沒有相關(guān)技術(shù)背景的企業(yè)來說可能會(huì)面臨很大的困難。
低代碼開發(fā)平臺(tái)的出現(xiàn)給這些企業(yè)帶來了新的機(jī)遇。低代碼開發(fā)平臺(tái)是一種簡(jiǎn)化軟件開發(fā)過程的工具，通過可視化方式進(jìn)行開發(fā)，減少了編碼的需求，并提供了豐富的組件庫(kù)和預(yù)置的功能模塊，以幫助企業(yè)快速構(gòu)建應(yīng)用程序。在移動(dòng)支付領(lǐng)域，低代碼開發(fā)平臺(tái)可以極大地簡(jiǎn)化接入支付寶和微信支付的過程。企業(yè)只需要在低代碼平臺(tái)上進(jìn)行簡(jiǎn)單的配置和集成，就可以實(shí)現(xiàn)與支付寶和微信支付的對(duì)接，從而實(shí)現(xiàn)移動(dòng)支付功能。
本文小編將深入探討低代碼如何對(duì)接支付寶和微信支付，介紹低代碼開發(fā)平臺(tái)的優(yōu)勢(shì)和特點(diǎn)，并以葡萄城的企業(yè)級(jí)低代碼開發(fā)平臺(tái)——活字格為案例來說明低代碼對(duì)接支付寶和微信支付的具體步驟。
通過閱讀本文，讀者將能夠更好地理解低代碼在移動(dòng)支付領(lǐng)域的應(yīng)用，并掌握如何利用低代碼開發(fā)平臺(tái)快速實(shí)現(xiàn)與支付寶和微信支付的對(duì)接。在移動(dòng)支付新時(shí)代的背景下，低代碼開發(fā)平臺(tái)為企業(yè)提供了一個(gè)更簡(jiǎn)單、更快速的方式來接入支付寶和微信支付。讓我們一起深入研究并實(shí)踐這個(gè)全新的技術(shù)，迎接移動(dòng)支付的未來。
活字格低代碼開發(fā)平臺(tái)
微信支付/支付寶支付相關(guān)賬戶信息。
在活字格中，前端設(shè)計(jì)變得異常簡(jiǎn)單，只需要把想要的組件拖拉拽到頁面上，即可達(dá)到所見即所得的效果，再加上活字格的流式布局，可以讓我們所涉及的頁面靈活適應(yīng)不同尺寸顯示器及分辨率。
如圖這是設(shè)計(jì)階段：
這是效果展示：
在活字格中新建一個(gè)服務(wù)端命令（可自由在任何時(shí)機(jī)調(diào)用的命令）完成與微信支付的相關(guān)配置即可。
微信官方參考文檔：JSAPI支付
在活字格中只需要在配置好上述支付設(shè)置后，調(diào)用對(duì)應(yīng)的支付命令即可。
使用微信客戶端掃碼后發(fā)起支付。參數(shù)請(qǐng)參見：Native 支付
按文檔規(guī)范對(duì)微信返回應(yīng)答。在負(fù)責(zé)支付回調(diào)的服務(wù)端命令中使用。
對(duì)所在服務(wù)端命令接收到的相關(guān)支付結(jié)果及用戶信息進(jìn)行相關(guān)處理，并將相關(guān)支付結(jié)果信息設(shè)置為參數(shù)。
提供所有微信支付訂單的查詢，商戶可以通過“微信支付訂單查詢”命令主動(dòng)查詢訂單狀態(tài)，并將查詢結(jié)果存入指定參數(shù)。
當(dāng)交易發(fā)生之后一段時(shí)間內(nèi)，賣家可以通過“微信申請(qǐng)退款”服務(wù)端命令將支付款退還給買家，微信支付將在收到退款請(qǐng)求并且驗(yàn)證成功之后，按照退款規(guī)則將支付款按原路退到買家?guī)ぬ?hào)上。
提交退款申請(qǐng)后，通過調(diào)用該命令查詢退款狀態(tài)。
JSAPI 微信支付時(shí)序圖：
Native 微信支付時(shí)序圖：
在支付寶電腦網(wǎng)站場(chǎng)景下單后，返回支付HTML。參數(shù)請(qǐng)參見支付寶電腦網(wǎng)站下單。
接收支付寶電腦網(wǎng)站下單命令返回的支付html, 跳轉(zhuǎn)到支付寶支付頁面。此命令需在頁面端使用。
在用戶支付完成之后，支付寶會(huì)調(diào)用支付寶電腦網(wǎng)站下單中指定服務(wù)端命令將支付結(jié)果作為參數(shù)通知到商家系統(tǒng)。參數(shù)請(qǐng)參見支付寶支付結(jié)果通知。
按文檔規(guī)范對(duì)支付寶返回應(yīng)答。在負(fù)責(zé)支付回調(diào)的服務(wù)端命令中使用。
提供支付寶支付訂單的查詢，可以主動(dòng)查詢訂單狀態(tài)，完成下一步的業(yè)務(wù)邏輯。參數(shù)請(qǐng)參見支付寶支付訂單查詢。
交易發(fā)生之后一段時(shí)間內(nèi)，由于買家或者賣家的原因需要退款時(shí)，賣家可以通過此命令將支付款退還給買家，支付寶將在收到退款請(qǐng)求并且驗(yàn)證成功之后，按照退款規(guī)則將支付款按原路退到買家?guī)ぬ?hào)上。參數(shù)請(qǐng)參見支付寶申請(qǐng)退款。
商戶可使用該接口查詢退款請(qǐng)求是否執(zhí)行成功。參數(shù)請(qǐng)參見支付寶支付退款查詢。
支付寶和微信支付作為中國(guó)主要的移動(dòng)支付平臺(tái)，給人們帶來了便利和快捷。然而，對(duì)于一些初創(chuàng)企業(yè)或中小型企業(yè)來說，接入支付寶和微信支付可能面臨一系列困難。低代碼開發(fā)平臺(tái)的出現(xiàn)為這些企業(yè)提供了解決方案。通過低代碼開發(fā)平臺(tái)，企業(yè)可以簡(jiǎn)化接入支付寶和微信支付的過程，減少開發(fā)工作和技術(shù)支持的需求。
本文介紹了低代碼如何對(duì)接支付寶和微信支付，并強(qiáng)調(diào)了低代碼開發(fā)平臺(tái)的優(yōu)勢(shì)和特點(diǎn)。通過實(shí)際案例的說明，我們可以看到低代碼對(duì)接支付寶和微信支付的具體步驟。這些步驟簡(jiǎn)單明了，讓企業(yè)能夠迅速應(yīng)用和實(shí)踐。
在移動(dòng)支付新時(shí)代的背景下，低代碼開發(fā)平臺(tái)為企業(yè)帶來了更簡(jiǎn)單、更快速的方式來接入支付寶和微信支付。這一技術(shù)不僅為初創(chuàng)企業(yè)和中小型企業(yè)提供了機(jī)會(huì)，也為傳統(tǒng)企業(yè)轉(zhuǎn)型升級(jí)提供了新的思路和方法。隨著技術(shù)的進(jìn)一步發(fā)展，低代碼開發(fā)平臺(tái)將在移動(dòng)支付領(lǐng)域發(fā)揮更大的作用。
前 mPaaS H5 容器 Demo 源碼已發(fā)布至 GitHub，全新的接入方式讓你可以一鍵集成 mPaaS 環(huán)境并快速接入 H5 容器，體驗(yàn)統(tǒng)一的容器和內(nèi)核，獲取媲美原生的 Hybrid 方案及完美的動(dòng)態(tài)能力。
目前支付寶有 2 套 Hybrid 方案： HTML5 容器與小程序。小程序是最近幾年才出來，H5 容器已經(jīng)有了很長(zhǎng)時(shí)間的歷史，所以我們就先從 H5 容器說起。
在支付寶中，HTML5 容器架構(gòu)如圖所示：
最上層是瀏覽器，這塊就是大家常見的 Web 開發(fā)環(huán)境，包括 HTML、CSS、JavaScript等。H5 容器作為中間層，將瀏覽器和支付寶底層框架有機(jī)結(jié)合起來，在 H5 容器里面有 2 個(gè)非常重要的概念： JSBridge 和 離線包，后面會(huì)做詳細(xì)介紹。支付寶底層框架會(huì)給 H5 容器提供 Native 的能力，這其中就包括 RPC（遠(yuǎn)程過程調(diào)用，用來實(shí)現(xiàn) APP 和服務(wù)器通信）、支付、掃一掃等。
JSBridge 是 H5 容器的基石，橋接了 JS 環(huán)境與 Native，實(shí)現(xiàn)了 Native 代碼和 瀏覽器 環(huán)境的雙向通信，Native 代碼可以通過調(diào)用 瀏覽器 提供的接口運(yùn)行JS，從而實(shí)現(xiàn)調(diào)用 JS 函數(shù)、傳遞參數(shù)到 JS 環(huán)境等；而瀏覽器到JS環(huán)境的通信是通過 Native 攔截瀏覽器的請(qǐng)求來實(shí)現(xiàn)，請(qǐng)求可以是網(wǎng)絡(luò)請(qǐng)求或者是一些內(nèi)部函數(shù)的調(diào)用。
那么 JSBridge 會(huì)帶來什么好處呢，在傳統(tǒng)的 Web 開發(fā)場(chǎng)景，H5 頁面會(huì)通過 HTTP 的 GET 或者 POST 請(qǐng)求到后臺(tái)獲取數(shù)據(jù)，就會(huì)用到 jQuery 等 AJAX 框架。但是 H5 頁面中的 JS 函數(shù)公開的，沒法做一些加密邏輯，同時(shí)對(duì)于無法優(yōu)化網(wǎng)絡(luò)。這幾年隨著 4G 和流量卡的普及，讓手機(jī)網(wǎng)絡(luò)變得更快、更便宜，在這之前大量用戶會(huì)面臨流量不足、信號(hào)差、網(wǎng)絡(luò)不穩(wěn)定的情況，這些場(chǎng)景在現(xiàn)在依然存在，而純 Web 方案是沒法提供相關(guān)的優(yōu)化。
H5 容器提供的 JSBridge 解決了這個(gè)問題，所有 H5 頁面需要從后臺(tái)獲取的數(shù)據(jù)都通過 JS Bridge 調(diào)用 Native 的 RPC SDK 來獲取。這樣實(shí)際 App 請(qǐng)求的數(shù)據(jù)都是由 RPC SDK 來發(fā)送，從而可以實(shí)現(xiàn)安全加密、簽名校驗(yàn)、弱網(wǎng)優(yōu)化、流量?jī)?yōu)化的功能。Native 層的這些功能是 Web 頁面開發(fā)人員無感知的，所以業(yè)務(wù)開發(fā)人員只需要專注其自身的業(yè)務(wù)開發(fā)即可。安全性由支付寶底層 SDK 保障。
H5 容器提供了 2 種擴(kuò)展方式：
1. JSAPI
JSAPI 方式給 H5 頁面增加了 Native 功能調(diào)用接口，通過實(shí)現(xiàn)自定義 JSAPI 類中的 handler 方式，可以以 Native 的形式實(shí)現(xiàn)特定功能，例如調(diào)用 Native 加密函數(shù)。
2. 事件
H5 容器在狀態(tài)變化時(shí)會(huì)發(fā)送事件，通過監(jiān)聽 H5 容器特定事件，可以實(shí)現(xiàn)對(duì) H5 容器生命周期的處理，比如修改加載進(jìn)度條顏色、修改頁面導(dǎo)航欄等。事件提供了更強(qiáng)的定制性，完全可以滿足對(duì) H5 容器的各種自定義需求。
H5 容器離線包是 H5 容器用戶體驗(yàn)的關(guān)鍵。
在 APP 里面打開一個(gè)線上頁面的時(shí)候，通常會(huì)有一個(gè)白屏的階段，這是瀏覽器需要從服務(wù)器下載 HTML 資源。由于手機(jī)網(wǎng)絡(luò)的限制，這個(gè)時(shí)間會(huì)很不確定，通常會(huì)花費(fèi) 300ms 以上的時(shí)間，用戶在這個(gè)時(shí)間里面就會(huì)看到頁面白屏。
為了優(yōu)化 H5 容器用戶體驗(yàn)，減少白屏?xí)r間，支付寶在 H5 容器中引入了離線包技術(shù)。離線包可以簡(jiǎn)單理解為一個(gè) zip 壓縮包，其中包含前端頁面所需的 HTML、CSS、JS、圖片等資源。內(nèi)置到客戶端后，H5 容器打開離線包頁面時(shí)會(huì)直接從離線包中獲取資源，這個(gè)是毫秒的訪問時(shí)間，消除了打開頁面白屏現(xiàn)象。
在支付寶中，離線包分為 2 種：普通的業(yè)務(wù)資源包和公共資源包。先說公共資源包吧，公共資源包中會(huì)包含一些框架 JS、CSS、常見圖片等，這些資源在整個(gè) App 里面就只保存一份；而業(yè)務(wù)資源包中只保存該業(yè)務(wù)所需的頁面靜態(tài)資源，業(yè)務(wù)之間是相互獨(dú)立解耦的。這樣一個(gè)業(yè)務(wù)的頁面資源就會(huì)同時(shí)來自其業(yè)務(wù)資源包和公共資源包，公共資源包的存在優(yōu)化了 App 大小。
為了滿足快速發(fā)布的需求，H5 容器離線包提供了更新機(jī)制，以單個(gè)離線包作為更新維度。因?yàn)閱蝹€(gè)離線包業(yè)務(wù)很簡(jiǎn)單，所以離線包的大小是可控的，通常小于 500KB，這樣單個(gè)離線包的更新時(shí)間可控，可以做到用戶無感知。在一些極端網(wǎng)絡(luò)場(chǎng)景下，新的業(yè)務(wù)資源包沒有更新超過，而我們又期望用戶使用的是最新的業(yè)務(wù)，這個(gè)時(shí)候 fallback 訪問機(jī)制就會(huì)發(fā)揮作用。每個(gè)離線包資源都會(huì)在服務(wù)器存放一份，在剛剛說到的極端場(chǎng)景下，用戶會(huì)訪問服務(wù)器的 fallback 地址獲取資源，從而保障頁面可用。
結(jié)合前面說到的離線包后，整個(gè) H5 容器渲染流程如下。其中離線包資源的更新、下載對(duì)用戶無感知，頁面訪問的資源是來自離線包還是來自 fallback 地址對(duì)前端是無感知的。
為了提高 H5 容器穩(wěn)定性，支付寶在安卓系統(tǒng)上使用了 UC Webview，UC Webview 的崩潰率和ANR率遠(yuǎn)低于系統(tǒng)瀏覽器，而且徹底規(guī)避了安卓系統(tǒng) Webview 碎片化問題，相信做過安卓前端頁面兼容的同學(xué)一定可以體會(huì)到使用一個(gè)瀏覽器內(nèi)核的好處。
H5 容器作為一個(gè)成熟的 Hybrid 方案可以滿足大部分的業(yè)務(wù)場(chǎng)景需求，但是其依然存在一些局限性。H5 容器的業(yè)務(wù)開發(fā)部分還保持著前端開發(fā)思維，畢竟整個(gè)過程都是使用的前端技術(shù)，只需要在業(yè)務(wù)開發(fā)完成后集成到 APP 中完成測(cè)試。但是客戶端開發(fā)其中還有很多關(guān)鍵的概念，例如 iOS 的 ViewController 、Android 的 Activity 等，對(duì)客戶端頁面棧有清楚的了解更有助于開發(fā) H5 容器。同時(shí) H5 容器還存在一個(gè)致命的問題就是無法管控質(zhì)量，寬泛的前端規(guī)范讓管控變得異常困難。
為了解決 H5 容器的局限性，順應(yīng)當(dāng)前 APP 共享開放的需求，支付寶推出了新的 Hybrid 方案：支付寶小程序。支付寶小程序一種全新的開放模式，它運(yùn)行在支付寶客戶端，可以被便捷地獲取和傳播，為終端用戶提供更優(yōu)的用戶體驗(yàn) 。支付寶小程序基于 Web 技術(shù)，因此學(xué)習(xí)成本低；其一套代碼同時(shí)支持 iOS 和 Android；并提供了豐富組件和 API；完全為 APP 開發(fā)而生。目前支付寶小程序已經(jīng)提供 2000 多個(gè)開放接口，API 日調(diào)用次數(shù)超過 25 億次，擁有超過 100 萬的合作伙伴和超過 10 萬個(gè)活躍服務(wù)商。
支付寶小程序同時(shí)還支持了阿里系多個(gè) App ，包括口碑、高德和釘釘。
那么支付寶小程序是怎么解決 H5 容器的局限性呢？首先支付寶小程序是基于一個(gè)定制的 DSL 語言，不是前端的標(biāo)準(zhǔn)，但是類似。在 DSL 規(guī)則下業(yè)務(wù)進(jìn)行小程序的開發(fā)，不支持直接操作 DOM，這種 DSL 規(guī)則下的自由可以有效的進(jìn)行質(zhì)量管控。另外支付寶小程序可以提供比 H5 小程序更優(yōu)秀的性能、體驗(yàn)和兼容性，可以無感替換底層框架，應(yīng)對(duì)遇到的性能問題。
目前支付寶小程序也支持前面提到的 H5 容器所使用的離線包技術(shù)，同時(shí)也支持 JSAPI 和事件的擴(kuò)展方式，提供了更大的靈活性。
支付寶小程序的 DSL 語言包括了 4 部分：
文件用來提供小程序相關(guān)的配置，這里就強(qiáng)調(diào)了 page 和 window 的概念，支持用戶去配置導(dǎo)航欄等 APP 開發(fā)中的概念。
可以理解為小孩程序的頁面 HTML，不支持直接操作 DOM 保障了頁面邏輯的可控。
用來描述代碼邏輯，提供了 Page 中所需的各種生命周期，讓開發(fā)者有APP 中的各種概念。
類似于 H5 中的 CSS，支持大部分 CSS 語法，讓前端開發(fā)可以快速完成小程序 UI 設(shè)計(jì)。
目前支付寶小程序已經(jīng)逐步開放給個(gè)人開發(fā)者使用，大家可以申請(qǐng)開通，享受支付寶帶來的流量。
支付寶沉淀的 Hybrid 方案 H5 容器和小程序已經(jīng)經(jīng)過實(shí)際嚴(yán)苛的業(yè)務(wù)考驗(yàn)，通過前面的介紹相信大家已經(jīng)有了了解。
從 0 開始開發(fā)一套 Hybrid 框架需要大量的人力以及反復(fù)的業(yè)務(wù)驗(yàn)證，對(duì)于大部分公司來說成本太高。
而使用開源的 Hybrid 框架，例如 Cordova、Weex、React Native、Flutter等會(huì)面臨一個(gè)非常致命的問題，就是遇到框架層的問題，很難獲得及時(shí)有效的技術(shù)支持。
目前支付寶的 Hybrid 方案已經(jīng)借助移動(dòng)開發(fā)平臺(tái) mPaaS 對(duì)外輸出，解決前面提到的痛點(diǎn)，讓你直接和支付寶使用同一套框架層代碼，而且提供及時(shí)的技術(shù)支持。
mPaaS 是一站式移動(dòng)開發(fā)解決方案，提供了移動(dòng)開發(fā)所需的 5 大組件：MGS、MDS、MPS、MAS、MSS，這些組件都是基于支付寶，經(jīng)過實(shí)際業(yè)務(wù)考驗(yàn)。
其中 mPaaS 的 Hybrid 解決方案就包含前面提到：H5 容器、離線包、小程序 三大部分。
mPaaS H5 容器是一個(gè)移動(dòng)端 Hybrid SDK，提供了良好的外部擴(kuò)展，可結(jié)合具體業(yè)務(wù)需求定制 JSAPI。在 Android 上使用 UC Webview，擁有解決系統(tǒng)級(jí) Webview Crash 的能力。
mPaaS H5 離線包將 HTML 靜態(tài)資源壓縮預(yù)置到客戶端或通過 WIFI 預(yù)加載到本地，使用時(shí)直接從本地加載，從而最大程度地提高性能。結(jié)合 mPaaS MDS 推送服務(wù)，可以實(shí)現(xiàn)灰度發(fā)布、強(qiáng)制更新，讓業(yè)務(wù)的開發(fā)更加靈活。
mPaaS 小程序可以讓大家自己的 App 使用小程序技術(shù)開發(fā)，構(gòu)建自己的 App 生態(tài)，也就是說一步到位讓其滿足超級(jí) App 的能力。由于底層使用的就是支付寶小程序的技術(shù)，可以無縫遷移支付寶小程序到自己的 App 中。
目前支付寶小程序的 IDE 已經(jīng)支持多渠道，包括支付寶、mPaaS和釘釘，點(diǎn)擊切換即可輕松將小程序發(fā)布到對(duì)應(yīng)的平臺(tái)。
作者：云攻略小攻
本文為阿里云原創(chuàng)內(nèi)容，未經(jīng)允許不得轉(zhuǎn)載。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
