手把手教你快应用接入微信H5网页支付

景象形容

微信领取反对两种接入领取形式：app领取接入和网页领取接入。

华为手机目前不反对app领取，如果您的快利用仅在华为推广，请勿接入app领取。以下仅阐明H5网页领取形式。

问题剖析
【留神】从
1040
版本开始，网页领取将反对设置
referer
形式，此形式不再须要实现两头页，但原先须要实现两头页跳转的形式还会持续反对。设置
referer
形式须要在
pay
接口中设置
referer
参数，
pay
接口的
extra
参数中必须配置
mweb_url
。
referer
是在微信领取后盾配置的域名。从
1040
版本开始，在应用微信网页形式调用时，若该参数不为空，将通过设置
referer
的形式拉起微信客户端。

如果之前没有在h5网站中接入过微信领取能力，倡议先查看微信官网文档。

快利用中接入微信H5领取和微信文档中介绍的统一，快利用只是提供了一个运行H5网页的webview，应用h5页面拉起微信领取的能力给开发者提供微信领取的接口。

快利用接入微信H5领取的步骤：

1.在微信开放平台新注册申请一个H5网站

https://open.weixin.qq.com/cg…

2.实现领取服务端的接入

依照微信官网的文档实现服务端的接入，服务器要实现的工作是接管来自客户端的领取申请，而后生成一个订单，之后把订单传给微信的服务器，微信会返回一个mweb_url，服务器须要把这个mweb_url返回给客户端。

3.发动微信领取（以下两种形式二选一，举荐第一种）

（1）不须要两头页实现（设置referer形式）

示例代码：

webPay: function () {
  console.info('wxpay call function webPay')
  pay.pay({
      prepayid: 'wx09113246667953cfb8d067ad1892777375', // your order prepayid,eg: wx20170101abcdef1234567890
      referer: 'https://www.huawei.cn', //your host name configured in wechat
      extra: {
          mweb_url: 'https%3A%2F%2Fwx.tenpay.com%2Fcgi-bin%2Fmmpayweb-bin%2Fcheckmweb%3Fprepay_id%3Dwx09113246667953cfb8d067ad1892777375%26package%3D299247950%26redirect_url%3Dhttps%3A%2F%2Fm.vip.com%2Fuser-order-detail-list-0.html',
          prepayid: 'wx09113246667953cfb8d067ad1892777375'
      },
      fail: function (data, code) {
          console.log('WX PAY ' +  pay.getType() + ' failed, code = ' + code);
          prompt.showToast({
              message: 'WX PAY ' +  pay.getType() + ' failed, code = ' + code
          })
      },
      cancel: function (data) {
          console.log('WX PAY ' +  pay.getType() + ' cancelled by user');
           prompt.showToast({
              message: 'WX PAY ' +  pay.getType() + ' cancelled by user'
          })
      },
      success: function (data) {
          console.log('WX PAY ' +  pay.getType() + ' success');
           prompt.showToast({
              message: 'WX PAY ' +  pay.getType() + ' success'
          })
      }
  })
}

（2）实现一个两头跳转页面

两头页须要在加载实现的时候从页面的get参数中解析出 mweb_url , 而后主动向这个url跳转，不须要任何其余的内容，也不须要ui。

对于这个两头页:

（1）为什么须要这个两头页？

因为微信h5领取拉起领取界面的形式就是向mweb_url跳转，不过因为微信会通过ref做防盗链查看，因为跳转动作须要在开发者的页面中实现

（2）这个两头页什么时候会被加载运行？

调用微信领取的pay接口之后，平台会主动加载运行这个页面

（3）加载运行这个两头页的时候，会拿到哪些参数？

调用微信领取的pay接口时传入的参数，会全副作为get参数传给这个页面

示例代码：

wxpay.pay({
    //微信网页领取的prepayId
    prepayid: 'your order prepayid,eg: wx20170101abcdef1234567890',
    extra: {
        //传递给领取页面的自定义参数, 依据须要进行设置, 会被urlEncode之后拼接在配置的url尾部
        mweb_url: 'https://wx.tenpay.com/cgi-bin/mmpayweb-bin',
        customeKey1: 'customeValue1',
        customeKey2: 'customeValue2'
    },
    fail: function(data, code) {
        console.log("WX H5 PAY handling fail, code=" + code);
    },
    cancel: function(data) {
        console.log("WX H5 PAY handling cancel");
    },
    success: function(data) {
        //H5形式下，领取胜利的回调仅仅只是指将订单递交给微信，并不意味着领取曾经胜利实现
        console.log("WX H5 PAY handling success");
    }
})

