JS通过调用微信API实现微信支付功能的方法示例_网络技术

JS通过调用微信API实现微信支付功能的方法示例

发布时间 - 2026-01-11 02:06:28 点击率：次

本文实例讲述了JS通过调用微信API实现微信支付功能的方法。分享给大家供大家参考，具体如下：

最近在做微信公众号开发，在微信支付上遇到一些问题，困惑了3天，今天终于搞定。期间要感谢一些大神的帮助，趁热下面分享一下我的经验。

在实现微信支付之前，需要到微信开发平台认证，这些认证和配置信息我就不多说了，这里主要从代码层面实现支付。

function onBridgeReady(){
  WeixinJSBridge.invoke(
    'getBrandWCPayRequest', {
      "appId" ： "wx2421b1c4370ec43b",   //公众号名称，由商户传入
      "timeStamp"：" 1395712654",     //时间戳，自1970年以来的秒数
      "nonceStr" ： "e61463f8efa94090b1f366cccfbbb444", //随机串
      "package" ： "prepay_id=u802345jgfjsdfgsdg888",   //统一订单号
      "signType" ： "MD5",     //微信签名方式：
      "paySign" ： "70EA570631E4BB79628FBCA90534C63FF7FADD89" //支付签名
    },
    function(res){
      alert(res.err_msg);
      if(res.err_msg == "get_brand_wcpay_request：ok" ) {}   // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回  ok，但并不保证它绝对可靠。
    }
  );
}
if (typeof WeixinJSBridge == "undefined"){
  if( document.addEventListener ){
    document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
  }else if (document.attachEvent){
    document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
    document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
  }
}else{
  onBridgeReady();
}

上面的JS代码是官方文档上贴出来的，官方文档:https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7。

下面对JS中的几个参数做主要的讲解:

在开发过程中，有4个非常重要的参数:一个是appid,AppSecret,apikey和商户号。上面js中的appID就是其中之一。timeStamp是一个时间戳，10位数，nonceStr是随机数，32位以内，这里最重要的两个参数，也是最容易出错的就是package和paySign了。我一一说来。先说package，这里需要用到prepay_id，这个参数是微信生成的订单号，需要我们调用统一订单接口来获取。官方文档:https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=9_1。可以从文档看到，要获取prepay_id，需要很多参数，这里面有一个非常重要的参数就是签名。注意:这里的签名和JS中的支付签名和不同的。签名的算法文档里有，我只是强调两点。一个是参数的顺序，一定一定要按照ASCII从小到大拼接，二是apikey一定不能错，这个apikey在哪里呢?登入商户平台就可以设置了。

拼接好签名需要的字符串后，进行MD5加密就可以得到签名了。然后把签名和前面所有的参数组合成xml格式的字符串，调用给的接口URL地址：https://api.mch.weixin.qq.com/pay/unifiedorder就可以返回一个xml结果，解析出其中的prepay_id，这样这个参数就成功获取到了。

下面再说JS中的最后一个参数PaySign:支付签名。支付签名的算法也是一样，把JS中的其他5个参数按照顺序拼接，加上apikey，MD5加密，ok。

签名的算法都是一样的，只是参数值不同而已。这里需要注意一点。在支付签名的时候，用到随机数nonceStr，时间戳timeStamp，而签名时使用的这两个参数和JS中的这两个参数的值要是一样的，是同一个随机数，同一个时间戳。为什么呢?虽然文档没说，但是我的理解是:支付签名是通过随机数和时间戳来生成的，然后在支付的时候，把随机数，时间戳，支付签名一起发送过去，那么在微信进行验证的时候，也会根基js中的随机数和时间戳生成签名和你发送的支付签名进行比较，如果你在js中重新获取新的随机数、时间戳，那么算出来的签名和你发送的签名就会不一样，就会报错:签名失败。

到此，代码层面的注意点就这些，当然，还有其他的一些注意点。比如其中有用的openid，这个参数也是需要调用接口获取到的，还有支付授权的目录是否配置正确。

最后一句总结:仔细看文档，最后问别人，可以找微信支付相关的群，里面很多大神的，我之前就是遇到一个问题纠结了2天没解决，(有时候光看文档也不行)，

然后怒加了8个微信开发的群，最终在高人的指点下终于搞出来了。再次表示感谢。程序员是一个热爱分享的群体，他们非常乐意把自己知道的东西分享出去。所以不懂的时候，多问问。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript中json操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

# JS # 微信API # 微信支付 # 微信JSSDK调用微信扫一扫功能的方法 # 微信分享调用jssdk实例 # JS 调用微信扫一扫功能 # 微信公众号支付之坑：调用支付jsapi缺少参数 timeStamp等错误解决方法 # javascript使用call调用微信API # nodejs调取微信收货地址的方法 # 随机数 # 文档 # 是一个 # 商户 # 就会 # 就可以 # 和你 # 这两个 # 大神 # 非常重要 # 几个 # 我就 # 来了 # 也会 # 相关内容 # 一句 # 将在 # 说了 # 我一 # 最重要

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：Node.js 应用在 Debian 上如何调试

下一篇：C# 如何在Blazor中调用JavaScript函数 -

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：Node.js 应用在 Debian 上如何调试

下一篇：C# 如何在Blazor中调用JavaScript函数 -