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


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 相关文章推荐
显示、隐藏密码
Jul 01 Javascript
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
Mar 05 Javascript
JS图片根据鼠标滚动延时加载的实例代码
Jul 13 Javascript
写得不错的jquery table鼠标经过变色代码
Sep 27 Javascript
javascript类型转换使用方法
Feb 08 Javascript
基于Node.js实现nodemailer邮件发送
Jan 26 Javascript
非常实用的js验证框架实现源码 附原理方法
Jun 08 Javascript
深入理解Commonjs规范及Node模块实现
May 17 Javascript
Mac系统下Webstorm快捷键整理大全
May 28 Javascript
详解使用Node.js 将txt文件转为Excel文件
Jul 05 Javascript
使用axios请求接口,几种content-type的区别详解
Oct 29 Javascript
ESLint 是如何检查 .vue 文件的
Nov 30 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内核探索:变量概述
2014/01/30 PHP
PHP实现QQ、微信和支付宝三合一收款码实例代码
2018/02/19 PHP
Javascript实例教程(19) 使用HoTMetal(5)
2006/12/23 Javascript
jquery 插件 任意位置浮动固定层
2008/12/25 Javascript
jQuery 相关控件的事件操作分解
2009/08/03 Javascript
风吟的小型JavaScirpt库 (FY.JS).
2010/03/09 Javascript
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
2010/09/19 Javascript
javascript(js)的小数点乘法除法问题详解
2014/03/07 Javascript
使用jquery制作弹出框效果
2015/04/03 Javascript
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
2016/07/05 Javascript
canvas学习之API整理笔记(二)
2016/12/29 Javascript
Ajax基础知识详解
2017/02/17 Javascript
vue实现app页面切换动画效果实例
2017/05/23 Javascript
在vue组件中使用axios的方法
2018/03/16 Javascript
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
2018/04/12 jQuery
微信小程序实现复选框效果
2018/12/28 Javascript
JavaScript惰性载入函数实例分析
2019/03/27 Javascript
微信小程序实现点击卡片 翻转效果
2019/09/04 Javascript
24行JavaScript代码实现Redux的方法实例
2019/11/17 Javascript
[05:20]2018DOTA2亚洲邀请赛主赛事第三日战况回顾 LGD率先挺进胜者组决赛
2018/04/06 DOTA
[45:10]NB vs Liquid Supermajor小组赛 A组胜者组决赛 BO3 第二场 6.2
2018/06/04 DOTA
Python3实现生成随机密码的方法
2014/08/23 Python
浅析Python基础-流程控制
2016/03/18 Python
python3编码问题汇总
2016/09/06 Python
python怎么判断素数
2020/07/01 Python
虚拟环境及venv和virtualenv的区别说明
2021/02/05 Python
娇韵诗法国官网:Clarins法国
2019/01/29 全球购物
第二课堂活动总结
2014/05/07 职场文书
银行求职信怎么写
2014/05/26 职场文书
四风对照检查材料范文
2014/09/27 职场文书
学生穿着不得体检讨书
2014/10/12 职场文书
孔庙导游词
2015/02/04 职场文书
法学专业求职信范文
2015/03/19 职场文书
老人与海读书笔记
2015/06/26 职场文书
Redis主从配置和底层实现原理解析(实战记录)
2021/06/30 Redis
Nginx代理Redis哨兵主从配置的实现
2022/07/15 Servers