微信小程序之重难点——微信支付详解

关注小编微信公众号公众号【前端基础教程从0开始】回复“1”，拉你进程序员技术讨论群，群内有大神，可以免费提供问题解答。公众号回复“小程序”，领取300个优秀的小程序开源代码+一套入门教程。公众号回复“领取资源”，领取300G前端，Java，产品经理，微信小程序，Python等资源合集大放送，让我们一起学前端。

学习微信小程序已经有段时间了，终于接触到小程序中一个很重要的功能——微信支付。接下来就给大家详细讲解一下微信支付功能的调用。

一想到微信支付，大家一定会去看微信小程序的API文档，没错，作为一个菜鸟我也看过，当然我第一次看的时候脑袋也有点晕，因为其中所需要的参数有点多，而且很多东西我们都不知道怎样去获得。没关系，下面我一步一步给各位讲解，怎么去实现微信支付这一功能的调用。

首先大家需要去下载一个公众号支付的sdk，下面是网址：
https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=11_1
我们的服务器后台选用的是php，所以我下载的是php的sdk。

话不多说，接下来开始我们的正题。我们下载完sdk以后会发现这就是一个支付的demo，微信团队已经把所有的代码帮我们写好了，但是请注意，这是公众号支付的demo，因此我们需要修改一下其中的部分内容。

1.首先我们打开WxpayAPI_php_v3.0.1目录下的cert目录，我们可以看到cert目录放的就是我们的证书文件，我们需要把原有的证书文件删除，替换成我们微信商户平台中的证书文件。所谓证书文件，就是当你注册成功一个微信商户号后，在“账户中心—API安全”下我们可以下载我们的证书，微信团队需要在支付时确认商家身份，所以需要这一环节，如下图。

2.配置完证书以后，我们就该配置我们的小程序信息和商家信息了。在文件夹lib目录下的WxPay.Config.php文件中，我们可以看到一些参数的信息，因此我们需要把它修改成我们自己的信息。如下图。

3.修改example目录下的WxPay.JsApiPay.php文件。如下图。

途中参数code指的是获取到的用户的code，但是在开发文档中code变量为js_code，因此我们需要将202行中的code->js_code。还有第205行，我们需要的接口应该为wx.login中的接口，因为我们需要把这些参数传上去，因此修改后的代码为下图。

3.在example目录下的jsapi.php文件中，我们可以修改以下信息。

其中的参数信息我们可以在微信文档中了解，部分的参数我们无需修改，大家想了解参数可以进入下面链接。

https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=9_1

最后29行是我手动加上去的，给我们的前台返回统一下单的这些参数，以便我们传递给微信支付API。然后我们还需要把这个文件中的H5代码注释掉或者删掉，因为小程序不会显示这些代码。注释掉下图中的全部H5代码

当我们做完以上几步以后，我们就可以开始我们的微信小程序的开发了。首先我们创建一个项目，添加我们的APPID。

首先在app.js中我们需要调用wx.login方法来获取用户的code

//app.js
App({
  code: null,
  onLaunch: function () {
    var that=this;
    wx.login({
      success: function (res) {
        if (res.code) {
          that.code=res.code;
        } else {
          console.log('获取用户登录态失败！' + res.errMsg)
        }
      }
    });
  },
})

然后我们创建一个page，命名为pay，我们在pay.wxml中创建一个按钮，并且给它绑定事件，我们希望点击按钮实现支付功能。

发起支付

接下来是pay.js代码

// pages/pay/pay.js
var app=getApp();
Page({
  wxpay: function(){
    var code=app.code;
    wx.request({
      //我把文件夹名改为了wxpayapi,SERVER_PATH为服务器的域名
      url: SERVER_PATH+'wxpayapi/example/jsapi.php', 
      data: {
        code: code
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success: function (res) {
        console.log(res.data);
        var data=res.data;
        wx.requestPayment({
          'timeStamp': data.timeStamp,
          'nonceStr': data.nonceStr,
          'package': data.package,
          'signType': 'MD5',
          'paySign': data.paySign,
          'success': function (res) {
            console.log("支付成功！")
          },
          'fail': function (res) {
          }
        })
      }
    })
  }
})

当我们获取到code后就把code发送给jsapi.php文件，然后我们把结果给log出来，我们可以看到我们统一下单api给我们返回的参数，而这些参数正是wx.requestPayment所需要的参数，因此我们直接传给wx.requestPayment方法，然后就可以支付了。

接下来还有一个很重要的环节，就是我在调用微信支付功能的工程中所遇到的一些bug，可能有些人也会遇到同样的问题，于是我就给大家说明一下。

1.发送请求失败。我们调用wx.request给服务器发送请求的时候必须在微信小程序的后台给我们的服务器域名设置白名单。在“设置->开发设置”。

需要注意的一点是我们发起请求的是域名，而且是HTTPS的域名，因此如果请求的地址是IP或者是HTTP，编译器会报错。

Notice: “Undefined property: JsApiPay::$curl_timeout in 

C:\xampp\htdocs\www\curtain\public\WxPay414\WxPay.JsApiPay.php on line 100”

在此处改为30，指30s。
3.证书问题。

Fatal error: Uncaught WxPayException: curl出错，错误码:60 in 

C:\xampp\htdocs\www\curtain\public\WxPay414\lib\WxPay.Api.php:564 

Stack trace: 

解决方法：http://blog.csdn.net/qq_34755805/article/details/51221932

4
.Notice: Undefined index: access_token in C:\phpStudy\PHPTutorial\WWW\wxpayapi\example\WxPay.JsApiPay.php on line 156

解决方法，注释掉第156行。