微信小程序——微信支付

时间 2019-11-20

标签微信程序支付繁體版

原文原文链接

这个讲起来也就比较麻烦一点，由于须要的不单单是我们代码上的技术，嘿嘿！php

先整理一下思路。若是想作微信支付：html

1.现有一个公司帐户（非我的帐户），而且实名认证过的。node

2.微信号必须开通微信支付功能。算法

3.开发者ID。json

4.小程序秘钥。小程序

5.开发者工具。嘿嘿！微信小程序

从如今开始说小程序的支付步骤（大概分三步）：api

1.获取微信帐号的openID微信

这个在app.js 会有系统注释，然你在那个位置书写对应的代码：网络

https://api.weixin.qq.com/sns/jscode2session

参数：
appid:'',//开发者id
secret:'',//小程序的秘钥
grant_type：'authorization_code',//固定
js_code:res.code //登陆接口返回的值

这个为获取 openid 的访问地址，不过不要急着写，由于他被微信小程序认定为，不可靠链接，因此仍是须要让本身家后台包装一下。再去访问

下面是代码：(openid就是在app.js中登陆成功代码内再次获取，通常存储在全局变量 globalData中)

 var url = this.globalData.hostIP + "大家家后台域名地址?";
          url += 'appid=' + '开发者id';
          url += '&secret=' + '秘钥';
          url += '&grant_type=' + 'authorization_code';
          url += '&js_code=' + res.code;
          wx.request({
            url: url,
            method: 'GET',
            header: { 'content-type': 'text/html;charset=UTF-8' },
            success: function (openIdRes) {
              console.info("登陆成功返回的openId：" + openIdRes.data.Obj.openid);
// 判断openId是否获取成功
              if (openIdRes.data.Obj.openid != null & openIdRes.data.Obj.openid != undefined) {
                // 有一点须要注意 询问用户 是否受权 那提示 是这API发出的
                wx.getUserInfo({
                  success: function (data) {
                    // 自定义操做
                    // 绑定数据，渲染页面
                    that.globalData.weChatUserInfo = data;
                  },
                  fail: function (failData) {
                    console.info("用户拒绝受权");
                  }
                });

              } else {
                console.info("获取用户openId失败");
              }

            },
            fail: function (error) {
              console.info("获取用户openId失败");
              console.info(error);
            }
          })

2.微信统一下单

这一步微信统一下单其实也是须要公司本身后台集成的，不过我们我的实验的话，能够直接写在js页面中，缘由就是他有一个参数 notify_url 顾名思义，就是通知地址也就是回调地址，嘿！

统一下单接口地址：https://api.mch.weixin.qq.com/pay/unifiedorder

而后他的参数就多了去了，而后下面的示例代码就是我们我的实验的了：（由于订单参数中时间要 20091225091010 的格式全部用的本身方法 formatTime2， 固然你也能够随便编一个嘿！）

ps:(而后，订单参数时间方法你能够用去找我微信小程序路过——新手不要错过哦！这个文章看看我介绍的时间格式如何修改方法 )

 //微信支付 统一下单  接口
  wx_pay: function (e) {

    var that = this;//获取当前 

    var nonce_str = Math.random().toString(36).substr(2, 15);//随机生成签证
    var time_start = util.formatTime2(new Date());//订单日期
    var time_expire = this.getoutTime();//订单结束日期  指定多长时间后 如今15天
    //拼接参数 
    var data = {
      appid: '开发者ID',
      mch_id: '商户号', //收费着帐号
      device_info: 'WEB',//默认这个
      nonce_str: nonce_str,
      sign: '',
      sign_type: 'MD5',
      body: '商品描述',
      detail: '商品详细',
      attach: '附加数据',
      out_trade_no: '本身后台的订单号',
      fee_type: 'CNY', 货币种类 人民币
      total_fee: '0.1',  总金额
      spbill_create_ip: '123.12.12.123',随便填一个
      time_start: time_start, 订单开始时间
      time_expire: time_expire, 订单结束时间
      goods_tag: 'WXG',默认这个
      notify_url: 'http://www.baidu.com',回调方法  随便写一个，不报错就行
      trade_type: 'JSAPI',默认这个
      limit_pay: 'no_credit',支付方式-不能使用信用卡
      openid: '前面获取的openid',
    };
    data['sign'] = this.GetSign(data);// 从新设置 签名 
    var xml = this.getXml(data);//json 转为xml

    //获取 用户 prepay_id
    wx.request({
      url: 'https://api.mch.weixin.qq.com/pay/unifiedorder',
      header: {
        "Content-Type": "application/XML"   看这里看这里
      },
      method: "POST",
      data: xml,
      complete: function (res) {

        //获取参数 id  获取的参数 为XML 类型 
        var xmlParser = new Parser.DOMParser();
        var doc = xmlParser.parseFromString(xml);
        var prepay_id = doc.getElementsByTagName("prepay_id")[0].firstChild.nodeValue;

if (res == null || res.data == null) {
          wx.showToast({
            title: '网络错误！',
            icon: 'loading',
            duration: 1500
          })
          return;
        }
      }
    })

  },

