HBuilder webApp开发(十二)微信/支付宝支付

在公司的项目中,使用了微信支付,支付实际项目里面的支付流程和之前做原生app的时候是一样的。只是现在使用H5开发。
Hbuild是支持微信支付和支付宝支付的,虽说项目里只使用了微信支付,但是还是要研究一下支付宝支付的。
以前写《【iOS】集成支付宝支付/银联支付/微信支付》
那个时候遇见了很多坑,但是趟过去了,后面就好了。

看文档

在接触一个新的事物时,先看看官方的文档。
《支付插件配置》
这是配置支付环境。
《payment》
这是HTML5+的支付部分接口文档。
《支付错误码》
对着错误码可以方便我们调试。
《微信、支付宝支付那点事》
这个是网友写的经验,值得看看。

而我

我就是站在这些巨人的肩膀上面做了微信支付和支付宝支付,当然后台部分不是我做的。下面的代码也只能是Demo.

代码

<html>
    <head>
        <meta charset="utf-8">
        <title>Hello MUItitle>
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        
        <link rel="stylesheet" href="../css/mui.min.css">
        <link rel="stylesheet" href="../css/mui.css" />
        <link rel="stylesheet" href="../css/app.css" />
        
        <style type="text/css">
            .head {
                margin-top: 10px;
            }
            .head img{
                width: 120px;
                height: 120px;
                margin-left: calc(50% - 60px);
            }
            .top {
                margin-top: 40px;
            }
            .weixin {
                width: 60px;       
                height: 60px; 
                margin-left: calc(50% - 30px);
                background: url(../images/icon-weixin.png);   
            }
            .zhifubao {
                width: 60px;
                height: 60px;
                margin-left: calc(50% - 30px); 
                background: url(../images/alipay.jpg);  
            }
        style>
    head>
    <body>
        <header class="mui-bar mui-bar-nav white">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left">a>
            <h1 class="mui-title">第三方登录h1>
        header>
        <div class="mui-content">
            <div class="top" id="testLogin">
                <input type="button" class="weixin" id="weixin"/>
                <input type="button" class="zhifubao" id="zhifubao"/>
            div>
        div>
    body>
    <script src="../js/mui.min.js">script>
    <script src="../js/mui.zoom.js">    script>
    <script src="../js/mui.previewimage.js">script>
    <script src="../js/tools.js" >script>
    <script>
        var wxChannel = null; // 微信支付
        var aliChannel = null; // 支付宝支付
        var channel = null; 
        mui.init({
            swipeBack:true //启用右滑关闭功能
        });

        mui.plusReady(function() {  
            // 获取支付通道
                plus.payment.getChannels(function(channels){
                    aliChannel=channels[0];
                wxChannel=channels[1];
                },function(e){
                 alert("获取支付通道失败:"+e.message);
                });
        })

        document.getElementById('weixin').addEventListener('tap',function() {
            console.log("微信");
            pay('wxpay');
        })
        document.getElementById('zhifubao').addEventListener('tap',function() {
            console.log("zhifubao");
            pay('alipay'); 
        })

        var ALIPAYSERVER='http://demo.dcloud.net.cn/helloh5/payment/alipay.php?total=';
        var WXPAYSERVER='http://demo.dcloud.net.cn/helloh5/payment/wxpay.php?total=';
        // 2. 发起支付请求
        function pay(id){
                // 从服务器请求支付订单
                var PAYSERVER='';
                if(id=='alipay'){
                PAYSERVER=ALIPAYSERVER;
                channel = aliChannel;
            }else if(id=='wxpay'){
                    PAYSERVER=WXPAYSERVER;
                    channel = wxChannel;
                }else{
                    plus.nativeUI.alert("不支持此支付通道!",null,"捐赠");
                    return;
             }
                var xhr=new XMLHttpRequest();
                xhr.onreadystatechange=function(){
                    switch(xhr.readyState){
                        case 4:
                        if(xhr.status==200){
                            plus.payment.request(channel,xhr.responseText,function(result){
                                plus.nativeUI.alert("支付成功!",function(){
                                back();
                            });
                            },function(error){
                                plus.nativeUI.alert("支付失败:" + error.code);
                            });
                        }else{
                            alert("获取订单信息失败!");
                        }
                        break;
                    default:
                    break;
                }
         }
            xhr.open('GET',PAYSERVER);
            xhr.send();
    }

    script>
html>

有不明白的可以直接多看看文档,代码的注释官方文档都有了。

最后

原生和H5的也做了一些东西了,感觉这些涉及到第三方的东西,一定要多看文档和Demo,疏通流程就好了。
代码下载地址:请点击我!

你可能感兴趣的:(HBuilder,webApp开发)