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


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 相关文章推荐
js截取小数点后几位的写法
Nov 14 Javascript
AngularJS表单编辑提交功能实例
Feb 13 Javascript
javascript中使用new与不使用实例化对象的区别
Jun 22 Javascript
JS实现文档加载完成后执行代码
Jul 09 Javascript
使用Javascript监控前端相关数据的代码
Oct 27 Javascript
javascript判断firebug是否开启的方法
Nov 23 Javascript
jQuery插件JWPlayer视频播放器用法实例分析
Jan 11 Javascript
JS引用传递与值传递的区别与用法分析
Jun 01 Javascript
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
Dec 05 jQuery
JS实现时间校验的代码
May 25 Javascript
vue常用高阶函数及综合实例
Feb 25 Vue.js
Vue过滤器(filter)实现及应用场景详解
Jun 15 Vue.js
微信小程序 选项卡的简单实例
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
PHP调用三种数据库的方法(3)
2006/10/09 PHP
php中var_export与var_dump的区别分析
2010/08/21 PHP
php连接odbc数据源并保存与查询数据的方法
2014/12/24 PHP
PHP二维数组实现去除重复项的方法【保留各个键值】
2017/12/21 PHP
JQuery与iframe交互实现代码
2009/12/24 Javascript
10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)
2011/06/08 Javascript
js两行代码按指定格式输出日期时间
2011/10/21 Javascript
DOM 中的事件处理介绍
2012/01/18 Javascript
JS左右无缝滚动(一般方法+面向对象方法)
2012/08/17 Javascript
JS 屏蔽按键效果与改变按键效果的示例代码
2013/12/24 Javascript
网站内容禁止复制和粘贴、另存为的js代码
2014/02/26 Javascript
使用JS画图之点、线、面
2015/01/12 Javascript
jQuery基于ajax实现带动画效果无刷新柱状图投票代码
2015/08/10 Javascript
jquery实现清新实用的网页菜单效果
2015/08/28 Javascript
jquery拖拽效果完整实例(附demo源码下载)
2016/01/14 Javascript
详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
2017/01/10 Javascript
ES6新特性之Object的变化分析
2017/03/31 Javascript
AngularJS表单验证功能
2017/10/19 Javascript
vue实现同一个页面可以有多个router-view的方法
2018/09/20 Javascript
vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)
2019/06/04 Javascript
django2 快速安装指南分享
2018/01/05 Python
Python实现的批量修改文件后缀名操作示例
2018/12/07 Python
海淘零差价,宝贝全球购: 宝贝格子
2016/08/24 全球购物
PatPat阿根廷:妈妈们的购物平台
2019/05/30 全球购物
世界顶级户外运动品牌折扣网站:LeftLane Sports
2019/06/12 全球购物
德国便宜的宠物店:Brekz.de
2020/10/23 全球购物
《猴子种树》教学反思
2014/02/14 职场文书
大学学习个人的自我评价
2014/02/18 职场文书
幼儿园教研活动总结
2014/04/30 职场文书
讲座通知范文
2015/04/23 职场文书
毕业答辩开场白范文
2015/05/27 职场文书
创业计划书之美容店
2019/09/16 职场文书
四年级作文之植物
2019/09/20 职场文书
使用vue-element-admin框架从后端动态获取菜单功能的实现
2021/04/29 Vue.js
python中的3种定义类方法
2021/11/27 Python
tomcat默认最大连接数及相关调整方法
2022/05/06 Servers