看到上面是否是感受参数很麻烦。嘿，有两个调用方法我放在下面哈！

  /**
  *  生成签名方法
  */
  GetSign: function (json) {
    var arrs = new Array();
    for (var key in json) {
      if (key != 'sign') {
        arrs.push(key + "=" + json[key] + "&");
      }
    }
    arrs = arrs.sort();
    var s = "";
    for (var item in arrs) {
      s += item;
    }
    s = s.substring(0, s.length - 1);

    s += "&key=这里填写本身的秘钥";
    s = utilMd5.hexMD5(s).toUpperCase();
    return s;
  },
  /**
   *  订单超时方法
  */
  getoutTime: function () {
    //订单结束日期
    var timestamp = Date.parse(new Date());
    timestamp = timestamp / 1000;
    var tomorrow_timetamp = timestamp + 15 * 60;
    var n_to = tomorrow_timetamp * 1000;
    var end_date = new Date(n_to);

    return util.formatTime2(new Date(end_date));
  },

这样就能够调试一下统一下单咯，试试是否能成功。

住一段最重要的就是签名他须要把全部参数不包括（sign）按照ASCII字典序排，而后组成 key=value的格式格式，不太小编的方法已经具有这个功能了，剩下的就是要 MD5 加密一下，

小程序自己也提供一个加密工具来对照一下（https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=4_3）

MD5加密的话我建议（https://www.cnblogs.com/chenxiaojun/p/7155236.html）直接拿陈小俊小哥哥的代码，在utils 文件夹下建立一个js

而后在统一下单界面引用实例化一下 var utilMd5 = require('../../utils/MD5加密文件名.js'); 就能够

3.获取支付（弹出支付界面）

而后就是我们最后一步微信支付咯！

ps:若是，提示你没有权限，那你必定是没有完成商户认证或者支付认真，毕竟须要300块本身实验到这一步就能够了。

人家微信小程序已经给我们封装好了这个方法：（https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_7&index=5 看一下官方api）

wx.requestPayment(OBJECT) 方法直接就能调用了

不过要看清楚咯！小程序调起支付数据签名字段列表不是跟统一下单同样，如今是要签名一下参数的：

小程序ID	appId	是	String	wxd678efh567hg6787	微信分配的小程序ID
时间戳	timeStamp	是	String	1490840662	时间戳从1970年1月1日00:00:00至今的秒数,即当前的时间
随机串	nonceStr	是	String	5K8264ILTKCH16CQ2502SI8ZNMTM67VS	随机字符串，不长于32位。推荐随机数生成算法
数据包	package	是	String	prepay_id=wx2017033010242291fcfe0db70013231072	统一下单接口返回的 prepay_id 参数值，提交格式如：prepay_id=wx2017033010242291fcfe0db70013231072
签名方式	signType	是	String	MD5

这几个参数不过这个签名方式仍是如同我们上面的那个签名方法，嘿赶快去试试吧。（注意咯，真是开发使用也要判断你用户取消支付哦！）

有以为不清晰的老铁，说出模糊点留言，我作修改，来完善阅读体验！！！！