小程序调用微信支付的方法


Posted in Javascript onSeptember 26, 2019

本文实例为大家分享了小程序调用微信支付的具体代码,供大家参考,具体内容如下

首先调用小程序wx.login登录接口  获取用户code

将code作为参数  传给后端  调用后端接口wechat/pay/prepay

获取后端  这五个返回值

nonceStr 
package2
paySign 
signType
timeStamp

wx.login({
   success: function (res) {
    var userId = wx.getStorageSync('userId');
    var passw = userId + orderId;
    console.log(passw)
    var password = util.sha1(passw);
    //console.log(res) //获取用户的code 微信返回的值 
    wx.request({
     url: url + 'wechat/pay/prepay',
     method: "POST",
     header: {
      'content-type': 'application/json',
     },
     data: {
      code: res.code, //微信返的code
      userId: userId, //登录注册时后端返给我的
      orderId: orderId, //用户提交时后端返给我的工单号
      sign: password, //后端要求的serId + orderId加密
     },
     success: function (res) {
      // if (res.data.resultCode == "000000"){
       nonceStr = res.data.data.nonceStr;
       package2 = res.data.data.package;
       paySign = res.data.data.paySign;
       signType = res.data.data.signType;
       timeStamp = res.data.data.timeStamp;
       that.pay2()
      // }
       console.log(res.data.data.nonceStr)
       console.log(res.data.data.package)
       console.log(res.data.data.paySign)
       console.log(res.data.data.signType)
       console.log(res.data.data.timeStamp)
     },
     fail(err) {
      console.log(err)
     }
    })
   },
   fail(errs) {
    console.log(errs)
   }
  })

成功返回后,用户点击支付,调用微信支付接口wx.requestPayment:

后端设置好金额,用户调用即可支付

pay2() {
  wx.requestPayment(
   {
    timeStamp: timeStamp, //时间戳
    nonceStr: nonceStr, //随机字符串
    package: package2, //统一下单接口返回的 prepay_id 参数值
    signType: signType, //签名类型
    paySign: paySign, //签名
    success(res) {
     console.log(res)
     wx.navigateTo({
       url: '../successful/successful'
      })
    },
    fail(res) {
     console.log(res)
    }
   })
 },

最后我们的项目在调用微信wx.requestPayment 支付接口时,在success成功函数里请求了我方后端接口,获取状态码,判断是否支付成功。因为用户支付给微信,成功之后,只有用户能够看到,我方后端是获取不到是否支付成功的,请求这个接口就是这个目的。在微信请求支付成功之后,请求后端获取返回值。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 判断 enter 事件
Feb 12 Javascript
jquery 多行滚动代码(附详细解释)
Jun 17 Javascript
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
Apr 03 Javascript
node.js中的fs.chmodSync方法使用说明
Dec 18 Javascript
angularJS中router的使用指南
Feb 09 Javascript
js实现索引图片切换效果
Nov 21 Javascript
js实现交通灯效果
Jan 13 Javascript
解决canvas画布使用fillRect()时高度出现双倍效果的问题
Aug 03 Javascript
利用js给datalist或select动态添加option选项的方法
Jan 25 Javascript
jQuery 防止相同的事件快速重复触发方法
Feb 08 jQuery
基于vue-cli搭建多模块且各模块独立打包的项目
Jun 12 Javascript
vue 源码解析之虚拟Dom-render
Aug 26 Javascript
细说webpack6 Babel的使用详解
Sep 26 #Javascript
微信小程序实现拖拽功能
Sep 26 #Javascript
vue用BMap百度地图实现即时搜索功能
Sep 26 #Javascript
layui.tree组件的使用以及搜索节点功能的实现
Sep 26 #Javascript
微信小程序点击列表跳转到对应详情页过程解析
Sep 26 #Javascript
vue+element tabs选项卡分页效果
Jun 29 #Javascript
layui实现根据table数据判断按钮显示情况的方法
Sep 26 #Javascript
You might like
使用 php4 加速 web 传输
2006/10/09 PHP
PHP中的排序函数sort、asort、rsort、krsort、ksort区别分析
2014/08/18 PHP
PHP实现基于面向对象的mysqli扩展库增删改查操作工具类
2017/07/18 PHP
PDO::query讲解
2019/01/29 PHP
文件编码导致jquery失效的解决方法
2013/06/26 Javascript
javascript使用window.open提示“已经计划系统关机”的原因
2014/08/15 Javascript
jQuery动画出现连续触发、滞后反复执行的解决方法
2015/01/28 Javascript
jquery获取节点名称
2015/04/26 Javascript
js实现超酷的照片墙展示效果图附源码下载
2015/10/08 Javascript
学习javascript的闭包,原型,和匿名函数之旅
2015/10/18 Javascript
探讨JavaScript标签位置的存放与功能有无关系
2016/01/15 Javascript
微信小程序技巧之show内容展示,上传文件编码问题
2017/01/23 Javascript
Mint UI 基于 Vue.js 移动端组件库
2017/11/07 Javascript
微信小程序倒计时功能实例代码
2018/07/17 Javascript
JS获取月的第几周和年的第几周实例代码
2018/12/05 Javascript
vue生命周期与钩子函数简单示例
2019/03/13 Javascript
详解JavaScript作用域和作用域链
2019/03/19 Javascript
简单谈谈javascript高级特性
2019/09/04 Javascript
python下如何让web元素的生成更简单的分析
2008/07/17 Python
Python中的高级函数map/reduce使用实例
2015/04/13 Python
Python入门_浅谈逻辑判断与运算符
2017/05/16 Python
Python 3实战爬虫之爬取京东图书的图片详解
2017/10/09 Python
python画折线图的程序
2018/07/26 Python
浅谈flask源码之请求过程
2018/07/26 Python
Python中的字符串切片(截取字符串)的详解
2019/05/15 Python
numpy 矩阵形状调整:拉伸、变成一位数组的实例
2020/06/18 Python
Python同时处理多个异常的方法
2020/07/28 Python
python pyg2plot的原理知识点总结
2021/02/28 Python
css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
2014/10/10 HTML / CSS
用CSS3的box-reflect设置文字倒影效果的方法讲解
2016/03/07 HTML / CSS
暑假家长评语大全
2014/04/17 职场文书
销售竞赛活动方案
2014/08/23 职场文书
2015年新学期寄语
2015/02/26 职场文书
虎兄虎弟观后感
2015/06/12 职场文书
搞笑的婚礼主持词
2015/06/29 职场文书
yolov5返回坐标的方法实例
2022/03/17 Python