微信小程序支付，带java源码

先说下这个的背景吧。。。

本人是做java后端的，自认为还有很大的发展空间（嘻嘻，你懂的），看过一段时间的小程序可是没有支付成功。。。最近公司要做小程序项目，老大让我看下小程序，折腾了好几天，参照着https://blog.csdn.net/zhourenfei17/article/details/77765585 这篇博客，终于弄出来了。。。。。。。

虽然，效率还有很大提升空间，但是还是在这里做下记录，希望能后来，的人能有些参考。

上面链接的博文是有java代码的（其实原文中也有小程序端代码），我这里只贴一下小程序端的代码吧。

// pages/pay/pay.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

    wx.login({
      success: function (res) {

        var service_url = 'https://04f19bb6.ngrok.io/pay/weixin/login?code=' + res.code;//需要将服务器域名添加到小程序的request合法域名中，而且必须是https开头  //这里的地址是我用ngrok 代理本机的地址（不知道ngrok 的同学可以百度下， 很简单）

        wx.request({
          url: service_url,
          data: {
            code: res.code
          },
          method: 'GET',
          success: function (res) {
            console.log(res);
            if (res.data != null && res.data != undefined && res.data != '') {
              wx.setStorageSync("openid", res.data.openid);//将获取的openid存到缓存中
            }
            var openid = res.data.openid;

            var that = this;
             wx.request({
               url: 'https://04f19bb6.ngrok.io/pay/weixin/wxpay?openid=' + openid ,
              data: {

               },
                 method: 'GET',
                  success: function (res) {
                 console.log(res);
                 console.log(res.data.data.packge)

                      //小程序发起微信支付
                      wx.requestPayment({
                        timeStamp: res.data.data.timeStamp,//记住，这边的timeStamp一定要是字符串类型的，不然会报错，我这边在java后端包装成了字符串类型了
                        nonceStr: res.data.data.nonceStr,
                        package: res.data.data.package,
                        signType: 'MD5',
                        paySign: res.data.data.paySign,
                        success: function (event) {
                          // success
                          console.log(event);

                          wx.showToast({
                            title: '支付成功',
                            icon: 'success',
                            duration: 2000
                          });
                        },
                        fail: function (error) {
                          // fail
                          console.log("支付失败")
                          console.log(error)
                        },
                        complete: function () {
                          // complete
                          console.log("pay complete")
                        }
                      });

               }
             });
          }
        });

      }
    });
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },

})

　　小程序端的代码我略微做出了写改正就是，把 博主原来的

doWxPay(res.data)这个函数直接写在的 onload（）函数中。

 其他需要注意的地方就是，小程序我新建了一个pay 的page，在app.json中把它放在了最上面，所以可以直接调用到该方法。。

  

 期间遇到的写bug：

  1 注意商户的支付秘钥和小程序的秘钥是不同的，注意在java代码中填写正确。

 2 其他的坑就是在返回参数的时候少写=   调用微信 支付借口失败，显示没有支付金额。。其实是

"prepay_id="  要带等号。