场景：
  • 要在别人家的微信公众号内放入我们的h5网页，涉及到支付只能使用JSAPI支付。从一无所有到成功上线的记录……真难
    官方链接地址

1. 微信服务号配置

前提：必须要有一个微信服务号，而且要完成微信认证需要三百大洋，认证过后，登录后台找到接口权限中的网页授权用户基本信息
  • 没有微信认证的时候，当前网页授权是未获得。
  • 认证人家还得审核给你打电话确认啥的……
1.1 配置授权域名

ios实现h5支付 h5支付配置_ios实现h5支付

ios实现h5支付 h5支付配置_微信JSAPI_02

  1. 注意要在你配置的域名比如www.baidu.com下放入人家让你下载的txt文件，将下载好的文件放入你的域名下，可以通过www.baidu.com/MP_verify_gucIIseQvV9CvXmu.txt访问就可以了，你会看到有一段内容。
  2. 域名填写：不要写http或者https开头，直接www开头……

ios实现h5支付 h5支付配置_微信_03

1.2 获取APPID
  • 点击左侧的基本配置，点击右侧列表中的称为开发者。在这里获取服务号的appid，这个appid后台需要，前端支付也需要……

    微信服务号的配置到此结束，记得如果你要改了你的H5域名，一定要记得回来改掉~。

2. 微信授权具体介绍

前提： 需要弄好appid、redirect_url

微信授权官方流程介绍

  1. 在网页授权回调的地址中可以获取到用户的code，然后让后台去解析可以得到用户的openid。这个code微信官方在你的授权地址中直接把code发给你了，在你的页面中接收即可。
  2. 比如我在访问首页的时候就需要授权拿到code，此处使用的是静默授权。
    h5可以直接使用window.location.href=‘链接地址’。授权获取code。
  • redirect_uri授权回调的页面需要urlEncode编码 ，比如授权回调页是https://www.baidu.com/index.html

ios实现h5支付 h5支付配置_ios实现h5支付_04

ios实现h5支付 h5支付配置_微信JSAPI_05


ios实现h5支付 h5支付配置_html_06


根据这个链接，直接可以测试了，填写好服务号的appid和刚刚encode后的url

  1. 最后生成的链接这个样子
    https://open.weixin.qq.com/connect/oauth2/authorize?appid=你的APPID&redirect_uri=https%3A%2F%2Fwww.baidu.com%2Findex.html&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
  2. 如果都配置好了，可以在微信内打开你生成的链接试下，成功会自动跳转到你的授权回调页面。在你授权回调的页面内比如https://www.baidu.com/index.html接收当前code测试下。

https://www.baidu.com/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
    接收的code是<div class="code"></div>
    <!-- 接收code的页面 -->
    <script>
        getParams(name)
        function getParams(name){
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);//截取?后面的参数
            console.log(r,'接收的参数是');
            if(r!=null){
                return r[2]
            }
        }
        (function(){
            var code=getParams('code')
            // var code=getParams('state')
            $('.code').html(code)
        })()
    </script>
</body>
</html>

关于授权回调页面的基本配置到这里了就……

3. 前台支付

前提：拿到code后，在确认支付页面，还需要登录微信商户平台配置下JSAPI的授权目录，填写你的确认支付页面的URL地址。不配置在确认支付的时候会提示你当前url未注册。

ios实现h5支付 h5支付配置_H5_07

ios实现h5支付 h5支付配置_微信_08


比如添加：https://www.baidu.com/pay.html

ios实现h5支付 h5支付配置_html_09


ios实现h5支付 h5支付配置_H5_10

拿到code发送给后端，他们去解析获取用户openId，然后这里在用户确认支付的时候只需要拿到你需要的一些基本参数即可，然后根据这些基本参数就可以调用onBridgeReady()直接支付了。

  • 稍微注意下package字段中prepay_id这个一定要加，后面的才是你要填写的预支付ID
  • 我们后端直接把整个请求参数发我了，直接将参数填上更方便。

这段代码在微信浏览器内才会生效。（测试会比较麻烦点……要在微信内测）

// 调起微信支付
        function onBridgeReady(data) {
            WeixinJSBridge.invoke(
                'getBrandWCPayRequest',
                {
                    appId: '填写你的公众号appid', //公众号ID，由商户传入
                    timeStamp: data.timeStamp, //时间戳，自1970年以来的秒数
                    nonceStr: data.nonceStr, //随机串
                    package: `prepay_id=${data.prepay_id}`, //微信下单返回的支付ID是从后端获得的
                    signType: 'MD5', //微信签名方式：
                    paySign: data.paySign //微信签名
                },
                function (res) {
                    if (res.err_msg == 'get_brand_wcpay_request:ok') {
                        // 支付成功了,跳转到成功页面
                        window.open('成功页面地址')
                    } else {
                        // 支付失败了
                        window.open('失败页面地址')
                    }
                }
            );
        }

其它:

判断在微信环境内打开（网上找的……）

/* 在微信内打开只能使用JSAPI支付的方式-只有微信支付 */
		var ua = navigator.userAgent.toLowerCase();
		var isWeixin = ua.indexOf('micromessenger') != -1;
		if(isWeixin){
			console.log('微信内打开');
		}