ThinkPHP集成微信公众号JSAPI支付教程

准备工作

在进行代码集成前，请确保已拥有微信公众平台的AppID和商户号（MchID），并已在微信公众平台后台完成“JSAPI支付”权限配置，同时设置了正确的支付目录和授权域名。

第1步：导入微信支付SDK类库

目的： 将微信支付官方或第三方封装好的PHP类库整合到ThinkPHP的项目结构中。

1. 找到包含 Weixinpay 文件夹的源码包。
2. 将该文件夹复制到ThinkPHP项目的 ThinkPHP\Library\Vendor\ 目录下。

第2步：创建控制器与视图文件

目的： 建立后端业务逻辑入口与前端展示页面。

1. 控制器： 创建 WxJsAPIController.class.php 文件，将其放置于 Home\Controller\ 目录下。
2. 视图： 创建对应的视图文件夹 WxJsAPI，放置于 Home\View\ 目录下。

第3步：配置支付参数

目的： 统一修改公共路径配置，确保支付请求指向正确。

在项目配置中检查 Weixinpay 相关的路径设置，确保除了域名部分外，其他配置路径保持一致。重点关注以下参数配置：

• appid 与 mch_id：需确保填写正确。
• notify_url：设置异步通知地址，例如 $NOTIFY_URL="你的域名/index.php/Home/WxJsAPI/notify";

核心代码实现

第4步：编写控制层逻辑 (WxJsAPIController)

描述： 控制器主要负责用户授权获取OpenID、调用统一下单接口获取 prepay_id 以及处理异步通知。

以下是核心逻辑的代码结构说明：

<?php
namespace Home\Controller;
use Think\Controller;

class WxJsAPIController extends Controller{
  // 初始化加载微信支付Helper库
  public function _initialize(){
    vendor('Weixinpay.WxPayPubHelper');
  }  

  // 主要支付流程：授权 -> 下单 -> 调起支付
  public function jsApiCall() {
    $jsApi = new \JsApi_pub();
    
    // 1. 网页授权获取用户openid
    if (!isset($_GET['code'])) {
      $rUrl=urlencode(C('WxConfig.JS_API_CALL_URL').'/id/'.$_GET[id]);
      $url = $jsApi->createOauthUrlForCode($rUrl);
      Header("Location: $url");
    } else {
      $code = $_GET['code'];
      $jsApi->setCode($code);
      $openid = $jsApi->getOpenId();
    }

    // 2. 使用统一支付接口，获取prepay_id
    $unifiedOrder = new \UnifiedOrder_pub();
    $unifiedOrder->setParameter("openid",$openid);       // 用户标识
    $unifiedOrder->setParameter("body",'商品的名字');   // 商品描述
    $unifiedOrder->setParameter("out_trade_no",'123456789'); // 商户订单号（建议动态生成）
    $unifiedOrder->setParameter("total_fee",1*100);     // 总金额，单位分
    $unifiedOrder->setParameter("notify_url",$NOTIFY_URL);
    $unifiedOrder->setParameter("trade_type","JSAPI");
    
    $prepay_id = $unifiedOrder->getPrepayId();

    // 3. 使用jsapi调起支付
    $jsApi->setPrepayId($prepay_id);
    $jsApiParameters = $jsApi->getParameters();

    $this->assign('HOSTS','你的域名');
    $this->assign('jsApiParameters',$jsApiParameters);
    $this->display();
  }

  // 异步通知处理
  public function notify() {
    $notify = new \Notify_pub();
    $xml = $GLOBALS['HTTP_RAW_POST_DATA'];
    $notify->saveData($xml);

    // 验证签名
    if($notify->checkSign() == FALSE){
      $notify->setReturnParameter("return_code","FAIL");
    }else{
      $notify->setReturnParameter("return_code","SUCCESS");
    }
    $returnXml = $notify->returnXml();
    echo $returnXml;
    
    // 业务逻辑处理：根据 result_code 更新数据库订单状态
    if($notify->checkSign() == TRUE) {
      if ($notify->data["result_code"] == "SUCCESS") { 
        // TODO: 执行订单支付成功后的逻辑，如更新数据库
      }
    }
  }
}
?>

第5步：前端JSAPI调用实现

描述： 在 View 层创建 HTML 页面，通过 JavaScript 调用微信内置浏览器对象唤起支付窗口。

关键脚本如下：

<script type="text/javascript">
    function jsApiCall()
    {
      WeixinJSBridge.invoke(
        'getBrandWCPayRequest',
        <?php echo $jsApiParameters; ?>, // 后端传入的参数JSON字符串
        function(res){
          WeixinJSBridge.log(res.err_msg);
          if(res.err_msg == "get_brand_wcpay_request:ok"){
            // 支付成功后的逻辑
          }else{
            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>

页面上可添加一个按钮触发支付：

<button onclick="callpay()">立即购买</button>

完成判断与排错

• 完成判断： 用户点击购买后，能正常弹出微信密码输入框；支付成功后，控制台日志显示 get_brand_wcpay_request:ok 且数据库中订单状态被更新为已支付。
• 常见问题：
  • 支付签名错误： 检查 sign 生成规则，确保参数未遗漏且按字典序排列。
  • 授权无效： 确认配置的业务域名和 JS 接口安全域名无误。
  • 统一下单失败：