MUI调用微信支付wx.chooseWXPay

素颜马尾好姑娘i 2023-06-25 08:12 17阅读 0赞

关于MUI请看上篇博文  
此篇没有关于微信公众号调用API那些配置，只是梳理页面内支付逻辑

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title></title>
        <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/mui.min.js"></script>
        <link href="css/mui.min.css" rel="stylesheet"/>
        <script type="text/javascript" charset="utf-8">
          	mui.init();
        </script>
    </head>
    <body>
    	<div class="mui-card">
    		
    		<div class="mui-card-header">这是一条商品信息</div>
    		
    		<div class="mui-card-content">
    			<p>介绍1523</p>
    			<p>介绍1523</p>
    			<p>介绍1523</p>
    			<p>介绍1523</p>
    			<p>￥162.30</p>
    		</div>
    		
    		<div class="mui-card-footer">
    			<button type="button" id="payMent">立即购买</button>
    		</div>
    	</div>
    	
    	
    	
    	
    	
    	<script>
    		console.log(mui.ajax())
    		console.log(wx.config)
    		
    		// 唤起微信js-sdk配置 获取签名
    		mui.ajax('/xxx.xx.xx/xxxxx',{ 
    			dataType:'json',         //服务器返回json格式数据
    			type:'get',              //HTTP请求类型
    			timeout:10000,           //超时时间设置为10秒； 
    			success:function(data){ 
    				//服务器返回响应，根据响应结果，分析是否登录成功，成功则验签
    				console.log(data)   // 信息注入wx.config
    				wx.config({ 
    				    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    				    appId: '', // 必填，公众号的唯一标识
    				    timestamp: '', // 必填，生成签名的时间戳
    				    nonceStr: '', // 必填，生成签名的随机串
    				    signature: '',// 必填，签名，见附录1
    				    jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表，所有JS接口列表 例如:previewImage图片预览，openLocation 定位等
    				});
    			},
    			error:function(xhr,type,errorThrown) {   
    				//异常处理
    				console.log(type);
    			}
    		});
    		// 支付按钮
    		document.getElementById("payMent").addEventListener('tap', function() { 
    			getCode()
            });
            // 支付请求
            function getCode() { 
                mui.ajax({ 
                    url: '/xxx.xx.xx/xxxxx',   // 支付url
                    data: { },
                    async: true,
                    dataType: 'json',
                    crossDomain: true, 
                    type: 'get',
                    timeout: 10000,
                    success: function(res) {   
                    	// 支付请求成功唤起支付
                        onBridgeReady(res)
                    }
                });
                
            }
            // 唤起支付
            function onBridgeReady(data) {     
                console.log(data)  // 信息调起支付
                wx.chooseWXPay({ 
    	              appId: '',
    	              timestamp: '', // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
    	              nonceStr: '', // 支付签名随机串，不长于 32 
    	              package: '', // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）// 统一下单接口返回
    	              signType: '', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
    	              paySign: '', // 支付签名
    	              success: function (res) {    // 支付成功
    	                  console.log(res);
    	                  alert(res.errMsg)
    	              },
    	              cancel: function (res) {   //提示引用可以mint-UI里toast
    	                  console.log('退出')
    	              },
    	              fail: function (res) { 
    	                  console.log('失败')
    	                  alert(res.errMsg)
    	              }
    	        })
            }
    	</script>
    </body>
    </html>

微信支付需要在真机验证，要不然你写好打包上服务器测试，要不然搞一个内网穿透，在开发者工具上无法调试这个功能。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2019122713363514.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM=,size_16,color_FFFFFF,t_70