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