🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
## 微信支付 ### 使用场景 在插件开发过程中,微信支付是使用比较频繁的功能。利用豆信封装的方法,可以快速的在h5页面实现微信支付功能。 ### 实现过程 1、在框架后台支付配置处填写公众号商户平台信息。 ![](https://box.kancloud.cn/2016-08-12_57ad611a02b83.png) 2、在微信公众号后台支付配置处填写支付授权目录。 ![](https://box.kancloud.cn/2016-08-12_57ad611a1c2b7.png) 3、在需要调用公众号支付的页面注册JSSDK。 ~~~ <html> <head> <title>微信支付</title> {:hook('jssdk', true)} </head> <body> ... </body> </html> ~~~ 4、选定一个用于调起微信支付的DOM元素。 ~~~ <a href="javascript:;" class="weui_btn weui_btn_plain_primary" id="donate">我要捐赠</a> ~~~ 5、为微信支付触发元素绑定事件,并获取业务逻辑需要用到的数据。 ~~~ <script> $(document).on('click', '#donate', function() { var price = $('input[name=money]'); var content = $('textarea[name=content]'); var is_anonymous = $('input[name=is_anonymous]'); if (!price.val()) { alert('请填写你要捐赠的金额'); price.focus(); return false; } var reg = new RegExp('^[0-9]+(\.[0-9]{2})?$'); if (!reg.test(price.val())) { alert('请正确填写你要捐赠的金额,整数或者包含两位小数的浮点数'); price.focus(); return false; } var data = { price : price.val(), is_anonymous : is_anonymous.val(), content : content.val() }; pre_donate(data); }); </script> ~~~ 6、在上一步骤中,获取到了业务逻辑需要用到的数据,并调用pre_donate()方法将数据写入数据库,此demo演示的为预捐赠过程。在电商功能中常用的是预支付功能,即把订单信息预先写入订单表,并设置订单的支付状态为0,稍后调起微信支付,用户支付成功后把支付成功的数据异步发送到一个处理方法,并设置订单的支付状态为1,业务完成。 ~~~ /** * 预捐赠(支付前写入捐赠数据) * @author 艾逗笔<765532665@qq.com> */ function pre_donate(data) { $.ajax({ url : "{:create_addon_url('pre_donate')}", type : 'post', dataType : 'json', data : data, success : function(res) { if (res.errcode == 1) { var price = res.money; var orderid = res.orderid; var notify = res.notify; pay(price, orderid, notify, res, pay_ok); // 发起支付 } else { alert(res.errmsg); } }, error : function() { alert('捐赠失败'); } }); } ~~~ >[info] pay()是豆信封装的调起微信支付的方法,只要按照`pay(price, orderid, notify, res, pay_ok)`的固定格式即可调起微信支付。其中price为支付的金额(单位:元)、orderid为自己定义的业务订单号、notify为支付完成后发送异步通知到并用来更新订单支付状态的地址、res为附加数据(例如发起支付前填写的备注信息、留言内容等)、pay_ok为异步处理支付成功推送消息后进行前端响应的方法。pay()方法所需的参数均在请求的`url : "{:create_addon_url('pre_donate')}"`中进行设置。 7、上一步提到需要用一个控制器方法来对数据进行支付前的处理。可以按照这种方式进行处理并返回调起支付所需的参数。 ~~~ /** * 预捐赠 * @author 艾逗笔<765532665@qq.com> */ public function pre_donate() { $data['mpid'] = get_mpid(); $data['openid'] = get_openid(); $data['money'] = floatval(I('price')); $data['is_anonymous'] = intval(I('is_anonymous')); $data['pay_status'] = 0; $data['create_time'] = time(); $data['content'] = I('content'); $data['is_show'] = 0; $data['orderid'] = $data['mpid'] . time() . rand(100,999); $res = M('idou_donate_list')->add($data); if (!$res) { $data['errcode'] = 0; $data['errmsg'] = '捐赠失败'; } else { $data['errcode'] = 1; $data['errmsg'] = '捐赠成功'; $data['notify'] = create_addon_url('pay_ok'); $data['jump_url'] = create_addon_url('pay_ok'); } $this->ajaxReturn($data); } ~~~ >[info] 此步骤的关键是把数据写入到数据表并设置pay_status=0,处理完数据后返回notify=create_addon_url('pay_ok'),即接受支付成功异步通知的地址为同一控制器中的pay_ok方法。 8、完成前面所有步骤之后,用户端能够成功调起微信支付框。用户输入支付密码完成微信支付后,微信支付结果会异步发送到notify指定地址,即控制器中的pay_ok方法。支付完成后也会同步调用pay()方法最后一个参数指定的js方法,即调起微信支付的html页面中的js方法pay_ok。 9、异步处理(控制器方法) ~~~ /** * 支付成功 * @author 艾逗笔<765532665@qq.com> */ public function pay_ok() { if (I('out_trade_no')) { $orderid = I('out_trade_no'); $mchid = I('mch_id'); $payStatus = M('mp_payment')->where([ 'mchid' => $mchid, 'orderid' => $orderid ])->getField('status'); if ($payStatus == 1) { $data['pay_status'] = 1; $data['is_show'] = 1; M('idou_donate_list')->where(['orderid'=>$orderid])->save($data); } } $this->display(); } ~~~ >[info] 此步骤的关键是接受微信支付结果的异步通知,如果支付结果是SUCCESS,则把先前创建的订单的支付状态设置为1。 10、同步处理(视图中的js方法) ~~~ /** * 支付成功后的回调函数 * @author 艾逗笔<765532665@qq.com> */ function pay_ok(data) { if (data.errcode == 1) { window.location.href = data.jump_url; } } ~~~ >[warning] 以上即为在插件中使用豆信封装的业务逻辑调起微信支付的全过程。理解起来可能有点困难,可以参考微捐赠插件实现的微信支付功能来加深对此文档的理解。 支付完成后,可以在框架后台>微信支付>支付记录页面插件支付记录 ![](https://box.kancloud.cn/2016-08-12_57ad611a34f7d.png)