支付宝小程序使用web_view tp3.2 框架下搭建小程序

浏览:276 发布日期:2018/07/07 分类:功能实现 关键字: 支付宝小程序 支付 获取用户信息 验签 回调 web_view 外部h5
支付宝小程序 web_view tp3.2 功能实现 接入支付 获取用户信息
1、下载蚂蚁开发者工具(IDE)https://docs.alipay.com/mini/ide/download
创建一个空白项目,在app.json中引入相关的页面,我这边如下: 
"pages": [
    "pages/add-todo/add-todo",
    "pages/todos/todos",
    "pages/get-info/get-info",
    "pages/pay/pay" 
  ],
接下来在add-todo文件夹下的add-todo.axml中<view class="page">
  <web-view src="你的url" onMessage="onmessage"></web-view>
</view>
注意:所填url必须是https的
2、以上已完成跳转你的外链网站;接下来我们通过用户授权获取用户的公开信息(获取用户信息我们必须跳回小程序拿authCode 去获取用户信息);想要跳回小程序 ,在你的html页面中head 中 引入<script src="https://appx/web-view.min.js"></script>
同时编写方法  
<script>
        function navigateTo() {
            my.navigateTo({
                url: '/pages/get-info/get-info',
                success: function (res) {
                     // window.alert('操作结果' + JSON.stringify(res));
                }
            })
        }

   </script>
在相应的按钮加入点击事件 onclick="navigateTo()" (根据自己的需求)
根据上面我们跳回的是get-info
在get-info.js中const app = getApp();

Page({
  data: {
    inputValue: '',
  },
  onLoad() {
    my.getAuthCode({
      scopes: 'auth_user',
      success:  function(res) {
        var authcode=res.authCode
        my.httpRequest({
          url: 'https://处理用户信息地址?auth_code='+authcode,
          method: 'POST',
          data: {},
          dataType: 'json',
          success: function(res) {
                var url="https://你想要的跳转地址/"
                my.navigateTo({
                url: '/pages/todos/todos?url='+url
              })
          },
          fail: function(res) {
            var url="https://你想要的跳转地址/"
                my.navigateTo({
                url: '/pages/todos/todos?url='+url
              })
          }
        })
      },
      fail:function() {
        var url="https://你想要的跳转地址/"
                my.navigateTo({
                url: '/pages/todos/todos?url='+url
        })
      },
    });
  },
  add() {
    app.todos = app.todos.concat([{
      text: this.data.inputValue,
      compeleted: false,
    }]);

    my.navigateBack();
  },
});
接下来处理用户信息(下载支付宝官方服务器端SDK 里面有所有接口方法https://docs.open.alipay.com/54/103419/下载后放入vendor中appalipay文件夹下)    public function getuserinfo(){
        $code = I('get.auth_code');
        //APPID
        $appid = '小程序appid';
        //私钥  文件名(rsa_private_key.pem)
        $rsaPrivateKey = "";
        //公钥  文件名 (rsa_public_key.pem)
        $alipayrsaPublicKey = "";
        //初始化
        $aop = new \AopClient();
        $aop->gatewayUrl = 'https://openapi.alipay.com/gateway.do';
        $aop->appId = $appid;
        $aop->rsaPrivateKey = $rsaPrivateKey;
        $aop->format = 'json';
        $aop->charset = 'UTF-8';
        $aop->signType = 'RSA2';
        $aop->alipayrsaPublicKey = $alipayrsaPublicKey;
        $aop->apiVersion = '1.0';
        $request = new \AlipaySystemOauthTokenRequest();
        $request->setGrantType("authorization_code");
        $request->setCode($code);

        $result = $aop->execute($request);
        $responseNode = str_replace(".", "_", $request->getApiMethodName()) . "_response";
        $resultData = (array) $result->$responseNode;
        //获取用户信息
        $request = new \AlipayUserInfoShareRequest ();
        $result = $aop->execute ( $request , $resultData['access_token'] );
        $responseNode = str_replace(".", "_", $request->getApiMethodName()) . "_response";
        $userData = (array) $result->$responseNode;
        //var_dump($userData);//用户公开信息


        //此处做用户信息的落库处理


        echo json_encode($str);//必须给小程序返回值否则无法执行成功失败方法
    }
3、接入支付(支付宝小程序支付使用的是支付宝app支付)
同样的支付需要跳转回小程序内进行支付原理和第二步相同 在处理相应要吊起支付的html文件中引入<script src="https://appx/web-view.min.js"></script>同样编写方法    <script>

        function navigateTo() {
            my.navigateTo({
                url: '/pages/pay/pay',
                success: function (res) {
                     // window.alert('操作结果' + JSON.stringify(res));
                }
            })
        }


   </script>
此次跳转的方法是pay
在pay.js中const app = getApp();

