凡是和钱打交道的事，没有一样是容易的。
来来来，我们开始从支付流程走起。
支付流程图
微信的支付流程
微信支付流程.jpeg
非微信环境的支付流程
非微信支付.jpeg
开发的前提
支付目录需要到后台公众号配置：
产品中心-开发配置-支付配置-公众号支付 配置到支付目录的最后一级。
支付开发中哪些坑
交易号（trade_no）和订单号（order_no）的区别？
最初的支付设计初衷是支持购物车模式，比如说联合支付，虽然是支持项目和互助加入或者互助充值一起下单支付的，但是实际上是一次交易两笔订单。那么就产生了一个交易号对应多个订单号的关系。
后台给我们提供了通过交易号来获取到整条交易信息，以及通过交易号来查询这笔交易是否完成的接口？
trade_no > order_no
n 1
支付宝支付成功的回调地址可自定义？
移动端不指定回调地址也可以正常回调？设置这个回调地址的目的是用于支付宝网页收银台的回调。如果不设置的话后台回指定跳到一个地址，实际上这个地址好像已经启用了。
非微信环境下的微信支付地址后面不可以加tzUrl；否则会出现，支付成功后的回调页面回不来。
如何进行二维码支付测试
二维码的支付测试 我们可以在微信开发者工具上进行测试。或者是被微信禁用的公众号里测试。效果图如下：
二维码支付.jpeg
微信分享和微信支付的冲突问题？
一个页面不能配置两个签名串，微信分享的签名串不支持支付，所以在调用支付接口时就无法打开微信app,被分享SDK给覆盖了,
支付的签名串是后端返回的，经常会切支付，用的是别的微信公众号的签名串，但是分享功能用的是本公众号的签名串。
一个页面不能配置两个签名串 。
引入公用的微信分享测试
iphone6s， 可以正常的分享，和支付
1+, 分享正常 支付正常？
自动获取焦点的坑？
input 有自动获取焦点的属性autofocus="autofocus", 但是这个属性在移动端存在很严重的兼容性问题，移动设备的可用率在64%；安卓还好，大多数ios系统禁用了自动获取焦点。caniuse上的统计如图：
autofocus.jpg
除此之外了，还尝试了让金额输入框获取焦点，但是ios系统上的展示，还是没有蓝色的光标闪烁。后来查询资料了解到，ios中input没办法自动获取，只能手动点击的。
$("#money-input").trigger("focus");
$("#money-input").trigger("click").focus();
当我们把这些自动获取焦点的代码添加上之后，在测试的工程中，发现安卓可以正常自动获取焦点蓝色光标闪烁；ios系统上实际上已经获取了焦点，但是没有蓝色光标闪烁，这其实没什么，出现严重的问题是，input金额输入框很难手动获取焦点，有时候需要点击输入框三次，才可以获取到焦点。很影响用户体验，后来在排查问题的过程中就把自动获取焦点的代码都去掉了。
联合支付的联动的坑？
我们的支持在初始设计的时候是支持购物车模式的，一笔交易可能会产生多个订单。联合支付就符合这样的模式。从用户体验考虑联合支付方框和单选按钮做成联动，更方便用户加入互助和进行互助充值。
我在做联动的时候。希望点击方框的时候，让单选按钮也处于选中的状态。于是我通过jquery的 .attr('checked', 'checked')给单选按钮添加选中状态。发现单选按钮的check属性添加上了，但是选中的样式状态没有显示。查询资料了解到。需要.prop("checked", true)，单选按钮也会被选中。
其实在在jquery中应该使用prop方法来获取和设置checked属性，不应该使用attr。这里是混合使用了。
网友评论