5ucms论坛

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 5567|回复: 0
打印 上一主题 下一主题

[开发教程] 微擎 js微信支付的应用讲解和实例代码

[复制链接]

670

主题

785

帖子

8243

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
8243
跳转到指定楼层
楼主
发表于 2017-5-29 18:57:48 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
js支付体验好,不需要跳转,直接在本页面内完成支付,但是微擎给的代码非常简单

首先需要配置支付信息,在这里不多说了,主要是微擎后台和商户里面,重点说开发.先说前端,对于我们没有加载微擎公共开头结尾,那就要自己加载一些必须的代码.

  1. <a href="javascript:void(0);" data-name="李白"  class="weui_btn weui_btn_plain_primary weui_btn_inline">支付</a>
  2. <?php
  3. $wx = $_W['account']['jssdkconfig'];
  4. $wx['url'] ='http://'.$_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'] ;
  5. ?>
  6. <script>
  7.     window.sysinfo = {"uniacid":{php echo $this->weid},"acid":{$_W['acid']}};

  8.     var appIdstr = "{$wx['appId']}";
  9.     var timestampstr = "{$wx['timestamp']}";
  10.     var nonceStrstr = "{$wx['nonceStr']}";
  11.     var signaturestr = "{$wx['signature']}";
  12. wx.config({
  13.     debug: false,
  14.     appId: appIdstr,
  15.     timestamp: timestampstr,
  16.     nonceStr: nonceStrstr,
  17.     signature: signaturestr,
  18.         jsApiList: [
  19.         'checkJsApi',
  20.         'onMenuShareTimeline',
  21.         'onMenuShareAppMessage','showMenuItems','hideOptionMenu','chooseWXPay',
  22.     ]
  23. });
  24. </script>
  25. <script type="text/javascript" src='http://res.wx.qq.com/open/js/jweixin-1.0.0.js'></script>
  26. <script src="{php echo $this->yobyurl}zepto.min.js"></script>
  27. <script type="text/javascript" src="{$_W['siteroot']}app/resource/js/lib/mui.min.js"></script>
  28. <script type="text/javascript" src="{$_W['siteroot']}app/resource/js/app/util.js"></script>
复制代码


  1. <script>
  2. $(function(){

  3. document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {

  4. $('.weui_btn').click(function(){
  5.         $.getJSON("{$ajaxurl}",{name:name}, function(data, status){
  6.         //这里传递参数到生成订单
  7.             if(status == 'success'){
  8.            
  9.                 util.pay({
  10.                     orderFee : data.fee,
  11.                     payMethod : 'wechat',
  12.                     orderTitle : '微信支付金额' + data.fee + '元',
  13.                     orderTid : data.ordertid,
  14.                     module : 'yoby_test',
  15.                     success : function(result) {//支付成功
  16.                     $.alert('支付成功');
  17.                    //可不写   
  18.                     },
  19.                     fail : function(result) {//支付失败
  20.                        $.alert('支付失败');
  21.                     },
  22.                     complete : function(result) {//无论成功失败
  23.                     //可不写
  24.                     }
  25.                 });
  26.             }
  27.         });
  28.       
  29.         });
  30. });
  31. });

  32. </script>
复制代码


js代码就上面这么多,当然实际开发中需要自己调整代码,接着需要在site.php里面重要两个方法,一个是生成订单,一个是成功支付后的业务处理.开发中是不能传递参数到支付后的,所以首先把需要参数保存到订单中,一般

  1. public function doMobilepay() {//生成订单 $ajaxurl就是指向这里的方法
  2. echo json_encode(array('fee'=>$n,'ordertid'=>$sn));//生成订单要返回一个json,一般包括金额和订单号即可,注意订单号需要唯一
  3. }

  4. public function payResult($params) {//支付成功处理,非常重要,你支付后业务处理要放到这里面
  5. if ($params['result'] == 'success' && $params['from'] == 'notify') {//里面放业务代码
  6. 需要注意,这里面$_W['openid']是获取不到的,用下面代码
  7. $uid = $params['tag']['uid'];
  8. $openid = $params['user'];
  9. $weid = $params['uniacid'];
  10. $tid=$params['tid'];//这就是生成的唯一订单号
  11. $fee = $params['fee'];//金额
  12. 然后到订单表查询这个订单的信息包括传递的参数

  13. }

  14. }
复制代码


到此支付开发就完成了,送一个生成订单函数

游客,如果您要查看本帖隐藏内容请回复


支付涉及钱的处理,所以要经过多重测试,可以用0.01元来测试,确认没问题再正式上线,有条件可以公测.开发中订单表至少包含金额,订单号,openid,weid以及传递的参数字段.
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|5ucms.com

GMT+8, 2024-5-2 23:24 , Processed in 0.203125 second(s), 29 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表