您的位置: 首页  >  文章  >  hbuilder的移动端APP如何实现微信支付,求具体流程详解

hbuilder的移动端APP如何实现微信支付,求具体流程详解

分类: 文章 • 2025-03-01 13:53:29
HBuilder 基座已实现H5 plus的支付API，现已集成支付宝快捷支付平台。使用支付功能前必须在支付宝网站开通”快捷支付“服务，并配置服务器生成订单信息。
开发指导
支付流程如下：
hbuilder的移动端APP如何实现微信支付,求具体流程详解
plus API使用步骤：
1. 调用plus.payment.getChannels()获取系统支持的支付通道；
2. 调用plus.payment.request()发起支付请求。
示例代码
  1. var channel=null;
  2. // 1. 获取支付通道
  3. function plusReady(){
  4.     // 获取支付通道
  5.     plus.payment.getChannels(function(channels){
  6.         channel=channels[0];
  7.     },function(e){
  8.         alert("获取支付通道失败："+e.message);
  9.     });
  10. }
  11. document.addEventListener('plusready',plusReady,false);

  13. var ALIPAYSERVER='http://demo.dcloud.net.cn/helloh5/payment/alipay.php?total=';
  14. var WXPAYSERVER='http://demo.dcloud.net.cn/helloh5/payment/wxpay.php?total=';
  15. // 2. 发起支付请求
  16. function pay(id){
  17.     // 从服务器请求支付订单
  18.     var PAYSERVER='';
  19.     if(id=='alipay'){
  20.         PAYSERVER=ALIPAYSERVER;
  21.     }else if(id=='wxpay'){
  22.         PAYSERVER=WXPAYSERVER;
  23.     }else{
  24.         plus.nativeUI.alert("不支持此支付通道！",null,"捐赠");
  25.         return;
  26.     }
  27.     var xhr=new XMLHttpRequest();
  28.     xhr.onreadystatechange=function(){
  29.         switch(xhr.readyState){
  30.             case 4:
  31.             if(xhr.status==200){
  32.                 plus.payment.request(channel,xhr.responseText,function(result){
  33.                     plus.nativeUI.alert("支付成功！",function(){
  34.                         back();
  35.                     });
  36.                 },function(error){
  37.                     plus.nativeUI.alert("支付失败：" + error.code);
  38.                 });
  39.             }else{
  40.                 alert("获取订单信息失败！");
  41.             }
  42.             break;
  43.             default:
  44.             break;
  45.         }
  46.     }
  47.     xhr.open('GET',PAYSERVER);
  48.     xhr.send();
  49. }
复制代码
注：第二步中获取到的订单数据需要在服务器通过支付宝平台获取PID和**生成。
HBuilder应用配置
分享插件添加方法具体步骤如下：
1. 双击应用的manifest.json文件，选中“使用第三方插件”
hbuilder的移动端APP如何实现微信支付,求具体流程详解 

Ctrl+S保存。

  • 点击manifest.json文件的“代码视图”，在permissions节点下添加Payment节点：
    hbuilder的移动端APP如何实现微信支付,求具体流程详解 
  • 在plus -> distribute -> plugins 节点下添加payment节点：


    alipay节点下配置支付宝相关信息
    scheme值为iOS平台调用支付宝的“快捷支付”应用返回时用到的标识，推荐使用小写字符串。
    weixin节点下配置微信支付相关信息
    appid值为在微信开放平台申请应用的AppID值。
支付宝功能申请
服务器生成订单示例（PHP）
参考开源示例代码github-支付宝
C#生成支付宝订单示例
微信支付功能申请

  • 使用微信支付功能需到微信开放平台申请移动应用并开通支付功能
    微信APP支付接入商户服务中心
    申请应用后可以获取AppID和AppSecret值。
  • 开通支付功能后可获取支付业务服务器配置数据
    PARTNER：财付通商户号
    PARTNER_KEY：财付通**
    PAYSIGNKEY：支付签名**


　　参考开源示例代码github-微信支付

相关推荐