CocosCreator H5 微信內建瀏覽器調起微信支付

先來看看效果圖

下面來實現h5支付的功能（使用的CocosCreator）

1. 引用jssdk.js檔案
   在構建的web-mobile/index.html中新增

<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

1. 初始化jssdk

//這裡的ticket是公眾號用於呼叫微信JS介面的臨時票據，正常情況下，ticket的有效期為7200秒，通過access_token來獲取。由於獲取ticket的api呼叫次數非常有限，頻繁重新整理ticket會導致api呼叫受限，影響自身業務，開發者必須在自己的服務全域性快取ticket 。
 

//這個ticket需要讓伺服器提供
//順便在裡面加了一個自定義分享的實現
initConfig : function (ticket) {
        var CryptoJS = CryptoJS || function (e, m) {
            var p = {}, j = p.lib = {}, l = function () { }, f = j.Base = { extend: function (a) { l.prototype = this; var c = new l; a && c.mixIn(a); c.hasOwnProperty("init"
 
) || (c.init = function () { c.$super.init.apply(this, arguments) }); c.init.prototype = c; c.$super = this; return c }, create: function () { var a = this.extend(); a.init.apply(a, arguments); return a }, init: function () { }, mixIn: function (a) { for (var c in a) a.hasOwnProperty(c) && (this
 
[c] = a[c]); a.hasOwnProperty("toString") && (this.toString = a.toString) }, clone: function () { return this.init.prototype.extend(this) } },
                n = j.WordArray = f.extend({
                    init: function (a, c) { a = this.words = a || []; this.sigBytes = c != m ? c : 4 * a.length }, toString: function (a) { return (a || h).stringify(this) }, concat: function (a) { var c = this.words, q = a.words, d = this.sigBytes; a = a.sigBytes; this.clamp(); if (d % 4) for (var b = 0; b < a; b++)c[d + b >>> 2] |= (q[b >>> 2] >>> 24 - 8 * (b % 4) & 255) << 24 - 8 * ((d + b) % 4); else if (65535 < q.length) for (b = 0; b < a; b += 4)c[d + b >>> 2] = q[b >>> 2]; else c.push.apply(c, q); this.sigBytes += a; return this }, clamp: function () {
                        var a = this.words, c = this.sigBytes; a[c >>> 2] &= 4294967295 <<
                            32 - 8 * (c % 4); a.length = e.ceil(c / 4)
                    }, clone: function () { var a = f.clone.call(this); a.words = this.words.slice(0); return a }, random: function (a) { for (var c = [], b = 0; b < a; b += 4)c.push(4294967296 * e.random() | 0); return new n.init(c, a) }
                }), b = p.enc = {}, h = b.Hex = {
                    stringify: function (a) { var c = a.words; a = a.sigBytes; for (var b = [], d = 0; d < a; d++) { var f = c[d >>> 2] >>> 24 - 8 * (d % 4) & 255; b.push((f >>> 4).toString(16)); b.push((f & 15).toString(16)) } return b.join("") }, parse: function (a) {
                        for (var c = a.length, b = [], d = 0; d < c; d += 2)b[d >>> 3] |= parseInt(a.substr(d,
                            2), 16) << 24 - 4 * (d % 8); return new n.init(b, c / 2)
                    }
                }, g = b.Latin1 = { stringify: function (a) { var c = a.words; a = a.sigBytes; for (var b = [], d = 0; d < a; d++)b.push(String.fromCharCode(c[d >>> 2] >>> 24 - 8 * (d % 4) & 255)); return b.join("") }, parse: function (a) { for (var c = a.length, b = [], d = 0; d < c; d++)b[d >>> 2] |= (a.charCodeAt(d) & 255) << 24 - 8 * (d % 4); return new n.init(b, c) } }, r = b.Utf8 = { stringify: function (a) { try { return decodeURIComponent(escape(g.stringify(a))) } catch (c) { throw Error("Malformed UTF-8 data"); } }, parse: function (a) { return g.parse(unescape(encodeURIComponent(a))) } },
                k = j.BufferedBlockAlgorithm = f.extend({
                    reset: function () { this._data = new n.init; this._nDataBytes = 0 }, _append: function (a) { "string" == typeof a && (a = r.parse(a)); this._data.concat(a); this._nDataBytes += a.sigBytes }, _process: function (a) { var c = this._data, b = c.words, d = c.sigBytes, f = this.blockSize, h = d / (4 * f), h = a ? e.ceil(h) : e.max((h | 0) - this._minBufferSize, 0); a = h * f; d = e.min(4 * a, d); if (a) { for (var g = 0; g < a; g += f)this._doProcessBlock(b, g); g = b.splice(0, a); c.sigBytes -= d } return new n.init(g, d) }, clone: function () {
                        var a = f.clone.call(this);
                        a._data = this._data.clone(); return a
                    }, _minBufferSize: 0
                }); j.Hasher = k.extend({
                    cfg: f.extend(), init: function (a) { this.cfg = this.cfg.extend(a); this.reset() }, reset: function () { k.reset.call(this); this._doReset() }, update: function (a) { this._append(a); this._process(); return this }, finalize: function (a) { a && this._append(a); return this._doFinalize() }, blockSize: 16, _createHelper: function (a) { return function (c, b) { return (new a.init(b)).finalize(c) } }, _createHmacHelper: function (a) {
                        return function (b, f) {
                            return (new s.HMAC.init(a,
                                f)).finalize(b)
                        }
                    }
                }); var s = p.algo = {}; return p
        }(Math);
        (function () {
            var e = CryptoJS, m = e.lib, p = m.WordArray, j = m.Hasher, l = [], m = e.algo.SHA1 = j.extend({
                _doReset: function () { this._hash = new p.init([1732584193, 4023233417, 2562383102, 271733878, 3285377520]) }, _doProcessBlock: function (f, n) {
                    for (var b = this._hash.words, h = b[0], g = b[1], e = b[2], k = b[3], j = b[4], a = 0; 80 > a; a++) {
                        if (16 > a) l[a] = f[n + a] | 0; else { var c = l[a - 3] ^ l[a - 8] ^ l[a - 14] ^ l[a - 16]; l[a] = c << 1 | c >>> 31 } c = (h << 5 | h >>> 27) + j + l[a]; c = 20 > a ? c + ((g & e | ~g & k) + 1518500249) : 40 > a ? c + ((g ^ e ^ k) + 1859775393) : 60 > a ? c + ((g & e | g & k | e & k) - 1894007588) : c + ((g ^ e ^
                            k) - 899497514); j = k; k = e; e = g << 30 | g >>> 2; g = h; h = c
                    } b[0] = b[0] + h | 0; b[1] = b[1] + g | 0; b[2] = b[2] + e | 0; b[3] = b[3] + k | 0; b[4] = b[4] + j | 0
                }, _doFinalize: function () { var f = this._data, e = f.words, b = 8 * this._nDataBytes, h = 8 * f.sigBytes; e[h >>> 5] |= 128 << 24 - h % 32; e[(h + 64 >>> 9 << 4) + 14] = Math.floor(b / 4294967296); e[(h + 64 >>> 9 << 4) + 15] = b; f.sigBytes = 4 * e.length; this._process(); return this._hash }, clone: function () { var e = j.clone.call(this); e._hash = this._hash.clone(); return e }
            }); e.SHA1 = j._createHelper(m); e.HmacSHA1 = j._createHmacHelper(m)
        })();
        var data = new Date();
        var timestamp = data.getTime() + "";
        var nonceStr = Math.random() * 1000 + "";
        var url = location.href.split('#')[0];
        var string = "jsapi_ticket=" + ticket + "&noncestr=" + nonceStr + "&timestamp=" + timestamp + "&url=" + url;

        var signature = CryptoJS.SHA1(string, { string: true }).toString()
        if(typeof(wx)=="undefined"){ 
            return;
        }
        wx.config({
            debug: false, // 開啟除錯模式,呼叫的所有api的返回值會在客戶端alert出來，若要檢視傳入的引數，可以在pc端開啟，引數資訊會通過log打出，僅在pc端時才會列印。
            appId: HeadDefine.appid, // 必填，公眾號的唯一標識
            timestamp: timestamp, // 必填，生成簽名的時間戳
            nonceStr: nonceStr, // 必填，生成簽名的隨機串
            signature: signature,// 必填，簽名，見附錄1
            jsApiList: [
                "onMenuShareTimeline",
                "onMenuShareAppMessage",
                "chooseWXPay",
            ] // 必填，需要使用的JS介面列表，所有JS介面列表見附錄2
        });
        wx.ready(function () {
            // config資訊驗證後會執行ready方法，所有介面呼叫都必須在config介面獲得結果之後，config是一個客戶端的非同步操作，所以如果需要在頁面載入時就呼叫相關介面，則須把相關介面放在ready函式中呼叫來確保正確執行。對於使用者觸發時才呼叫的介面，則可以直接呼叫，不需要放在ready函式中。
            wx.onMenuShareAppMessage({
                title: "", // 分享標題
                desc: "", // 分享描述
                link:location.href.split('#')[0], // 分享連結，該連結域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
                imgUrl: "", // 分享圖示
                type: 'link', // 分享型別,music、video或link，不填預設為link
                dataUrl: "", // 如果type是music或video，則要提供資料鏈接，預設為空
                success: function () {
                    // 使用者確認分享後執行的回撥函式

                },
                cancel: function () {
                    // 使用者取消分享後執行的回撥函式

                }
            });
        }.bind(this));
        wx.error(function (res) {

            // config資訊驗證失敗會執行error函式，如簽名過期導致驗證失敗，具體錯誤資訊可以開啟config的debug模式檢視，也可以在返回的res引數中檢視，對於SPA可以在這裡更新簽名。
        });
    }

