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


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 相关文章推荐
Prototype使用指南之form.js
Jan 10 Javascript
JS跨域代码片段
Aug 30 Javascript
Jquery中LigerUi的弹出编辑框(实现方法)
Jul 09 Javascript
jQuery$命名冲突怎么办如何解决
Jan 16 Javascript
比较常见的javascript中定义函数的区别
Nov 09 Javascript
js实现继承的5种方式
Dec 01 Javascript
完美解决spring websocket自动断开连接再创建引发的问题
Mar 02 Javascript
bootstrap table表格使用方法详解
Apr 26 Javascript
JS简单实现点击按钮或文字显示遮罩层的方法
Apr 27 Javascript
完美解决mui框架off-canvas侧滑超出部分隐藏无法滚动的问题
Jan 25 Javascript
JS实现方形抽奖效果
Aug 27 Javascript
js回到页面指定位置的三种方式
Dec 17 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
用mysql触发器自动更新memcache的实现代码
2009/10/11 PHP
php GeoIP的使用教程
2011/03/09 PHP
php中使用cookie来保存用户登录信息的实现代码
2012/03/08 PHP
教你如何解密 “ PHP 神盾解密工具 ”
2014/06/20 PHP
PHP数组与对象之间使用递归实现转换的方法
2015/06/24 PHP
php实现无限级分类查询(递归、非递归)
2016/03/10 PHP
php实现的中秋博饼游戏之绘制骰子图案功能示例
2017/11/06 PHP
50个优秀经典PHP算法大集合 附源码
2020/08/26 PHP
jquery设置按钮停顿3秒不可用
2014/03/07 Javascript
高性能JavaScript模板引擎实现原理详解
2015/02/05 Javascript
JavaScript学习小结之被嫌弃的eval函数和with语句实例详解
2016/08/01 Javascript
js判断请求的url是否可访问,支持跨域判断的实现方法
2016/09/17 Javascript
js中自定义react数据验证组件实例详解
2018/10/19 Javascript
jQuery基于随机数解决中午吃什么去哪吃问题示例
2018/12/29 jQuery
发布订阅模式在vue中的实际运用实例详解
2019/06/09 Javascript
使用JavaScript获取Django模板指定键值数据
2020/05/27 Javascript
vue 实现根据data中的属性值来设置不同的样式
2020/08/04 Javascript
[01:00:54]TI4正赛第二日开场
2014/07/20 DOTA
[03:22]DSPL第一期精彩集锦:酷炫到底!
2014/11/07 DOTA
Python操作sqlite3快速、安全插入数据(防注入)的实例
2014/04/26 Python
Python实现简单截取中文字符串的方法
2015/06/15 Python
简单了解python反射机制的一些知识
2019/07/13 Python
numpy ndarray 按条件筛选数组,关联筛选的例子
2019/11/26 Python
Pycharm远程连接服务器并实现代码同步上传更新功能
2020/02/25 Python
如何安装并在pycharm使用selenium的方法
2020/04/30 Python
使用keras实现非线性回归(两种加激活函数的方式)
2020/07/05 Python
canvas绘制图片drawImage使用方法
2020/09/15 HTML / CSS
印尼披萨外送专家:Domino’s Pizza印尼
2017/12/28 全球购物
Giglio英国站:意大利奢侈品购物网
2018/03/06 全球购物
介绍一下UNIX启动过程
2013/11/14 面试题
食品流通安全承诺书
2014/05/22 职场文书
世界环境日活动总结
2015/02/11 职场文书
2015年党建工作总结
2015/03/30 职场文书
2015年超市收银员工作总结
2015/04/25 职场文书
假如给我三天光明:舟逆水而行,人遇挫而达 
2019/10/29 职场文书
Python list列表删除元素的4种方法
2021/11/01 Python