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


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 相关文章推荐
javascript 简练的几个函数
Aug 29 Javascript
Js 去掉字符串中的空格(实现代码)
Nov 19 Javascript
js中哈希表的几种用法总结
Jan 28 Javascript
三种动态加载js的jquery实例代码另附去除js方法
Apr 30 Javascript
原生javascript实现拖动元素示例代码
Sep 01 Javascript
JavaScript 表单处理实现代码
Apr 13 Javascript
深入理解jQuery 事件处理
Jun 14 Javascript
vue.js实现点击后动态添加class及删除同级class的实现代码
Apr 04 Javascript
node实现的爬虫功能示例
May 04 Javascript
vue filters的使用详解
Jun 11 Javascript
优雅的在React项目中使用Redux的方法
Nov 10 Javascript
基于Node.js搭建hexo博客过程详解
Jun 25 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
改造一台复古桌面收音机
2021/03/02 无线电
上海地方志办公室-上海电子仪表工业志
2021/03/04 无线电
LotusPhp笔记之:基于ObjectUtil组件的使用分析
2013/05/06 PHP
thinkPHP实现瀑布流的方法
2014/11/29 PHP
JavaScript实际应用:innerHTMl和确认提示的使用
2006/06/22 Javascript
JavaScript 闭包深入理解(closure)
2009/05/27 Javascript
常用Extjs工具:Extjs.util.Format使用方法
2012/03/22 Javascript
javascript全局变量封装模块实现代码
2012/11/28 Javascript
浮动的div自适应居中显示的js代码
2013/12/23 Javascript
JavaScript Serializer序列化时间处理示例
2014/07/31 Javascript
jQuery插件开发精品教程(让你的jQuery更上一个台阶)
2015/11/07 Javascript
以JavaScript来实现WordPress中的二级导航菜单的方法
2015/12/14 Javascript
JS表格组件神器bootstrap table详解(强化版)
2016/05/26 Javascript
JavaScript必知必会(六) delete in instanceof
2016/06/08 Javascript
简单谈谈JS数组中的indexOf方法
2016/10/13 Javascript
工作中常用到的ES6语法
2018/09/04 Javascript
详解Vue中数组和对象更改后视图不刷新的问题
2018/09/21 Javascript
vue2使用keep-alive缓存多层列表页的方法
2018/09/21 Javascript
用python实现的可以拷贝或剪切一个文件列表中的所有文件
2009/04/30 Python
Python实现基本数据结构中队列的操作方法示例
2017/12/04 Python
Python机器学习之决策树算法
2017/12/22 Python
Python语言描述连续子数组的最大和
2018/01/04 Python
Python3 queue队列模块详细介绍
2018/01/05 Python
基于Python socket的端口扫描程序实例代码
2018/02/09 Python
Python控制键盘鼠标pynput的详细用法
2019/01/28 Python
Python pip install如何修改默认下载路径
2020/04/29 Python
Python列表推导式实现代码实例
2020/09/09 Python
基于Django快速集成Echarts代码示例
2020/12/01 Python
Django 实现图片上传和下载功能
2020/12/31 Python
matplotlib阶梯图的实现(step())
2021/03/02 Python
Nip + Fab官网:英国美容品牌
2019/08/26 全球购物
2014全国两会大学生学习心得体会
2014/03/10 职场文书
优秀班主任申报材料
2014/12/16 职场文书
房地产销售经理岗位职责
2015/02/02 职场文书
春晚观后感
2015/06/11 职场文书
Window server中安装Redis的超详细教程
2021/11/17 Redis