微信公众号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 相关文章推荐
javascript编程起步(第六课)
Jan 10 Javascript
网站导致浏览器崩溃的原因总结(多款浏览器) 推荐
Apr 15 Javascript
基于JQuery的多标签实现代码
Sep 19 Javascript
滚动条响应鼠标滑轮事件实现上下滚动的js代码
Jun 30 Javascript
JQuery中的html()、text()、val()区别示例介绍
Sep 01 Javascript
jQuery实现指定区域外单击关闭指定层的方法【经典】
Jun 22 Javascript
javascript特效实现——当前时间和倒计时效果的简单实例
Jul 20 Javascript
使用JS正则表达式 替换括号,尖括号等
Nov 29 Javascript
微信小程序加载更多 点击查看更多
Nov 29 Javascript
JS正则表达式修饰符global(/g)用法分析
Dec 27 Javascript
angular ng-click防止重复提交实例
Jun 16 Javascript
canvas+gif.js打造自己的数字雨头像的示例代码
Oct 26 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把JPEG图片转换成Progressive JPEG的方法
2014/06/30 PHP
PHP判断是否连接上网络的方法
2015/07/01 PHP
php中的抽象方法和抽象类
2017/02/14 PHP
PHP与Perl之间知识点区别整理
2019/03/19 PHP
HTML-CSS群中单选引发的“事件”
2007/03/05 Javascript
JavaScipt基本教程之前言
2008/01/16 Javascript
javascript 动态修改样式和层叠样式表代码
2010/04/27 Javascript
一个基于jquery的图片切换效果
2010/07/06 Javascript
JS注册/移除事件处理程序(ExtJS应用程序设计实战)
2013/05/07 Javascript
基于JQuery的列表拖动排序实现代码
2013/10/01 Javascript
javascript 按键事件(兼容各浏览器)
2013/12/20 Javascript
js几秒以后倒计时跳转示例
2013/12/26 Javascript
jQuery中bind与live的用法及区别小结
2014/01/27 Javascript
通过location.replace禁止浏览器后退防止重复提交
2014/09/04 Javascript
js判断复选框是否选中及选中个数的实现代码
2016/05/30 Javascript
AngularJS  双向数据绑定详解简单实例
2016/10/20 Javascript
详解Jquery EasyUI tree 的异步加载(遍历指定文件夹,根据文件夹内的文件生成tree)
2017/02/11 Javascript
js弹出窗口简单实现代码
2017/03/22 Javascript
Vue中建立全局引用或者全局命令的方法
2017/08/21 Javascript
bootstrap table sum总数量统计实现方法
2017/10/29 Javascript
浅谈vuejs实现数据驱动视图原理
2018/02/23 Javascript
vue微信分享的实现(在当前页面分享其他页面)
2019/04/16 Javascript
Vue基本指令实例图文讲解
2021/02/25 Vue.js
讲解Python的Scrapy爬虫框架使用代理进行采集的方法
2016/02/18 Python
python爬虫模拟浏览器的两种方法实例分析
2019/12/09 Python
python基于pexpect库自动获取日志信息
2021/02/01 Python
利用CSS3参考手册和CSS3代码生成工具加速来学习网页制
2012/07/11 HTML / CSS
华丽的手绘陶瓷:MacKenzie-Childs
2017/02/04 全球购物
丝绸和人造花卉、植物和树木:Nearly Natural
2018/11/28 全球购物
大学生党课思想汇报
2013/12/29 职场文书
司法局群众路线教育实践活动开展情况总结
2014/10/25 职场文书
继承权公证书范本
2015/01/23 职场文书
2015学校图书管理员工作总结
2015/05/11 职场文书
运动会闭幕式通讯稿
2015/07/18 职场文书
校园音乐节目广播稿
2015/08/19 职场文书
《家庭教育》读后感3篇
2019/12/18 职场文书