微信公众号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 相关文章推荐
jquery 操作iframe的几种方法总结
Dec 13 Javascript
JavaScript按位运算符的应用简析
Feb 04 Javascript
JavaScript实现的背景自动变色代码
Oct 17 Javascript
AngularJS动态绑定HTML的方法分析
Nov 07 Javascript
Vue.js第三天学习笔记(计算属性computed)
Dec 01 Javascript
javascript十六进制数字和ASCII字符之间的转换方法
Dec 27 Javascript
微信小程序 生命周期和页面的生命周期详细介绍
Jan 19 Javascript
CentOS环境中MySQL修改root密码方法
Jan 07 Javascript
微信小程序上传图片实例
May 28 Javascript
webpack4.x下babel的安装、配置及使用详解
Mar 07 Javascript
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
Sep 02 Javascript
JavaScript严格模式不支持八进制的问题讲解
Nov 07 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 $_SERVER相关参数判断是否支持Rewrite模块
2013/09/26 PHP
PHP数组操作简单案例分析
2016/10/15 PHP
最近项目写了一些js,水平有待提高
2009/01/31 Javascript
jQuery 自动增长的文本输入框实现代码
2010/04/02 Javascript
JavaScript 选中文字并响应获取的实现代码
2011/08/28 Javascript
返回上一页并自动刷新的JavaScript代码
2014/02/19 Javascript
零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门
2014/12/20 Javascript
js+html5实现canvas绘制镂空字体文本的方法
2015/06/05 Javascript
分享js粘帖屏幕截图到web页面插件screenshot-paste
2020/08/21 Javascript
node+vue实现用户注册和头像上传的实例代码
2017/07/20 Javascript
React-Native做一个文本输入框组件的实现代码
2017/08/10 Javascript
解决微信授权成功后点击按返回键出现空白页和报错的问题
2020/06/08 Javascript
Openlayers绘制聚合标注
2020/09/28 Javascript
如何在vue中使用kindeditor富文本编辑器
2020/12/19 Vue.js
Python的加密模块md5、sha、crypt使用实例
2014/09/28 Python
Python实现对比不同字体中的同一字符的显示效果
2015/04/23 Python
Python中super的用法实例
2015/05/28 Python
打包发布Python模块的方法详解
2016/09/18 Python
使用requests库制作Python爬虫
2018/03/25 Python
Python实现在某个数组中查找一个值的算法示例
2018/06/27 Python
Python 多维List创建的问题小结
2019/01/18 Python
关于Python内存分配时的小秘密分享
2019/09/05 Python
wxpython多线程防假死与线程间传递消息实例详解
2019/12/13 Python
解决django 向mysql中写入中文字符出错的问题
2020/05/18 Python
python 写一个文件分发小程序
2020/12/05 Python
西部世纪面试题
2014/12/05 面试题
秘书岗位职责
2013/11/18 职场文书
元旦红领巾广播稿
2014/02/19 职场文书
经典而简洁的婚礼主持词
2014/03/13 职场文书
活动策划求职信模板
2014/04/21 职场文书
税务职业生涯规划书范文
2014/09/16 职场文书
大学军训自我鉴定大全
2014/09/18 职场文书
债务授权委托书范本
2014/10/17 职场文书
2015年体育教师个人工作总结
2015/05/12 职场文书
新店开张宣传语
2015/07/13 职场文书
奠基仪式致辞
2015/07/30 职场文书