1. 呼叫支付介面(直接把程式碼放到使用者點選按鈕購買的地方就可以)

var appId = "xxx";//公眾號appId
var timestamp = new Date().getTime().toString();//支付簽名時間戳
var nonceStr = (Math.random() * 1000).toString();// 支付簽名隨機串
//prepayId : 這個引數是伺服器獲取的微信統一下單號
var prepay_id = 'prepay_id=' + prepayId;// 統一支付介面返回的prepay_id引數值
var signType = 'MD5';// 簽名方式
//生成簽名的規則我就不多說了，直接看文件https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=4_3
var stringA = "appId=" + appId + "&nonceStr=" + nonceStr + "&package=" + prepay_id + "&signType=" + signType + "&timeStamp=" + timestamp;
var stringSignTemp = stringA + "&key=xxxxxx" //注：key為商戶平臺設定的金鑰key
//utilMd5:是一個網上要的md5js檔案，在後面會上傳
var sign = utilMd5.hexMD5(stringSignTemp).toUpperCase();//注：MD5簽名方式
//WeixinJSBridge : 微信內建物件在其他瀏覽器中無效。
WeixinJSBridge.invoke(
    'getBrandWCPayRequest', {
           "appId": appId,     //公眾號名稱，由商戶傳入     
           "timeStamp": timestamp,         //時間戳，自1970年以來的秒數     
           "nonceStr": nonceStr, //隨機串     
           "package": prepay_id,
           "signType": signType,         //微信簽名方式：     
           "paySign": sign //微信簽名 
     },
     function (res) {
           // 使用以上方式判斷前端返回,微信團隊鄭重提示：res.err_msg將在使用者支付成功後返回    ok，但並不保證它絕對可靠。 
           if (res.err_msg == "get_brand_wcpay_request:ok"){
               alert("充值成功");
           } else if (res.err_msg == "get_brand_wcpay_request:cancel") {
               alert("取消成功");
           } else {
               alert(res.err_msg);
           }
    }
);