4.在快利用中进行配置两头页地址

在manifest.json中申明wxpay这个feature时填上，参考快利用官网文档中接口申明的url字段。

FAQ:
1.我能够指定应用微信h5领取吗？
不能够，H5领取是App领取的fallback计划，如果能够app领取，不会fallback到h5领取。具体应该应用那种领取形式，以getType的返回值为准。

2.app领取下，收到了2001谬误，怎么解决？

2001谬误是微信回绝了领取申请，可能的起因：

（1）微信后盾或者manifest.json中的签名配置谬误

（2）订单信息中的sign字段生成有误

（3）android app的后盾审核流程还未通过

3.微信h5领取下，没有拉起微信领取界面，什么起因？

查看两头页主动向mweb_url跳转的逻辑是否有失效，如果没有请批改两头页的逻辑。另外，两头页因为不展现ui逻辑，只作跳转，因而除了js执行权限以外，其余的权限均未授予，包含罕用的domStorage权限。

4.咱们之前曾经有一个上线了android app接入了微信领取，能够间接把这个app的包名和签名配置在快利用中应用吗？

不行，如果这么配置，快利用和android app同时发动微信领取时，会发生冲突。

附:
manifest.json中微信领取的配置样例：

{
  "name": "service.wxpay",
  "params": {
    "package": "com.your.package.name",
    "sign": "MIIDDTCCAfWgAwIBAgIEfiu92jANBgkqhkiG9w0BAQsFADA3MQswCQYDVQQGEwJVUzEQMA4GA1UEChMHQW5kcm9pZDEWMBQGA1UEAxMNQW5kcm9pZCBEZWJ1ZzAeFw0xNjA0MTMwNTUyMDhaFw00NjA0MDYwNTUyMDhaMDcxCzAJBgNVBAYTAlVTMRAwDgYDVQQKEwdBbmRyb2lkMRYwFAYDVQQDEw1BbmRyb2lkIERlYnVnMIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAz/dFKLrU3NmabX/byI0vL5ctZkg64Yhas5dsvl6bZZO/FWrgR+ZWiCcVFLQt/CpzLj3fMpIBoUiEuqPVRJoZdRn4gML1oIfj1meM9X9HSQHXzXr0NkOZhOzrlGvuWuy0//m3I18I8V9HXka4xiT9xGBiiMTWbP90vj7fTU+B3Q0UQxbMibdZfap9gCn2QKq7Y8k73n9wLsbmznlHiBeL2kJAcVL+3EtEle1PZaN90w7YGjaKijuXwv8MS0guvzy63t2rqUjEL41wlBz+/DnzfdolAD6toN5aynuFan51pUqrY5CD9CQIbiTeJXgjsz8vaZotSj+61ISqy2sXrpySAwIDAQABoyEwHzAdBgNVHQ4EFgQUhtto5p0PfrnZlj12MpIF6gzYawEwDQYJKoZIhvcNAQELBQADggEBAJcNfFIJCWh9YIFzM7+eg4P9pNME+Q9Oug+NVA+g6+Vuhi2eFMBe29GnSr//EMpnluXhmfNy40whv9uUKdz4ekejDVyHucs8AvJI2cI5WhoenHO2jqw5IpsxIBqyca6zpXpElU35NZnqNoD9Rs5AZrEVxCB3AzhWviGe5QmxXqRMAVOju3X1B+Nv3dVvou9y64UI9mK3Z4Sz0gUNcYsyrSU3uPmCAYGgh/3/ygGZA9LL5a2jvWZVWPq2/+pFzWL10CbFLCXaWT0dJrxDbLWZcd/6N95kT0sMwVJkwL+v/jrnyXpCpbB7UaYw5JSLsWMnk+4/pSeAoDwcZIgdBlRYPmM=",
    "url": "https://your.transitional.page/para=value"
}
},

微信工具抓取的签名样例：
fcaa113908d343444c1894dc4b42ac13

原文链接：https://developer.huawei.com/…
原作者：Mayism

喜欢 (0)赏

[搞代码]

分享 (0)