若对微信JS-SDK不了解的同学可先参考该文章：
https://www.jianshu.com/p/b3c4450f845e
在页面中调用微信JS-SDK，通过config接口注入权限验证配置，并且添加支付功能。
<!--jquery--> <script src="//img.yd166.com//js/jquery.min.js" type="text/javascript" charset="utf-8"></script> <!--微信的JSSDK--> <script src="//img.yd166.com/http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script> <script> $(function() { <!--通过config接口注入权限验证配置--> wx.config({ debug: true, // 开启调试模式 appId: '${configMap.appId}', // 公众号的唯一标识 timestamp: '${configMap.timestamp}', // 生成签名的时间戳 nonceStr: '${configMap.nonceStr}', // 生成签名的随机串 signature: '${configMap.signature}',// 签名 jsApiList: ['chooseWXPay'] // 填入需要使用的JS接口列表，这里是先声明我们要用到支付的JS接口 }); <!-- config验证成功后会调用ready中的代码 --> wx.ready(function(){ //点击马上付款按钮 $("#payBtn").click(function(){ //弹出支付窗口 wx.chooseWXPay({ timestamp: '${payMap.timeStamp}', // 支付签名时间戳， nonceStr: '${payMap.nonceStr}', // 支付签名随机串，不长于 32 位 package: '${payMap.packageStr}', // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=xxxx） signType: '${payMap.signType}', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5' paySign: '${payMap.paySign}', // 支付签名 success: function (res) { // 支付成功后的回调函数 alert("支付成功！"); } }); }) }); }); </script>
点击马上付款后可弹出支付窗口：
支付完成：
5.支付结果的处理
当用户支付后，微信会把支付结果发送到我们前面指定的notify_url地址，我们可以根据支付结果的参数来做相关的业务逻辑，但这里暂不实现，具体支付通知结果的参数可参考官方文章：
https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=9_7&index=8
作者：陈惠
链接：https://www.jianshu.com/p/9c322b1a5274