utilMd5.js

/* 
 1. A JavaScript implementation of the RSA Data Security, Inc. MD5 Message 
 2. Digest Algorithm, as defined in RFC 1321. 
 3. Version 1.1 Copyright (C) Paul Johnston 1999 - 2002. 
 4. Code also contributed by Greg Holt 
 5. See http://pajhome.org.uk/site/legal.html for details. 
 */ 

/* 
 6. Add integers, wrapping at 2^32. This uses 16-bit operations internally 
 7. to work around bugs in some JS interpreters. 
 */ 
function safe_add(x, y)  
{  
 var lsw = (x & 0xFFFF) + (y & 0xFFFF)  
 var msw = (x >> 16) + (y >> 16) + (lsw >> 16)  
 return (msw << 16) | (lsw & 0xFFFF)  
}  

/* 
 8. Bitwise rotate a 32-bit number to the left. 
 */ 
function rol(num, cnt)  
{  
 return (num << cnt) | (num >>> (32 - cnt))  
}  

/* 
 9. These functions implement the four basic operations the algorithm uses. 
 */ 
function cmn(q, a, b, x, s, t)  
{  
 return safe_add(rol(safe_add(safe_add(a, q), safe_add(x, t)), s), b)  
}  
function ff(a, b, c, d, x, s, t)  
{  
 return cmn((b & c) | ((~b) & d), a, b, x, s, t)  
}  
function gg(a, b, c, d, x, s, t)  
{  
 return cmn((b & d) | (c & (~d)), a, b, x, s, t)  
}  
function hh(a, b, c, d, x, s, t)  
{  
 return cmn(b ^ c ^ d, a, b, x, s, t)  
}  
function ii(a, b, c, d, x, s, t)  
{  
 return cmn(c ^ (b | (~d)), a, b, x, s, t)  
}  

