原生支付 - wap2app教程

支付功能是app重要的组重部分，wap2app支持两种支付方式：原生支付、H5网页支付。

H5支付

H5网页支付主要是通过schame调起客户端达到支付的目的。

hello wap2app示例里的支付示例采用的就是这种（在HBuilder新建wap2app选择hello wap2app模版示例即可体验），在需要支付时将参数传入后台，生成相关参数然后跳转支付页面，在支付页面，会自动通过schame调起客户端进行支付。

开发wap2app时，使用H5支付的方式，改动较少，只需要将页面的url配置到的webview里面即可。

在实际开发中，可将微信或支付宝的支付页面配置到同一个webview里面简单命名为pay，支付成功或失败后新开到另外的webview，命名为paySuccess，在paySuccess这个页面onShow()的时候，关闭pay页面，这样，执行back操作的时候就可以直接退回订单生成的页面，开发者可根据自己的需求设置页面逻辑。

原生支付

wap2app是运行在5+runtime下的应用，所以支持5+plus的各种api，其中包含支付功能。

5+支付可参考教程http://ask.dcloud.net.cn/article/71,也可在HBuilder里面新建Hello H5+，在里面查看相关demo源码。

使用5+的支付方式需要改造原站，判断是5+引擎的环境下，调用pay模块的api即可实现。 

  1. document.getElementById("pay").addEventListener("click", function() {  
  2.     if(navigator.userAgent.indexOf("Html5Plus") > -1) {  
  3.         //5+ 原生支付  
  4.     } else {  
  5.         //原有wap站H5支付   
  6.     }  
  7. });

使用原生支付体验较好，支持各种回调，可以得到不同的返回参数，开发起来逻辑更加清晰。

注意

  • 无论那种支付方式都得细看官方的支付文档（微信支付文档，支付宝支付文档），还有就是是H5网页支付和app支付是不一样的流程，需要区分开；
  • 网页集成原生支付后，在真机调试不能调起原生支付，检查调用plus的相关代码与服务端代码写得是否正确；
  • 真机调试能正常调起原生支付，云端打包后支付失败，检查腾讯与阿里的后台签名密钥appid之类的是否正确；
  • 还有其他问题，可在本帖或论坛提出。