微信小程序——微信支付

这个讲起来也就比较麻烦一点，因为需要的不仅仅是咱们代码上的技术，嘿嘿！

先整理一下思路。如果想做微信支付：

1.现有一个公司账户（非个人账户），并且实名认证过的。

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

3.开发者ID。

4.小程序秘钥。

5.开发者工具。嘿嘿！

从现在开始说小程序的支付步骤（大概分三步）：

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

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

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

posted on 2017-12-27 18:09 念你千万遍℃ 阅读(2835) 评论(0) 编辑收藏举报

刷新页面返回顶部

微信小程序——微信支付

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

导航

公告