/* 
 10. Calculate the MD5 of an array of little-endian words, producing an array 
 11. of little-endian words. 
 */ 
function coreMD5(x)  
{  
 var a = 1732584193  
 var b = -271733879  
 var c = -1732584194  
 var d = 271733878  

 for(var i = 0; i < x.length; i += 16)  
 {  
  var olda = a  
  var oldb = b  
  var oldc = c  
  var oldd = d  

  a = ff(a, b, c, d, x[i+ 0], 7 , -680876936)  
  d = ff(d, a, b, c, x[i+ 1], 12, -389564586)  
  c = ff(c, d, a, b, x[i+ 2], 17, 606105819)  
  b = ff(b, c, d, a, x[i+ 3], 22, -1044525330)  
  a = ff(a, b, c, d, x[i+ 4], 7 , -176418897)  
  d = ff(d, a, b, c, x[i+ 5], 12, 1200080426)  
  c = ff(c, d, a, b, x[i+ 6], 17, -1473231341)  
  b = ff(b, c, d, a, x[i+ 7], 22, -45705983)  
  a = ff(a, b, c, d, x[i+ 8], 7 , 1770035416)  
  d = ff(d, a, b, c, x[i+ 9], 12, -1958414417)  
  c = ff(c, d, a, b, x[i+10], 17, -42063)  
  b = ff(b, c, d, a, x[i+11], 22, -1990404162)  
  a = ff(a, b, c, d, x[i+12], 7 , 1804603682)  
  d = ff(d, a, b, c, x[i+13], 12, -40341101)  
  c = ff(c, d, a, b, x[i+14], 17, -1502002290)  
  b = ff(b, c, d, a, x[i+15], 22, 1236535329)  

  a = gg(a, b, c, d, x[i+ 1], 5 , -165796510)  
  d = gg(d, a, b, c, x[i+ 6], 9 , -1069501632)  
  c = gg(c, d, a, b, x[i+11], 14, 643717713)  
  b = gg(b, c, d, a, x[i+ 0], 20, -373897302)  
  a = gg(a, b, c, d, x[i+ 5], 5 , -701558691)  
  d = gg(d, a, b, c, x[i+10], 9 , 38016083)  
  c = gg(c, d, a, b, x[i+15], 14, -660478335)  
  b = gg(b, c, d, a, x[i+ 4], 20, -405537848)  
  a = gg(a, b, c, d, x[i+ 9], 5 , 568446438)  
  d = gg(d, a, b, c, x[i+14], 9 , -1019803690)  
  c = gg(c, d, a, b, x[i+ 3], 14, -187363961)  
  b = gg(b, c, d, a, x[i+ 8], 20, 1163531501)  
  a = gg(a, b, c, d, x[i+13], 5 , -1444681467)  
  d = gg(d, a, b, c, x[i+ 2], 9 , -51403784)  
  c = gg(c, d, a, b, x[i+ 7], 14, 1735328473)  
  b = gg(b, c, d, a, x[i+12], 20, -1926607734)  

  a = hh(a, b, c, d, x[i+ 5], 4 , -378558)  
  d = hh(d, a, b, c, x[i+ 8], 11, -2022574463)  
  c = hh(c, d, a, b, x[i+11], 16, 1839030562)  
  b = hh(b, c, d, a, x[i+14], 23, -35309556)  
  a = hh(a, b, c, d, x[i+ 1], 4 , -1530992060)  
  d = hh(d, a, b, c, x[i+ 4], 11, 1272893353)  
  c = hh(c, d, a, b, x[i+ 7], 16, -155497632)  
  b = hh(b, c, d, a, x[i+10], 23, -1094730640)  
  a = hh(a, b, c, d, x[i+13], 4 , 681279174)  
  d = hh(d, a, b, c, x[i+ 0], 11, -358537222)  
  c = hh(c, d, a, b, x[i+ 3], 16, -722521979)  
  b = hh(b, c, d, a, x[i+ 6], 23, 76029189)  
  a = hh(a, b, c, d, x[i+ 9], 4 , -640364487)  
  d = hh(d, a, b, c, x[i+12], 11, -421815835)  
  c = hh(c, d, a, b, x[i+15], 16, 530742520)  
  b = hh(b, c, d, a, x[i+ 2], 23, -995338651)  

  a = ii(a, b, c, d, x[i+ 0], 6 , -198630844)  
  d = ii(d, a, b, c, x[i+ 7], 10, 1126891415)  
  c = ii(c, d, a, b, x[i+14], 15, -1416354905)  
  b = ii(b, c, d, a, x[i+ 5], 21, -57434055)  
  a = ii(a, b, c, d, x[i+12], 6 , 1700485571)  
  d = ii(d, a, b, c, x[i+ 3], 10, -1894986606)  
  c = ii(c, d, a, b, x[i+10], 15, -1051523)  
  b = ii(b, c, d, a, x[i+ 1], 21, -2054922799)  
  a = ii(a, b, c, d, x[i+ 8], 6 , 1873313359)  
  d = ii(d, a, b, c, x[i+15], 10, -30611744)  
  c = ii(c, d, a, b, x[i+ 6], 15, -1560198380)  
  b = ii(b, c, d, a, x[i+13], 21, 1309151649)  
  a = ii(a, b, c, d, x[i+ 4], 6 , -145523070)  
  d = ii(d, a, b, c, x[i+11], 10, -1120210379)  
  c = ii(c, d, a, b, x[i+ 2], 15, 718787259)  
  b = ii(b, c, d, a, x[i+ 9], 21, -343485551)  

  a = safe_add(a, olda)  
  b = safe_add(b, oldb)  
  c = safe_add(c, oldc)  
  d = safe_add(d, oldd)  
 }  
 return [a, b, c, d]  
}  

