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

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

   
   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});
                }
            });
    });