微信小程序 支付功能(前端)的实现


Posted in Javascript onMay 24, 2017

微信小程序 支付功能(前端)的实现

只提供微信小程序端代码:

var app = getApp();
Page({
  data: {},
  onLoad: function (options) {
    // 页面初始化 options为页面跳转所带来的参数
    var that = this
    //登陆获取code
    wx.login({
      success: function (res) {
        console.log(res.code)
        //获取openid
        that.getOpenId(res.code)
      }
    });
  },
  getOpenId: function (code) {
    var that = this;
    wx.request({
      url: "https://api.weixin.qq.com/sns/jscode2session?appid=小程序appid&secret=小程序应用密钥&js_code=" + code + "&grant_type=authorization_code",
      data: {},
      method: 'GET',
      success: function (res) {
        that.generateOrder(res.data.openid)
      },
      fail: function () {
        // fail
      },
      complete: function () {
        // complete
      }
    })
  },
  /**生成商户订单 */
  generateOrder: function (openid) {
    var that = this
    //统一支付
    wx.request({
      url: '后台路径',
      method: 'GET',
      data: {
        gfee: '商品价钱',
        gname: '商品名称',
        openId:openid
        (商品价钱和商品名称根据自身需要是否传值,openid为必传)
      },
      success: function (res) {
        var pay = res.data
        //发起支付
        var timeStamp = pay[0].timeStamp;
        var packages = pay[0].package;
        var paySign = pay[0].paySign;
        var nonceStr = pay[0].nonceStr;
        var param = { "timeStamp": timeStamp, "package": packages, "paySign": paySign, "signType": "MD5", "nonceStr": nonceStr };
        that.pay(param)
      },
    })
  },

  /* 支付  */
  pay: function (param) {
    console.log("支付")
    console.log(param)
    wx.requestPayment({
      timeStamp: param.timeStamp,
      nonceStr: param.nonceStr,
      package: param.package,
      signType: param.signType,
      paySign: param.paySign,
      success: function (res) {
        // success
        wx.navigateBack({
          delta: 1, // 回退前 delta(默认为1) 页面
          success: function (res) {
            wx.showToast({
              title: '支付成功',
              icon: 'success',
              duration: 2000
            })
          },
          fail: function () {
            // fail

          },
          complete: function () {
            // complete
          }
        })
      },
      fail: function (res) {
        // fail
      },
      complete: function () {
        // complete
      }
    })
  }
})

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
读jQuery之十三 添加事件和删除事件的核心方法
Aug 23 Javascript
关于jquery ajax 调用带参数的webservice返回XML数据一个小细节
Jul 31 Javascript
js 获取和设置css3 属性值的实现方法
May 06 Javascript
Javascript基础教程之比较null和undefined值
May 16 Javascript
JQuery EasyUI学习教程之datagrid 添加、修改、删除操作
Jul 09 Javascript
详解vue数据渲染出现闪烁问题
Jun 29 Javascript
基于匀速运动的实例讲解(侧边栏,淡入淡出)
Oct 17 Javascript
mpvue构建小程序的方法(步骤+地址)
May 22 Javascript
微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能
Jan 22 Javascript
基于Vue实现平滑过渡的拖拽排序功能
Jun 12 Javascript
js实现鼠标点击飘爱心效果
Aug 19 Javascript
JavaScript函数柯里化
Nov 07 Javascript
微信小程序 选项卡的简单实例
May 24 #Javascript
JS回调函数基本定义与用法实例分析
May 24 #Javascript
解决jQuery ajax动态新增节点无法触发点击事件的问题
May 24 #jQuery
详解前后端分离之VueJS前端
May 24 #Javascript
JQuery Ajax 异步操作之动态添加节点功能
May 24 #jQuery
ES6新特性之类(Class)和继承(Extends)相关概念与用法分析
May 24 #Javascript
使用jQuery.Pin垂直滚动时固定导航
May 24 #jQuery
You might like
使用 eAccelerator加速PHP代码的目的
2007/03/16 PHP
PHP读取xml方法介绍
2013/01/12 PHP
PHP使用GIFEncoder类生成的GIF动态图片验证码
2014/07/01 PHP
jquery判断单个复选框是否被选中的代码
2009/09/03 Javascript
js 巧妙去除数组中的重复项
2010/01/25 Javascript
深入理解JavaScript系列(16) 闭包(Closures)
2012/04/12 Javascript
类似php的js数组的in_array函数自定义方法
2013/12/27 Javascript
jQuery实现鼠标滑过Div层背景变颜色的方法
2015/02/17 Javascript
Javascript中判断对象是否为空
2015/06/10 Javascript
js学习笔记之事件处理模型
2016/10/31 Javascript
js实现显示手机号码效果
2017/03/09 Javascript
JS中将多个逗号替换为一个逗号的实现代码
2017/06/23 Javascript
switchery按钮的使用方法
2017/12/18 Javascript
JS桶排序的简单理解与实现方法示例
2019/11/25 Javascript
[02:51]2018年度DOTA2最佳中单位选手-完美盛典
2018/12/17 DOTA
python控制台英汉汉英电子词典
2020/04/23 Python
Python文件读取的3种方法及路径转义
2015/06/21 Python
python实现查找两个字符串中相同字符并输出的方法
2015/07/11 Python
总结Python编程中函数的使用要点
2016/03/20 Python
python之文件的读写和文件目录以及文件夹的操作实现代码
2016/08/28 Python
详解Python中表达式i += x与i = i + x是否等价
2017/02/08 Python
python使用两种发邮件的方式smtp和outlook示例
2017/06/02 Python
使用python读取txt文件的内容,并删除重复的行数方法
2018/04/18 Python
Python文件监听工具pyinotify与watchdog实例
2018/10/15 Python
python获取指定日期范围内的每一天,每个月,每季度的方法
2019/08/08 Python
Python高级特性——详解多维数组切片(Slice)
2019/11/26 Python
Python 实现一个简单的web服务器
2021/01/03 Python
CSS3使用transition实现的鼠标悬停淡入淡出
2015/01/09 HTML / CSS
FragranceNet中文网:北美健康美容线上零售商
2020/08/26 全球购物
类、抽象类、接口的差异
2016/06/13 面试题
2019年年中职场激励人心语录30条
2019/08/07 职场文书
一个成功的互联网创业项目,必须满足这些要求
2019/08/23 职场文书
导游词之江西赣州
2019/10/15 职场文书
Java数据结构之链表相关知识总结
2021/06/18 Java/Android
JavaScript实现简单计时器
2021/06/22 Javascript
python读取mnist数据集方法案例详解
2021/09/04 Python