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


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获取服务器时间的两个简单方法
Jan 08 Javascript
javascript模拟的Ping效果代码 (Web Ping)
Mar 13 Javascript
javascript 按键事件(兼容各浏览器)
Dec 20 Javascript
JS实现控制表格行内容垂直对齐的方法
Mar 30 Javascript
简单的jQuery banner图片轮播实例代码
Mar 04 Javascript
Jquery获取第一个子元素简单实例
Jun 02 Javascript
jQuery实现的placeholder效果完整实例
Aug 02 Javascript
js中数组的常用方法小结
Dec 30 Javascript
使用JavaScript实现一个小程序之99乘法表
Sep 21 Javascript
获取本机IP地址的实例(JavaScript / Node.js)
Nov 24 Javascript
vue+axios+mock.js环境搭建的方法步骤
Aug 28 Javascript
layui 弹出删除确认界面的实例
Sep 06 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
ie与session丢失(新窗口cookie丢失)实测及解决方案
2013/07/15 PHP
curl不使用文件存取cookie php使用curl获取cookie示例
2014/01/26 PHP
php禁用cookie后session设置方法分析
2016/10/19 PHP
浅谈laravel框架与thinkPHP框架的区别
2019/10/23 PHP
js查错流程归纳
2012/05/04 Javascript
javascript面向对象包装类Class封装类库剖析
2013/01/24 Javascript
AngularJS Ajax详解及示例代码
2016/08/17 Javascript
jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)
2016/08/25 Javascript
D3.js实现饼状图的方法详解
2016/09/21 Javascript
javascript实现文字无缝滚动
2016/12/27 Javascript
javascript中json对象json数组json字符串互转及取值方法
2017/04/19 Javascript
JavaScript函数表达式详解及实例
2017/05/05 Javascript
JS+CSS实现滚动数字时钟效果
2017/12/25 Javascript
vue中实现先请求数据再渲染dom分享
2018/03/17 Javascript
详解原生JS回到顶部
2019/03/25 Javascript
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
2019/05/22 Javascript
vue中filters 传入两个参数 / 使用两个filters的实现方法
2019/07/15 Javascript
vue-dplayer 视频播放器实例代码
2019/11/08 Javascript
简单了解常用的JavaScript 库
2020/07/16 Javascript
Python open读写文件实现脚本
2008/09/06 Python
Python实现的tcp端口检测操作示例
2018/07/24 Python
python 将大文件切分为多个小文件的实例
2019/01/14 Python
python实现给微信指定好友定时发送消息
2019/04/29 Python
Python龙贝格法求积分实例
2020/02/29 Python
keras读取训练好的模型参数并把参数赋值给其它模型详解
2020/06/15 Python
浅谈keras2 predict和fit_generator的坑
2020/06/17 Python
Python字符串的15个基本操作(小结)
2021/02/03 Python
EJB的激活机制
2013/10/25 面试题
导师工作推荐信范文
2014/05/17 职场文书
大学生学习计划书
2014/09/15 职场文书
2015年元旦联欢晚会活动总结
2014/11/28 职场文书
工艺技术员岗位职责
2015/02/04 职场文书
2015年村计划生育工作总结
2015/04/28 职场文书
Python实现byte转integer
2021/06/03 Python
RPM包方式安装Oracle21c的方法详解
2021/08/23 Oracle
Python实现Hash算法
2022/03/18 Python