thinkphp3.2微信支付JSAPI支付开发过程

偏执的太偏执、 2022-12-25 08:58 322阅读 0赞

# 前期准备： #

1.微信认证服务号，并且开通了微信支付  
2.微信支付SDK，下载地址：https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=11\_1  
3.要设置 JSAPI支付 支付授权目录(微信支付->产品中心->开发配置->支付配置->JSAPI支付授权目录，设置域名就可以)

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bnNpamlhMjE5ODM_size_16_color_FFFFFF_t_70_pic_center]

# 方法步骤： #

1.解压下载的demo文件夹改名为WxpayJSAPI（自己命名），整个复制到核心框架ThinkPHP\\Library\\Vendor中方便调用。  
![在这里插入图片描述][20201201135645198.png_pic_center]

2.将example以及lib中的文件，引入外部文件require\_once的路径修改，类似于require\_once “…/” 的路径全部改成下图所示。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bnNpamlhMjE5ODM_size_16_color_FFFFFF_t_70_pic_center 1]

3.编写支付的控制器以及视图，比如 我写的是控制器TestController，方法是wxJsApiTest页面，大部分代码是demo里面的。

public function wxJsApiTest()
        { 
    
            /** * * example目录下为简单的支付样例，仅能用于搭建快速体验微信支付使用 * 样例的作用仅限于指导如何使用sdk，在安全上面仅做了简单处理， 复制使用样例代码时请慎重 * 请勿直接直接使用样例对外提供服务 * **/
            vendor('WxpayJSAPI.example.WxPay#JsApiPay');//引入文件
            header("Content-Type: text/html;charset=utf-8");
    		//①、获取用户openid
            try{ 
                $tools =  new \JsApiPay();
                $openId = $tools->GetOpenid();
                //②、统一下单
                $input = new \WxPayUnifiedOrder();
                $input->SetBody("test");
                $input->SetAttach("test");
                $input->SetOut_trade_no("sdkphp".date("YmdHis"));
                $input->SetTotal_fee("1");
                $input->SetTime_start(date("YmdHis"));
                $input->SetTime_expire(date("YmdHis", time() + 600));
                $input->SetGoods_tag("test");
                $input->SetNotify_url("http://www.xxxx.com/Home/Test/huidiaojsapi");
                $input->SetTrade_type("JSAPI");
                $input->SetOpenid($openId);
                $config = new \WxPayConfig();
                $order = \WxPayApi::unifiedOrder($config, $input);
                echo '<font color="#f00"><b>统一下单支付单信息</b></font><br/>';
                $this->printf_info($order);
                $jsApiParameters = $tools->GetJsApiParameters($order);
    
                //获取共享收货地址js函数参数
                $editAddress = $tools->GetEditAddressParameters();
            } catch(Exception $e) { 
                //Log::ERROR(json_encode($e));
            }
    //③、在支持成功回调通知中处理成功之后的事宜，见 notify.php
            /** * 注意： * 1、当你的回调地址不可访问的时候，回调通知会失败，可以通过查询订单来确认支付是否成功 * 2、jsapi支付时需要填入用户openid，WxPay.JsApiPay.php中有获取openid流程 （文档可以参考微信公众平台“网页授权接口”， * 参考http://mp.weixin.qq.com/wiki/17/c0f37d5704f0b64713d5d2c37b468d75.html） */
             return $this->render('Test:wxJsApiZf', array(
                    'openid'    => 123,
                    'jsApiParameters' =>$jsApiParameters,
                    'editAddress' => $editAddress
          ));
        }
    //打印输出数组信息
        public function printf_info($data)
        { 
            foreach($data as $key=>$value){ 
                echo "<font color='#00ff55;'>$key</font> : ".htmlspecialchars($value, ENT_QUOTES)." <br/>";
            }
        }

视图：（截取了部分代码，根据自己的需求进行美化，大部分也是demo里面的）

