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


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实现计算加载页面所用的时间
Apr 02 Javascript
javascript天然的迭代器
Oct 29 Javascript
js去除重复字符串两种实现方法
Jan 09 Javascript
js跨浏览器实现将字符串转化为xml对象的方法
Sep 25 Javascript
javascript的parseFloat()方法精度问题探讨
Nov 26 Javascript
jQuery trigger()方法用法介绍
Jan 13 Javascript
jquery实现漫天雪花飞舞的圣诞祝福雪花效果代码分享
Aug 20 Javascript
bootstrapfileinput实现文件自动上传
Nov 08 Javascript
三种方式实现瀑布流布局
Feb 10 Javascript
vue-cli项目无法用本机IP访问的解决方法
Sep 20 Javascript
vue-cli脚手架搭建的项目去除eslint验证的方法
Sep 29 Javascript
Ant design vue table 单击行选中 勾选checkbox教程
Oct 24 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
PHP+ajax 无刷新删除数据
2010/02/20 PHP
百度站点地图(百度sitemap)生成方法分享
2014/01/09 PHP
yii实现图片上传及缩略图生成的方法
2014/12/04 PHP
PHP实现简单数字分页效果
2015/07/26 PHP
Laravel中unique和exists验证规则的优化详解
2018/01/28 PHP
PHP使用星号替代用户名手机和邮箱的实现代码
2018/02/07 PHP
PHP排序算法之快速排序(Quick Sort)及其优化算法详解
2018/04/21 PHP
传智播客学习之JavaScript基础篇
2009/11/13 Javascript
Jquery操作cookie记住用户名
2016/03/29 Javascript
移动端H5开发 Turn.js实现很棒的翻书效果
2016/06/20 Javascript
基于AngularJS实现iOS8自带的计算器
2016/09/12 Javascript
Node.js使用gm拼装sprite图片
2017/07/04 Javascript
javascript 开发之网页兼容各种浏览器
2017/09/28 Javascript
nodeJS微信分享
2017/12/20 NodeJs
总结js函数相关知识点
2018/02/27 Javascript
200行HTML+JavaScript实现年会抽奖程序
2019/01/22 Javascript
Layui带搜索的下拉框的使用以及动态数据绑定方法
2019/09/28 Javascript
[01:01:18]VP vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python的装饰器模式与面向切面编程详解
2015/06/21 Python
python利用dir函数查看类中所有成员函数示例代码
2017/09/08 Python
python操作列表的函数使用代码详解
2017/12/28 Python
Python实现的建造者模式示例
2018/08/06 Python
Python实现FTP弱口令扫描器的方法示例
2019/01/31 Python
python实现栅栏加解密 支持密钥加密
2019/03/20 Python
使用Python Pandas处理亿级数据的方法
2019/06/24 Python
python matlab库简单用法讲解
2020/12/31 Python
详解Python中的Lock和Rlock
2021/01/26 Python
html5是什么_动力节点Java学院整理
2017/07/07 HTML / CSS
Kathmandu新西兰官网:新西兰户外运动品牌
2019/07/27 全球购物
若干个Java基础面试题
2015/05/19 面试题
超市总经理岗位职责
2014/02/02 职场文书
幼儿园运动会口号
2014/06/07 职场文书
初婚未育证明样本
2014/10/24 职场文书
2014年团支部工作总结
2014/11/17 职场文书
入党介绍人意见怎么写
2015/06/03 职场文书
教你如何使用Python Tkinter库制作记事本
2021/06/10 Python