微信公众号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 篱式条件判断
Aug 22 Javascript
JS比较两个时间大小的简单示例代码
Dec 20 Javascript
javascript教程之不完整的继承(js原型链)
Jan 13 Javascript
node.js中的socket.io的广播消息
Dec 15 Javascript
原生javascript实现图片弹窗交互效果
Jan 12 Javascript
JavaScript检测实例属性, 原型属性
Feb 04 Javascript
javascript原型模式用法实例详解
Jun 04 Javascript
JS递归遍历对象获得Value值方法技巧
Jun 14 Javascript
微信小程序request出现400的问题解决办法
May 23 Javascript
使用原生js写ajax实例(推荐)
May 31 Javascript
bootstrap 点击空白处popover弹出框隐藏实例
Jan 24 Javascript
Vue结合后台导入导出Excel问题详解
Feb 19 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
phpMyAdmin 链接表的附加功能尚未激活的问题
2010/08/01 PHP
ThinkPHP中I(),U(),$this-&gt;post()等函数用法
2014/11/22 PHP
Codeigniter实现发送带附件的邮件
2015/03/19 PHP
PHP7 新增功能
2021/03/09 PHP
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
2009/12/02 Javascript
javascript与CSS复习(二)
2010/06/29 Javascript
javascript的数据类型、字面量、变量介绍
2012/05/23 Javascript
js比较和逻辑运算符的介绍
2013/03/10 Javascript
JS之Date对象和获取系统当前时间详解
2014/01/13 Javascript
html的DOM中document对象anchors集合用法实例
2015/01/21 Javascript
thinkphp 表名 大小写 窍门
2015/02/01 Javascript
jquery原理以及学习技巧介绍
2015/11/11 Javascript
自动完成的搜索框javascript实现
2016/02/26 Javascript
AngularJS ng-bind-template 指令详解
2016/07/30 Javascript
JavaScript常用代码书写规范的超全面总结
2016/09/11 Javascript
详解vue+vueRouter+webpack的简单实例
2017/06/17 Javascript
浅谈angular.js跨域post解决方案
2017/08/30 Javascript
vue 自定义全局方法,在组件里面的使用介绍
2018/02/28 Javascript
使用D3.js+Vue实现一个简单的柱形图
2018/08/05 Javascript
微信小程序canvas分享海报功能
2019/10/31 Javascript
javascript设计模式 ? 解释器模式原理与用法实例分析
2020/04/17 Javascript
[02:42]决战东方!DOTA2亚洲邀请赛重启荣耀之争
2017/03/17 DOTA
使用Python的Supervisor进行进程监控以及自动启动
2014/05/29 Python
python实现根据月份和日期得到星座的方法
2015/03/27 Python
python读取excel表格生成erlang数据
2017/08/26 Python
Python3 把一个列表按指定数目分成多个列表的方式
2019/12/25 Python
Python类如何定义私有变量
2020/02/03 Python
Pandas缺失值2种处理方式代码实例
2020/06/13 Python
vscode调试django项目的方法
2020/08/06 Python
加拿大鞋子连锁店:Town Shoes
2016/09/26 全球购物
快时尚眼镜品牌,全国连锁眼镜店:LOHO眼镜生活
2018/10/08 全球购物
STP协议的主要用途是什么?为什么要用STP
2012/12/20 面试题
计算机开发个人求职信范文
2013/09/26 职场文书
2015年团队工作总结范文
2015/05/04 职场文书
小学生暑假安全保证书
2015/07/13 职场文书
中秋节作文(五年级)之关于月亮
2019/09/11 职场文书