微信公众号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 相关文章推荐
div当滚动到页面顶部的时候固定在顶部实例代码
May 27 Javascript
js螺旋动画效果的具体实例
Nov 15 Javascript
使用JavaScript进行进制转换将字符串转换为十进制
Sep 21 Javascript
关于验证码在IE中不刷新的快速解决方法
Sep 23 Javascript
js图片切换具体实现代码
Oct 13 Javascript
js前端实现多图图片上传预览的两个方法(推荐)
Nov 18 Javascript
Javascript中的 “&amp;” 和 “|” 详解
Feb 02 Javascript
JavaScript中双符号的运算详解
Mar 12 Javascript
使用Vue-Router 2实现路由功能实例详解
Nov 14 Javascript
Vue项目添加动态浏览器头部title的方法
Jul 11 Javascript
element-ui中select组件绑定值改变,触发change事件方法
Aug 24 Javascript
原生js实现自定义难度的扫雷游戏
Jan 22 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
将兴奋、喜悦和坎加斯带到戴安娜:亚马逊公主
2020/03/03 欧美动漫
Admin generator, filters and I18n
2011/10/06 PHP
php的array_multisort()使用方法介绍
2012/05/16 PHP
简单谈谈PHP中的include、include_once、require以及require_once语句
2016/04/23 PHP
php正则修正符用法实例详解
2016/12/29 PHP
JS+XML 省份和城市之间的联动实现代码
2009/10/14 Javascript
jQuery 三击事件实现代码
2013/09/11 Javascript
javascript生成随机大小写字母的方法
2014/02/20 Javascript
jQuery基于当前元素进行下一步的遍历
2014/05/20 Javascript
JavaScript字符串对象slice方法入门实例(用于字符串截取)
2014/10/16 Javascript
js学习之----深入理解闭包
2016/11/21 Javascript
karma+webpack搭建vue单元测试环境的方法示例
2018/05/24 Javascript
利用layer实现表单完美验证的方法
2019/09/26 Javascript
layui实现form表单同时提交数据和文件的代码
2019/10/25 Javascript
keep-alive不能缓存多层级路由菜单问题解决
2020/03/10 Javascript
解决vue中axios设置超时(超过5分钟)没反应的问题
2020/09/04 Javascript
webpack4从0搭建组件库的实现
2020/11/29 Javascript
python实现的各种排序算法代码
2013/03/04 Python
零基础写python爬虫之爬虫框架Scrapy安装配置
2014/11/06 Python
Python的__builtin__模块中的一些要点知识
2015/05/02 Python
mysql 之通过配置文件链接数据库
2017/08/12 Python
python numpy 一维数组转变为多维数组的实例
2018/07/02 Python
Python拼接微信好友头像大图的实现方法
2018/08/01 Python
python traceback捕获并打印异常的方法
2018/08/31 Python
在Python中使用defaultdict初始化字典以及应用方法
2018/10/31 Python
python实现五子棋小游戏
2020/03/25 Python
html5实现多文件的上传示例代码
2014/02/13 HTML / CSS
英国定做窗帘和纺织品面料一站式商店:Dekoria
2018/08/29 全球购物
助理政工师申报材料
2014/06/03 职场文书
大学军训自我鉴定大全
2014/09/18 职场文书
单位工作证明书格式
2014/10/04 职场文书
2014最新党员违纪检讨书
2014/10/12 职场文书
2014年化妆品销售工作总结
2014/12/01 职场文书
2014年保卫工作总结
2014/12/05 职场文书
对领导班子的意见和建议
2015/06/08 职场文书
python编程实现清理微信重复缓存文件
2021/11/01 Python