微信小程序——微信支付

時間 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