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


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中void(0)的具体含义解释
Feb 27 Javascript
浅析js预加载/延迟加载
Sep 25 Javascript
JavaScript删除指定子元素代码实例
Jan 13 Javascript
javascript判断并获取注册表中可信任站点的方法
Jun 01 Javascript
用javascript实现自动输出网页文本
Jul 30 Javascript
javaScript中定义类或对象的五种方式总结
Dec 04 Javascript
protractor的安装与基本使用教程
Jul 07 Javascript
ES6知识点整理之函数数组参数的默认值及其解构应用示例
Apr 17 Javascript
vue中使用mxgraph的方法实例代码详解
May 17 Javascript
使用jQuery实现购物车
Oct 29 jQuery
JavaScript实现网页下拉菜单效果
Nov 20 Javascript
vue实现列表拖拽排序的示例代码
Apr 08 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
php5数字型字符串加解密代码
2008/04/24 PHP
FleaPHP的安全设置方法
2008/09/15 PHP
php中var_export与var_dump的区别分析
2010/08/21 PHP
显示程序执行时间php函数代码
2013/08/29 PHP
php中利用explode函数分割字符串到数组
2014/02/08 PHP
php 无限级分类,超级简单的无限级分类,支持输出树状图
2014/06/29 PHP
php数组添加与删除单元的常用函数实例分析
2015/02/16 PHP
基于Jquery的实现回车键Enter切换焦点
2010/09/14 Javascript
页面使用密码保护代码
2013/04/10 Javascript
jQuery聚合函数实例
2015/05/21 Javascript
jquery获取easyui日期控件的值实现方法
2016/11/09 Javascript
javascript高级模块化require.js的具体使用方法
2017/10/31 Javascript
JavaScript 对引擎、运行时、调用堆栈的概述理解
2018/10/22 Javascript
js前端面试之同步与异步问题详解
2019/04/03 Javascript
ES6 Generator基本使用方法示例
2020/06/06 Javascript
[36:52]DOTA2真视界:基辅特锦赛总决赛
2017/05/21 DOTA
Python自动扫雷实现方法
2015/07/25 Python
Python编码爬坑指南(必看)
2016/06/10 Python
python中的随机函数random的用法示例
2018/01/27 Python
浅谈Python中的私有变量
2018/02/28 Python
解决Django no such table: django_session的问题
2020/04/07 Python
Python模块zipfile原理及使用方法详解
2020/08/04 Python
python import 上级目录的导入
2020/11/03 Python
美国批发零售网站:GearXS
2016/07/26 全球购物
一站式跨境收款解决方案:Payoneer(派安盈)
2018/09/06 全球购物
俄罗斯电子产品在线商店:UltraTrade
2020/01/30 全球购物
日本最大的购物网站乐天市场国际版:Rakuten Global Market(支持中文)
2020/02/03 全球购物
结构工程研究生求职信
2013/10/13 职场文书
运动会闭幕式解说词
2014/02/21 职场文书
企业出纳岗位职责
2014/03/12 职场文书
有创意的广告词
2014/03/18 职场文书
班级课外活动总结
2014/07/09 职场文书
迎七一演讲稿
2014/09/12 职场文书
社区党风廉政建设调研报告
2015/01/01 职场文书
大学生见习总结报告
2015/06/24 职场文书
接收函
2019/04/22 职场文书