微信公众号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继承的实现代码
Aug 05 Javascript
学习从实践开始之jQuery插件开发 菜单插件开发
May 03 Javascript
在页面加载完成后通过jquery给多个span赋值
May 21 Javascript
常用jQuery代码分享
Jul 14 Javascript
浅谈js函数中的实例对象、类对象、局部变量(局部函数)
Nov 20 Javascript
three.js实现围绕某物体旋转
Jan 25 Javascript
vue父组件通过props如何向子组件传递方法详解
Aug 16 Javascript
微信小程序实现复选框效果
Dec 28 Javascript
详解Vue.js 作用域、slot用法(单个slot、具名slot)
Oct 15 Javascript
详解钉钉小程序组件之自定义模态框(弹窗封装实现)
Mar 07 Javascript
微信小程序scroll-view实现滚动到锚点左侧导航栏点餐功能(点击种类,滚动到锚点)
Jun 11 Javascript
使用js原生实现年份轮播选择效果实例
Jan 12 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截取字符串函数分享(截取中文字符串)
2014/03/13 PHP
详解WordPress中创建和添加过滤器的相关PHP函数
2015/12/29 PHP
PHP内存缓存功能memcached示例
2016/10/19 PHP
PHP连接sftp并下载文件的方法教程
2018/08/26 PHP
关于二级域名下使用一级域名下的COOKIE的问题
2011/11/07 Javascript
js onclick事件传参讲解
2013/11/06 Javascript
jQuery避免$符和其他JS库冲突的方法对比
2014/02/20 Javascript
jQuery 中DOM 操作详解
2015/01/13 Javascript
JavaScript的原型继承详解
2015/02/15 Javascript
javascript中eval函数用法分析
2015/04/25 Javascript
jQuery Validate表单验证深入学习
2015/12/18 Javascript
两种方法解决javascript url post 特殊字符转义 + &amp; #
2016/04/13 Javascript
JavaScript实现时间倒计时跳转(推荐)
2016/06/28 Javascript
浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法
2017/02/06 Javascript
bootstrap常用组件之头部导航实现代码
2017/04/20 Javascript
angularjs项目的页面跳转如何实现(5种方法)
2017/05/25 Javascript
微信小程序 本地图片按照屏幕尺寸处理
2017/08/04 Javascript
vue组件中使用iframe元素的示例代码
2017/12/13 Javascript
vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】
2018/11/08 Javascript
Vue.js的动态组件模板的实现
2018/11/26 Javascript
全面解析JavaScript Module模式
2020/07/24 Javascript
浅谈vue获得后台数据无法显示到table上面的坑
2020/08/13 Javascript
[04:15]DOTA2-DPC中国联赛 正赛 Ehome vs Aster 选手采访
2021/03/11 DOTA
python3利用Socket实现通信的方法示例
2019/05/06 Python
如何用C代码给Python写扩展库(Cython)
2019/05/17 Python
python logging通过json文件配置的步骤
2020/04/27 Python
Python利用imshow制作自定义渐变填充柱状图(colorbar)
2020/12/10 Python
印尼太阳百货公司网站:Matahari
2018/02/04 全球购物
普通PHP程序员笔试题
2016/01/01 面试题
劳动纠纷调解协议书格式
2014/11/30 职场文书
文明倡议书
2015/01/19 职场文书
小学母亲节活动总结
2015/02/10 职场文书
2015年采购部工作总结
2015/04/23 职场文书
2015年机关纠风工作总结
2015/05/15 职场文书
公司员工管理制度
2015/08/04 职场文书
一文了解MySQL二级索引的查询过程
2022/02/24 MySQL