微信公众号H5支付接口调用方法


Posted in Javascript onJanuary 10, 2019

本文实例为大家分享了 微信内H5调用支付接口的具体代码,供大家参考,具体内容如下

官方文档地址

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>微信公众号H5接口调用</title>
  <script src='./js/md5.js'></script>
</head>
<body>
  <script>
    // 判断微信版本是否在5.0以上
    // window.navigator.userAgent 属性包含了浏览器类型,版本,操作系统类型,浏览器引擎等信息
    var ua = window.navigator.userAgent.toLowerCase()
    // 通过正则表达式匹配 ua 中是否含有 MicroMessenger 字符串
    if (ua.match(/MicroMessenger/i) != 'micromessenger') {
      return false
    }

    var appId = 'wx123456789'
    // 微信H5接口调用准备
    // 1,时间戳
    var timeStamp = new Date()
    timeStamp = timeStamp.getTime()/1000
    console.log('时间戳', timeStamp)

    // 2,生成32位随机字符串
    function randomString(len) {
      len = len || 32
      // 默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1
      var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
      var charsLen = chars.length;
      var pwd = '';
      for (var i=0;i<len;i++) {
        pwd += chars.charAt(Math.floor(Math.random() * charsLen))
      }
      return pwd
    }
    console.log('nonceStr,32位随机字符串', randomString())

    // 3,package,统一下单接口返回的prepay_id 参数值

    // 4,paySign:微信签名
    function wxSignFunc() {
      // 4.1,将参数改写成 key=value&key2=value2 形式,需要按照参数名ASCII字典序排序
      var stringA = 'appId=' + appId
            +'&nonceStr=' + randomString()
            +'&package=prepay_id=u802345jgfjsdfgsdg888'
            +'&signType=MD5'
            +'&timeStamp=' + timeStamp

      ///// 4.2,拼接API 密钥
      var stringSignTemp = stringA + '&key=192006250b4c09247ec02edce69f6a2d' //注:key为商户平台设置的密钥key
      var sign = hex_md5(stringSignTemp).toUpperCase()
      return sign
    }

    console.log(wxSignFunc())

    //////////// 微信接口实例
    function onBridgeReady(){
     WeixinJSBridge.invoke(
        'getBrandWCPayRequest', {
          "appId": appId,   //公众号名称,由商户传入   
          "timeStamp": timeStamp,     //时间戳,自1970年以来的秒数   
          "nonceStr": randomString(), //随机串   
          "package":"prepay_id=u802345jgfjsdfgsdg888",  // 统一下单接口返回的prepay_id 参数值 
          "signType":"MD5",     //微信签名方式:   
          "paySign": wxSignFunc() //微信签名 
        },
        function(res){
          if(res.err_msg == "get_brand_wcpay_request:ok" ){
            // 使用以上方式判断前端返回,微信团队郑重提示:
            // res.err_msg将在用户支付成功后返回ok,但并不保证它绝对可靠。
            console.log(111)
          }
        }
      )
    }

    // 调用微信接口
    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();
    }
  </script>

</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js Event对象的5种坐标
Sep 12 Javascript
8款非常棒的响应式jQuery 幻灯片插件推荐
Feb 02 Javascript
js判断选择的时间是否大于今天的代码
Aug 20 Javascript
js 定时器setTimeout无法调用局部变量的解决办法
Nov 28 Javascript
JS保留两位小数,多位小数的示例代码
Jan 07 Javascript
2014最热门的JavaScript代码高亮插件推荐
Nov 25 Javascript
jquery模拟实现鼠标指针停止运动事件
Jan 12 Javascript
JavaScript知识点总结(十一)之js中的Object类详解
May 31 Javascript
input输入密码变黑点密文的实现方法
Jan 09 Javascript
javascript实现遮罩层动态效果实例
May 14 Javascript
详解 微信小程序开发框架(MINA)
May 17 Javascript
微信小程序上传图片并等比列压缩到指定大小的实例代码
Oct 24 Javascript
详解在Node.js中发起HTTP请求的5种方法
Jan 10 #Javascript
vue实现压缩图片预览并上传功能(promise封装)
Jan 10 #Javascript
微信小程序地图(map)组件点击(tap)获取经纬度的方法
Jan 10 #Javascript
最简单的JS实现json转csv的方法
Jan 10 #Javascript
puppeteer实现html截图的示例代码
Jan 10 #Javascript
其实你可以少写点if else与switch(推荐)
Jan 10 #Javascript
微信小程序提取公用函数到util.js及使用方法示例
Jan 10 #Javascript
You might like
PHP依赖倒置(Dependency Injection)代码实例
2014/10/11 PHP
laravel5创建service provider和facade的方法详解
2016/07/26 PHP
Laravel实现定时任务的示例代码
2017/08/10 PHP
Laravel框架中缓存的使用方法分析
2019/09/06 PHP
使用laravel和ECharts实现折线图效果的例子
2019/10/09 PHP
Windows Live的@live.com域名注册漏洞 利用代码
2006/12/27 Javascript
表单元素事件 (Form Element Events)
2009/07/17 Javascript
javascript中&quot;/&quot;运算符常见错误
2010/10/13 Javascript
JavaScript加强之自定义event事件
2013/09/21 Javascript
node.js中的fs.symlink方法使用说明
2014/12/15 Javascript
基于jquery实现下拉框美化特效
2016/02/02 Javascript
取消Bootstrap的dropdown-menu点击默认关闭事件方法
2018/08/10 Javascript
node.js 模块和其下载资源的镜像设置的方法
2018/09/06 Javascript
详解React 的几种条件渲染以及选择
2018/10/23 Javascript
js针对图片加载失败的处理方法分析
2019/08/24 Javascript
关于ligerui子页面关闭后,父页面刷新,重新加载的方法
2019/09/27 Javascript
详解Vue之事件处理
2020/07/10 Javascript
[43:24]VG vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
使用Python求解最大公约数的实现方法
2015/08/20 Python
python实现简易云音乐播放器
2018/01/04 Python
Django+Xadmin构建项目的方法步骤
2019/03/06 Python
详解python执行shell脚本创建用户及相关操作
2019/04/11 Python
Django MEDIA的配置及用法详解
2019/07/25 Python
Python+Pyqt实现简单GUI电子时钟
2021/02/22 Python
详解Python可视化神器Yellowbrick使用
2019/11/11 Python
python-web根据元素属性进行定位的方法
2019/12/13 Python
Python实现AI自动抠图实例解析
2020/03/05 Python
使用Pycharm在运行过程中,查看每个变量的操作(show variables)
2020/06/08 Python
keras实现基于孪生网络的图片相似度计算方式
2020/06/11 Python
德国家用电器购物网站:Premiumshop24
2019/08/22 全球购物
大学生就业自荐信
2013/10/26 职场文书
学校与家长安全责任书
2014/07/23 职场文书
个人学习党的群众路线教育实践活动心得体会
2014/11/05 职场文书
小学生安全教育心得体会
2016/01/15 职场文书
生产实习心得体会范文
2016/01/22 职场文书
vue+elementui 实现新增和修改共用一个弹框的完整代码
2021/06/08 Vue.js