1. 官方微信支付文档 https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_1

2. 下载php版本demo
   
   3.后端具体调用代码如下：

   

   宿豫网站制作公司哪家好，找成都创新互联！从网页设计、网站建设、微信开发、APP开发、成都响应式网站建设公司等网站项目制作，到程序开发，运营维护。成都创新互联成立与2013年到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选成都创新互联。
   

   
   GetOpenid();
       $config = new \WxPayConfig();
       $input = new \WxPayUnifiedOrder();
       $input->SetBody($goods);     //商品名称
       $input->SetAttach($attach);     //附加参数,可填可不填,填写的话,里边字符串不能出现空格
       $input->SetOut_trade_no($order_sn);   //订单号
       $input->SetTotal_fee($total_fee * 100);   //支付金额,单位:分
       $input->SetTime_start(date("YmdHis"));  //支付发起时间
       $input->SetTime_expire(date("YmdHis", time() + 600));//支付超时
       $input->SetGoods_tag("test3");
       //$input->SetNotify_url("http://".$_SERVER['HTTP_HOST']."/payment.php"); //支付回调验证地址
       $input->SetNotify_url("http://".$_SERVER['HTTP_HOST']."/web/payment/notify/WeixinPay/notify");
       $input->SetTrade_type("JSAPI");    //支付类型
       $input->SetOpenid($openId);     //用户openID
       $order = \WxPayApi::unifiedOrder($config,$input); //统一下单
       // dump($order);exit;
       $jsApiParameters = $tools->GetJsApiParameters($order);
       return $jsApiParameters;
   }

}

    $pay = new \app\common\library\Pay();
    $res = $pay->wxpay($this->openid,'开通会员',$order['order_no'],$order['money']);

4.前端js核心代码如下：

    function jsApiCall(data,id)
    {
        data = JSON.parse(data);
        WeixinJSBridge.invoke(
        'getBrandWCPayRequest', data,
            function(res){
                WeixinJSBridge.log(res.err_msg);
                if(res.err_msg == "get_brand_wcpay_request:ok"){
                    layer.msg('支付成功', {time: 2500}, function () {
                        location.href = "{:url('xxx/xxx')}";
                    });
                }else if(res.err_msg == "get_brand_wcpay_request:cancel"){
                    layer.msg("支付取消！", {time: 1800});
                }else{
                    layer.msg("支付失败！", {time: 1800});
                }
            }
        );
    }
    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();
        }
    }
    $('.see_price').click(function() {
        index = layer.load(1, {shade: [0.1,'#fff'] });
        var $id = $(this).attr('name');
        $.ajax({
                type: 'post', //可选get
                url: '{:url("xxx/xxx")}', //这里是接收数据的PHP程序
                data: 'id='+$id, //传给PHP的数据，多个参数用&连接
                dataType: 'Json', //服务器返回的数据类型 可选XML ,Json jsonp script html text等
                success: function(msg) {
                    if (msg.code == '200') {
                        layer.close(index);
                        jsApiCall(msg.info);
                    } else {
                        layer.close(index);
                        layer.msg(msg.message, {time: 1800});
                    }
                },
                error: function() {
                    layer.close(index);
                    layer.msg("提交失败！", {time: 1800});
                }
            });
    });

另外有需要云服务器可以了解下创新互联cdcxhl.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

网站题目：Thinkphp微信公众号JSAPI支付，微信支付简易实例-创新互联
URL分享：http://chengdu.cdxwcx.cn/article/desgdd.html