uniapp支付之微信支付

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了uniapp支付之微信支付相关的知识,希望对你有一定的参考价值。

参考技术A 本文内容是指的uni-app项目的支付,文档中5+ APP的项目类型不涉及。
虽然uni-app已经为我们封装好了一个统一的API,所以在uni-app中我们只需要调用uni.requestPayment即可。但是uni-app官方文档的散乱看起来也挺头疼的。这里我精简整个流程,并对自己开发时碰到问题做个总结。
需要注意的是,支付模块的开发不仅仅是需要客户端的开发,还需要服务端的开发。这里是在保证服务端的配置正确的前提下,对于前端uni-app的开发与配置指南。

这里有必要说明一下,申请微信支付流程对于初次申请者会感觉有些混乱,如果不理清相应关系可能会在各种平台找来找去。

对于APP,要在微信开放平台( https://open.weixin.qq.com )注册申请账号。注这里公司使用需300元认证费。在应用详情中申请开通微信支付功能。

当审核都通过了,就可以获取到应用ID(APPID,即类似于个人ID一样,唯一标识)
有了以上基础,申请微信商户平台( https://pay.weixin.qq.com ),注册申请账号。之后只需关联AppID,即可。

无需配置,只需保证微信小程序配置即可。

在manifest.json文件“App模块配置”项的“Payment(支付)”下,勾选“微信支付”项

调用 [uni.requestPayment(OBJECT)]发起支付,OBJECT参数中provider属性值固定为 wxpay 、

这里 的timeStamp, nonceStr, package, signType, paySign是由后端与微信交互生成的,值得注意的是package,微信直传过来的值是packageValue。

这里是orderInfo,该属性值为订单对象。依然值得注意的是package,微信直传过来的值是packageValue。
partnerid,微信传过来的是partnerId。
prepayid,微信传过来是prepayId。
noncestr,微信传过来的是nonceStr。
timestamp,微信传过来的是timeStamp。
这里一定一定要注意大小写,不然订单请求失败,让你找问题,找到痛不欲生。

至此,微信小程序已经可以正常支付了。而APP则需要打包才可以。uni-app有两种打包方式,一个是提交云端打包,一个是本地离线打包。这里说下离线打包的相关配置和问题。

关于离线打包我会单独出一篇,这里不在讲解。只进行微信支付相关配置讲解。
在uni-app官方提供的App离线SDK中有一个打包工程,如果想使用微信支付,就需要添加相应的依赖库以及资源,这点我就很怀念cocopods,方便太多了。

注意:SDK 中的

1.在URL Types 中添加配置: identifier 填写 weixin ,URL Schemes 填写 wx[后面是您在微信平台申请的appkey] ,如果没有该项按照图中的格式创建。注意 wx 这两个字母必须添加。

thinkphp整合系列之微信公众号支付

thinkphp整合系列之微信公众号支付

公众号支付是指在微信app中访问的页面通过js直接调起微信支付;
因此页面必须是在微信中打开的;
示例项目:https://github.com/baijunyao/thinkphp-bjyadmin
一:设置域名
登录微信公众平台;
微信支付中设置支付授权目录;把域名改为自己的;
注意最后是有一个斜线的 / 
技术分享图片
设置授权域名;
技术分享图片
二:导入sdk
/ThinkPHP/Library/Vendor/Weixinpay
好吧;还是没忍住要吐槽;鹅厂的sdk那酸爽谁用谁知道;项目中的sdk是我根据官方文档重构精简打造而成的;
需要注意的是170行处的商品数据需要根据业务实际情况从数据库中获取;

$openid=$result[‘openid‘];
// 订单数据  请根据订单号out_trade_no 从数据库中查出实际的body、total_fee、out_trade_no、product_id
$order=array(
    ‘body‘=>‘test‘,// 商品描述(需要根据自己的业务修改)
    ‘total_fee‘=>1,// 订单金额  以(分)为单位(需要根据自己的业务修改)
    ‘out_trade_no‘=>$out_trade_no,// 订单号(需要根据自己的业务修改)
    ‘product_id‘=>‘1‘,// 商品id(需要根据自己的业务修改)
    ‘trade_type‘=>‘JSAPI‘,// JSAPI公众号支付
    ‘openid‘=>$openid// 获取到的openid
);
PHP

三:配置项
/Application/Common/Conf/config.php

‘WEIXINPAY_CONFIG‘       => array(
    ‘APPID‘              => ‘‘, // 微信支付APPID
    ‘MCHID‘              => ‘‘, // 微信支付MCHID 商户收款账号
    ‘KEY‘                => ‘‘, // 微信支付KEY
    ‘APPSECRET‘          => ‘‘, // 公众帐号secert (公众号支付专用)
    ‘NOTIFY_URL‘         => ‘http://baijunyao.com/Api/Weixinpay/notify‘, // 接收支付状态的连接
    ),
PHP

在微信公众平台和微信支付平台凑齐上面这些参数;
四:支付方法
/Application/Api/Controller/WeixinpayController.class.php

/**
 * 公众号支付 必须以get形式传递 out_trade_no 参数
 * 示例请看 /Application/Home/Controller/IndexController.class.php
 * 中的wexinpay_js方法
 */
public function pay(){
    // 导入微信支付sdk
    Vendor(‘Weixinpay.Weixinpay‘);
    $wxpay=new \Weixinpay();
    // 获取jssdk需要用到的数据
    $data=$wxpay->getParameters();
    // 将数据分配到前台页面
    $assign=array(
        ‘data‘=>json_encode($data)
        );
    $this->assign($assign);
    $this->display();
}
PHP

需要html的配合:/tpl/Api/Weixinpay/pay.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body style="text-align: center;">
<button onclick="getOrder()">购买</button>

<jquery />
<script>
function onBridgeReady(){
    var data={$data};
    WeixinJSBridge.invoke(
        ‘getBrandWCPayRequest‘, data,
        function(res){
            if(res.err_msg == "get_brand_wcpay_request:ok" ) {
                // 使用以上方式判断前端返回,微信团队郑重提示:res.err_msg将在用户支付成功后返回    ok,但并不保证它绝对可靠。
            }else{
                alert(res.err_code+res.err_desc+res.err_msg); // 显示错误信息
            }
        }
    );
}
 if (typeof WeixinJSBridge == "undefined"){
     if( document.addEventListener ){
         document.addEventListener(‘WeixinJSBridgeReady‘, onBridgeReady, false);
     }else if (document.attachEvent){
         document.attachEvent(‘WeixinJSBridgeReady‘, onBridgeReady);
         document.attachEvent(‘onWeixinJSBridgeReady‘, onBridgeReady);
     }
 }else{
      onBridgeReady();
 }
</script>
</body>
</html>
HTML

调用示例:/Application/Home/Controller/IndexController.class.php 中的wexinpay_js方法

/**
 * 微信 公众号jssdk支付
 */
public function wexinpay_js(){
    // 此处根据实际业务情况生成订单 然后拿着订单去支付
    // 用时间戳虚拟一个订单号  (请根据实际业务更改)
    $out_trade_no=time();
    // 组合url
    $url=U(‘Api/Weixinpay/pay‘,array(‘out_trade_no‘=>$out_trade_no));
    // 前往支付
    redirect($url);
}
PHP

五:异步接收通知
/Application/Api/Controller/WeixinpayController.class.php

/**
 * notify_url接收页面
 */
public function notify(){
    // 导入微信支付sdk
    Vendor(‘Weixinpay.Weixinpay‘);
    $wxpay=new \Weixinpay();
    $result=$wxpay->notify();
    if ($result) {
        // 验证成功 修改数据库的订单状态等 $result[‘out_trade_no‘]为订单id

    }
}
PHP

//*********************************增加curl_get_contents函数的分割线****************************
如果是整合到自己的项目中;则需要在自己的公共函数中增加curl_get_contents;
/Application/Common/Common/function.php

/**
 * 使用curl获取远程数据
 * @param  string $url url连接
 * @return string      获取到的数据
 */
function curl_get_contents($url){
    $ch=curl_init();
    curl_setopt($ch, CURLOPT_URL, $url);                //设置访问的url地址
    // curl_setopt($ch,CURLOPT_HEADER,1);               //是否显示头部信息
    curl_setopt($ch, CURLOPT_TIMEOUT, 5);               //设置超时
    curl_setopt($ch, CURLOPT_USERAGENT, $_SERVER[‘HTTP_USER_AGENT‘]);   //用户访问代理 User-Agent
    curl_setopt($ch, CURLOPT_REFERER,$_SERVER[‘HTTP_HOST‘]);        //设置 referer
    curl_setopt($ch,CURLOPT_FOLLOWLOCATION,1);          //跟踪301
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);        //返回结果
    $r=curl_exec($ch);
    curl_close($ch);
    return $r;
}
PHP

//*************************关于签名错误的补充*********************************
如果出现签名错误;
可以使用官方的 微信公众平台支付接口调试工具
跟自己生产的签名对比;
然后对比配置;查找不一致的地方;

//*****************关于不知道怎么查看异步发过来的数据的补充*****************
2016.10.28:
好多童鞋在问支付后;不知道怎么查看接收到的支付状态通知;
这里做个补充;首先;我们的服务器必须是外网可以正常访问到的;
必须注意不能有 登录或者权限之类的拦截;
另外补充一个简单的查看收到的内容的方法用于测试;
五:异步接收通知
/Application/Api/Controller/WeixinpayController.class.php

/**
 * notify_url接收页面
 */
public function notify(){
    // ↓↓↓下面的file_put_contents是用来简单查看异步发过来的数据 测试完可以删除;↓↓↓
    // 获取xml
    $xml=file_get_contents(‘php://input‘, ‘r‘);
    //转成php数组 禁止引用外部xml实体
    libxml_disable_entity_loader(true);
    $data= json_encode(simplexml_load_string($xml, ‘SimpleXMLElement‘, LIBXML_NOCDATA));
    file_put_contents(‘./notify.text‘, $data);
    // ↑↑↑上面的file_put_contents是用来简单查看异步发过来的数据 测试完可以删除;↑↑↑
    // 导入微信支付sdk
    Vendor(‘Weixinpay.Weixinpay‘);
    $wxpay=new \Weixinpay();
    $result=$wxpay->notify();
    if ($result) {
        // 验证成功 修改数据库的订单状态等 $result[‘out_trade_no‘]为订单id

    }
}
PHP

 































以上是关于uniapp支付之微信支付的主要内容,如果未能解决你的问题,请参考以下文章

支付开发填坑记之微信支付

第三方支付之微信支付(扫码支付)

iOS开发支付集成之微信支付

Wex5开发基础之微信支付

thinkphp整合系列之微信公众号支付

PHP对接第三方支付渠道之微信支付v3版本