/* 
 12. Convert an array of little-endian words to a hex string. 
 */ 
function binl2hex(binarray)  
{  
 var hex_tab = "0123456789abcdef" 
 var str = "" 
 for(var i = 0; i < binarray.length * 4; i++)  
 {  
  str += hex_tab.charAt((binarray[i>>2] >> ((i%4)*8+4)) & 0xF) +  
      hex_tab.charAt((binarray[i>>2] >> ((i%4)*8)) & 0xF)  
 }  
 return str  
}  

/* 
 13. Convert an array of little-endian words to a base64 encoded string. 
 */ 
function binl2b64(binarray)  
{  
 var tab = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/" 
 var str = "" 
 for(var i = 0; i < binarray.length * 32; i += 6)  
 {  
  str += tab.charAt(((binarray[i>>5] << (i%32)) & 0x3F) |  
           ((binarray[i>>5+1] >> (32-i%32)) & 0x3F))  
 }  
 return str  
}  

/* 
 14. Convert an 8-bit character string to a sequence of 16-word blocks, stored 
 15. as an array, and append appropriate padding for MD4/5 calculation. 
 16. If any of the characters are >255, the high byte is silently ignored. 
 */ 
function str2binl(str)  
{  
 var nblk = ((str.length + 8) >> 6) + 1 // number of 16-word blocks  
 var blks = new Array(nblk * 16)  
 for(var i = 0; i < nblk * 16; i++) blks[i] = 0  
 for(var i = 0; i < str.length; i++)  
  blks[i>>2] |= (str.charCodeAt(i) & 0xFF) << ((i%4) * 8)  
 blks[i>>2] |= 0x80 << ((i%4) * 8)  
 blks[nblk*16-2] = str.length * 8  
 return blks  
}  

/* 
 17. Convert a wide-character string to a sequence of 16-word blocks, stored as 
 18. an array, and append appropriate padding for MD4/5 calculation. 
 */ 
function strw2binl(str)  
{  
 var nblk = ((str.length + 4) >> 5) + 1 // number of 16-word blocks  
 var blks = new Array(nblk * 16)  
 for(var i = 0; i < nblk * 16; i++) blks[i] = 0  
 for(var i = 0; i < str.length; i++)  
  blks[i>>1] |= str.charCodeAt(i) << ((i%2) * 16)  
 blks[i>>1] |= 0x80 << ((i%2) * 16)  
 blks[nblk*16-2] = str.length * 16  
 return blks  
}  

/* 
 19. External interface 
 */ 
function hexMD5 (str) { return binl2hex(coreMD5( str2binl(str))) }  
function hexMD5w(str) { return binl2hex(coreMD5(strw2binl(str))) }  
function b64MD5 (str) { return binl2b64(coreMD5( str2binl(str))) }  
function b64MD5w(str) { return binl2b64(coreMD5(strw2binl(str))) }  
/* Backward compatibility */ 
function calcMD5(str) { return binl2hex(coreMD5( str2binl(str))) }  
module.exports = {  
 hexMD5: hexMD5  
} 

1. 2.當前頁面的url未註冊，說到這個就要說一下這些程式碼不能在本地測試，只能釋出出來放到伺服器上測試。這個問題就是說你的域名沒有繫結到微信公眾號支付的支付授權目錄裡面