整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
具的选择不是越多人用越好。像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小时内与您取得联系。