Page({
  data: {},
  onLoad() {
    my.httpRequest({
      url: 'https://从服务器端获取支付所需数据的接口地址',
      method: 'POST',
      data: {},
      dataType: 'json',
      success: function(res) {
        var ali=res.data.data;
        my.tradePay({
          orderStr: ali, //完整的支付参数拼接成的字符串,从服务端获取,具体是方法请参考小程序开发文档
          success: (res) => {
            if(res.resultCode==9000){
              var url="https://支付成功跳转地址"
              my.navigateTo({
                url: '/pages/todos/todos?url='+url
              })
            }else{
              var url="https://支付失败跳转地址"
              my.navigateTo({
                url: '/pages/todos/todos?url='+url
              })
            }
          },
          fail: (res) => {
            console.log(res)
            var url="https://吊起支付失败跳转地址"
            my.navigateTo({
                url: '/pages/todos/todos?url='+url
            })
          },
        });
      }, 
      fail: function(res) {
        console.log(res)
        my.alert({content: JSON.stringify(res)});
      }
    });


  },
  onShow() {
     
  },
  addTodo() {
    
  },
});
服务器组装小程序支付所需数据接口    public function sign(){
        vendor('appalipay.AopSdk');// 加载类库
        $config = array(
            'appid' =>'小程序appid',//商户密钥
            'rsaPrivateKey' =>'',//私钥
            'alipayrsaPublicKey'=>'',//公钥
            'charset'=>strtolower('utf-8'),//编码
            'notify_url' =>'回调验签地址',//回调地址(支付宝支付成功后回调修改订单状态的地址)
            'payment_type' =>1,//(固定值)
            'seller_id' =>'支付宝账号',//收款商家账号
            'charset'    => 'utf-8',//编码
            'sign_type' => 'RSA2',//签名方式
            'timestamp' =>date("Y-m-d H:i:s"),
            'version'   =>"1.0",//固定值
            'url'       => 'https://openapi.alipay.com/gateway.do',//固定值
            'method'    => 'alipay.trade.app.pay',//固定值
        );

        //构造业务请求参数的集合(订单信息)
        $body = '自己业务定义';
        $title = '自己业务定义';
        $price = 0.01;//测试数据1分
        $content = array();
        $content['body'] = $body;
        $content['subject'] = $title;//商品的标题/交易标题/订单标题/订单关键字等
        $content['out_trade_no'] = 自己组装的订单号;//商户网站唯一订单号
        $content['timeout_express'] = '1d';//该笔订单允许的最晚付款时间
        $content['total_amount'] = floatval($price);//订单总金额(必须定义成浮点型)
        $content['seller_id'] = '支付宝账号';//收款人账号
        $content['product_code'] = 'QUICK_MSECURITY_PAY';//销售产品码,商家和支付宝签约的产品码,为固定值QUICK_MSECURITY_PAY
        $content['store_id'] = '001';//商户门店编号
        $con = json_encode($content);//$content是biz_content的值,将之转化成字符串
        //公共参数
        $param = array();
        $Client = new \AopClient();//实例化支付宝sdk里面的AopClient类,下单时需要的操作,都在这个类里面
        $param['app_id'] = $config['appid'];//支付宝分配给开发者的应用ID
        $param['method'] = $config['method'];//接口名称
        $param['charset'] = $config['charset'];//请求使用的编码格式
        $param['sign_type'] = $config['sign_type'];//商户生成签名字符串所使用的签名算法类型
        $param['timestamp'] = $config['timestamp'];//发送请求的时间
        $param['version'] = $config['version'];//调用的接口版本,固定为:1.0
        $param['notify_url'] = $config['notify_url'];//支付宝服务器主动通知地址
        $param['biz_content'] = $con;//业务请求参数的集合,长度不限,json格式

        //生成签名
        $paramStr = $Client->getSignContent($param);
        $sign = $Client->alonersaSign($paramStr,$config['rsaPrivateKey'],'RSA2');
        $param['sign'] = $sign;
        $str['data'] = $Client->getSignContentUrlencode($param);
        echo json_encode($str);

    }
4、注:小程序中使用todos作用跳转地址的中转
在todos.axml中加入<view class="page">
  <web-view src="{{url}}" onMessage="onmessage"></web-view>
</view>
在todos.js中加入const app = getApp();

Page({
  data: {
    url:""
  },
  onLoad(option) {
    var that=this;
    console.log(option)
    var url=option.url;
    this.setData({ url: url });
  },
  onShow() {
  },
});
5、最后是支付宝的回调验签并处理业务逻辑    public function validate(){
        require_once './ThinkPHP/Library/Vendor/appalipay/aop/AopClient.php';
        require_once './ThinkPHP/Library/Vendor/appalipay/aop/request/AlipayTradeAppPayRequest.php';
        $aop = new \AopClient();
        $aop->alipayrsaPublicKey = '';//支付宝公钥
        $flag = $aop->rsaCheckV1($_POST, NULL, "RSA2");
        //实际返回参数参考https://docs.open.alipay.com/204/105301/
        if($flag){
            //此处处理业务逻辑
            echo "success";//一定要返回success否则支付宝后台会一直相应此地址
            }
        }
    }
注:
支付宝开放平台配置要将你的业务域名添加进白名单 登录支付宝开服平台 -> 开发者中心 -> 小程序 -> 设置 -> httpRequest接口请求域名白名单 & H5域名配置 都要添加上
有什么不明白可详细阅读官方文档或私信我
评论( 相关
后面还有条评论,点击查看>>