乐趣区

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

jiezi

景象形容

微信领取反对两种接入领取形式：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

退出移动版