<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <title>微信支付样例-支付</title>
        <script type="text/javascript"> //调用微信JS api 支付 function jsApiCall() { var jsApiParameters = "{ { jsApiParameters }}".replace( /"/g, '"' ); jsApiParameters = JSON.parse(jsApiParameters); WeixinJSBridge.invoke( 'getBrandWCPayRequest',{ "appId":jsApiParameters.appId, //公众号名称，由商户传入 "timeStamp":jsApiParameters.timeStamp, //时间戳，自1970年以来的秒数 "nonceStr":jsApiParameters.nonceStr, //随机串 "package":jsApiParameters.package, "signType":jsApiParameters.signType, //微信签名方式： "paySign":jsApiParameters.paySign //微信签名 }, function(res){ if(res.err_msg === 'get_brand_wcpay_request:ok'){ alert("支付成功"); }else if(res.err_msg === 'get_brand_wcpay_request:cancel'){ alert("取消支付!"); } } ); } function callpay() { if (typeof WeixinJSBridge == "undefined"){ if( document.addEventListener ){ document.addEventListener('WeixinJSBridgeReady', jsApiCall, false); }else if (document.attachEvent){ document.attachEvent('WeixinJSBridgeReady', jsApiCall); document.attachEvent('onWeixinJSBridgeReady', jsApiCall); } }else{ jsApiCall(); } } </script>
    </head>
    <body>
    <br/>
    <font color="#9ACD32"><b>该笔订单支付金额为<span style="color:#f00;font-size:50px">1分</span>钱</b></font><br/><br/>
    <div align="center">
        <button style="width:210px; height:50px; border-radius: 15px;background-color:#FE6714; border:0px #FE6714 solid; cursor: pointer; color:white; font-size:16px;" type="button" onclick="callpay()" >立即支付</button>
    </div>
    </body>
    </html>

访问页面  
http://test.xxxx.com/Home/Test/wxJsApiTest  
要用真机调试，微信开发者工具 只能看样式  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bnNpamlhMjE5ODM_size_16_color_FFFFFF_t_70_pic_center 2]

回调 这里配置回调路径  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bnNpamlhMjE5ODM_size_16_color_FFFFFF_t_70_pic_center 3]

![在这里插入图片描述][20201201140131223.jpeg_pic_center]

回调内容

## 遇到的问题，记下来供大家参考。 ##

（1）curl出错 错误码:60  
解决方法：在WxPay.Api.php文件中

//找到以下两行代码：
    curl_setopt($ch,CURLOPT_SSL_VERIFYPEER,TRUE);
    curl_setopt($ch,CURLOPT_SSL_VERIFYHOST,2);//严格校验
    //改成
    if(stripos($url,"https://")!==FALSE){ 
        curl_setopt($ch, CURLOPT_SSLVERSION, CURL_SSLVERSION_TLSv1);
        curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);
        curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, FALSE);
    }else{ 
        curl_setopt($ch,CURLOPT_SSL_VERIFYPEER,TRUE);
        curl_setopt($ch,CURLOPT_SSL_VERIFYHOST,2);//严格校验
    }

（2）URL未注册  
解决方法：  
首先确定了支付授权目录设置没有问题，最后发现是URL\_MODEL 为pathinfo 的问题，一开始我写的跳转到支付的页面的网址形式是这种http://xxx.com/Weixinpay/index/id/1 ,其实我们认为Weixinpay是目录而已，后面是文件，id是参数，但微信认为是到最后一个斜杠为止都是目录,也就是id,最后我改成了http://xxx.com/Weixinpay/index?id=1，测试成功。  
（3）errMsg: “chooseWXPay:fail, the permission value is offline verifying”  
解决办法：  
要用真机调试  
（4）errMsg":“translateVoice:fail, the permission value is offline verifying”  
解决办法：  
自己写的参数，没有使用原来的直接放参数  
原  
![在这里插入图片描述][20201201140206475.png_pic_center]

现

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bnNpamlhMjE5ODM_size_16_color_FFFFFF_t_70_pic_center 4]

## 备注 ##

参考支付：  
https://blog.csdn.net/wyy20/article/details/104601665  
支付结果通知  
https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=9\_7  
业务流程  
https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7\_4  
支付常见问题  
https://pay.weixin.qq.com/wiki/doc/api/jsapi\_sl.php?chapter=7\_9&index=7

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bnNpamlhMjE5ODM_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/83ff01e2f147423ab684bc539e537f89.png
[20201201135645198.png_pic_center]: https://img-blog.csdnimg.cn/20201201135645198.png#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bnNpamlhMjE5ODM_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/20201201135754108.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bnNpamlhMjE5ODM=,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bnNpamlhMjE5ODM_size_16_color_FFFFFF_t_70_pic_center 2]: https://img-blog.csdnimg.cn/20201201135928205.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bnNpamlhMjE5ODM=,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bnNpamlhMjE5ODM_size_16_color_FFFFFF_t_70_pic_center 3]: https://img-blog.csdnimg.cn/202012011401026.jpeg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bnNpamlhMjE5ODM=,size_16,color_FFFFFF,t_70#pic_center
[20201201140131223.jpeg_pic_center]: https://img-blog.csdnimg.cn/20201201140131223.jpeg#pic_center
[20201201140206475.png_pic_center]: https://img-blog.csdnimg.cn/20201201140206475.png#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bnNpamlhMjE5ODM_size_16_color_FFFFFF_t_70_pic_center 4]: https://img-blog.csdnimg.cn/20201201140232926.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bnNpamlhMjE5ODM=,size_16,color_FFFFFF,t_70#pic_center