微信公众号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 相关文章推荐
一个对于Array的简单扩展
Oct 03 Javascript
动态创建样式表在各浏览器中的差异测试代码
Sep 13 Javascript
Javascript 遮罩层和加载效果代码
Aug 01 Javascript
基于jquery实现省市联动特效
Dec 17 Javascript
JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)
Nov 30 Javascript
js实现一个简单的数字时钟效果
Mar 29 Javascript
微信小程序 sha1 实现密码加密实例详解
Jul 06 Javascript
vue2.0 根据状态值进行样式的改变展示方法
Mar 13 Javascript
JS中创建自定义类型的常用模式总结【工厂模式,构造函数模式,原型模式,动态原型模式等】
Jan 19 Javascript
详解为element-ui的Select和Cascader添加弹层底部操作按钮
Feb 07 Javascript
vue组件是如何解析及渲染的?
Jan 13 Vue.js
浅谈Web Storage API的使用
Jun 23 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连接sql server 2005环境配置及问题解决
2014/08/08 PHP
详解yii2实现分库分表的方案与思路
2017/02/03 PHP
swoole锁的机制代码实例讲解
2021/03/04 PHP
jQuery对html元素取值与赋值的方法
2013/11/20 Javascript
jQuery通过控制节点实现仅在前台通过get方法完成参数传递
2015/02/02 Javascript
如何用JavaScript实现动态修改CSS样式表
2016/05/20 Javascript
jQuery原理系列-css选择器的简单实现
2016/06/07 Javascript
JavaScript ES5标准中新增的Array方法
2016/06/28 Javascript
vue.js学习之递归组件
2016/12/13 Javascript
微信小程序 解决请求服务器手机预览请求不到数据的方法
2017/01/04 Javascript
基于JavaScript实现的折半查找算法示例
2017/04/14 Javascript
jQuery选择器之子元素过滤选择器
2017/09/28 jQuery
jQuery封装animate.css的实例
2018/01/04 jQuery
jQuery实现的简单图片轮播效果完整示例
2018/02/08 jQuery
nodejs中内置模块fs,path常见的用法说明
2020/11/07 NodeJs
python的re模块应用实例
2014/09/26 Python
Python contextlib模块使用示例
2015/02/18 Python
python简单实现基数排序算法
2015/05/16 Python
解读Python编程中的命名空间与作用域
2015/10/16 Python
python中模块的__all__属性详解
2017/10/26 Python
浅谈Python中的私有变量
2018/02/28 Python
python paramiko利用sftp上传目录到远程的实例
2019/01/03 Python
Python实现的矩阵转置与矩阵相乘运算示例
2019/03/26 Python
用Python实现BP神经网络(附代码)
2019/07/10 Python
用python写一个定时提醒程序的实现代码
2019/07/22 Python
Python os模块常用方法和属性总结
2020/02/20 Python
浅谈cv2.imread()和keras.preprocessing中的image.load_img()区别
2020/06/12 Python
Python实现封装打包自己写的代码,被python import
2020/07/12 Python
Python如何创建装饰器时保留函数元信息
2020/08/07 Python
Tripadvisor新西兰:阅读评论,比较价格和酒店预订
2018/02/10 全球购物
Wolford法国官网:奥地利奢侈内衣品牌
2020/08/11 全球购物
办公室主任主任岗位责任制
2014/02/11 职场文书
2014年圣诞节促销方案
2014/03/14 职场文书
搞笑的婚礼主持词
2015/06/29 职场文书
《这片土地是神圣的》教学反思
2016/02/16 职场文书
DQL数据查询语句使用示例
2022/12/24 MySQL