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


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 相关文章推荐
event.srcElement 用法笔记e.target
Dec 18 Javascript
jQuery中的常用事件总结
Dec 27 Javascript
javascript 隐藏/显示指定的区域附HTML元素【legend】用法
Mar 05 Javascript
避免回车键导致的页面无意义刷新的解决方法
Apr 12 Javascript
JS打开图片另存为对话框实现代码
Dec 26 Javascript
JavaScript实现数组随机排序的方法
Jun 26 Javascript
深入探讨前端框架react
Dec 09 Javascript
JavaScript字符串删除重复字符的方法
Dec 25 Javascript
vue2里面ref的具体使用方法
Oct 27 Javascript
AngularJs ng-change事件/指令的用法小结
Nov 01 Javascript
Node.js命令行/批处理中如何更改Linux用户密码浅析
Jul 22 Javascript
Javascript原生ajax请求代码实例
Feb 20 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
PHPMailer安装方法及简单实例
2008/11/25 PHP
PHP中spl_autoload_register()和__autoload()区别分析
2014/05/10 PHP
ThinkPHP2.0读取MSSQL提示Incorrect syntax near the keyword 'AS'的解决方法
2014/06/25 PHP
PHP实现的微信公众号扫码模拟登录功能示例
2019/05/30 PHP
JavaScript的Function详细
2006/11/14 Javascript
Extjs学习过程中新手容易碰到的低级错误积累
2010/02/11 Javascript
Jquery replace 字符替换实现代码
2010/12/02 Javascript
DWZ刷新dialog解决方法
2013/03/03 Javascript
一个奇葩的最短的 IE 版本判断JS脚本
2014/05/28 Javascript
分享一则JavaScript滚动条插件源码
2015/03/03 Javascript
详解Bootstrap插件
2016/04/25 Javascript
深入理解angularjs过滤器
2016/05/25 Javascript
bootstrap监听滚动实现头部跟随滚动
2016/11/08 Javascript
Vue组件开发初探
2017/02/14 Javascript
JS检测数组类型的方法小结
2017/03/14 Javascript
jQuery选择器之表单元素选择器详解
2017/09/19 jQuery
详解如何在vue-cli中使用vuex
2018/08/07 Javascript
Element-UI 使用el-row 分栏布局的教程
2020/10/26 Javascript
对于Python编程中一些重用与缩减的建议
2015/04/14 Python
详解Python装饰器由浅入深
2016/12/09 Python
Python装饰器知识点补充
2018/05/28 Python
transform python环境快速配置方法
2018/09/27 Python
详解Python3 对象组合zip()和回退方式*zip
2019/05/15 Python
python获取Linux发行版名称
2019/08/30 Python
基于MSELoss()与CrossEntropyLoss()的区别详解
2020/01/02 Python
python是怎么被发明的
2020/06/15 Python
python实现批量命名照片
2020/06/18 Python
Django ModelForm组件原理及用法详解
2020/10/12 Python
Python 虚拟环境工作原理解析
2020/12/24 Python
财务助理岗位职责
2013/11/10 职场文书
单位领导证婚词
2014/01/14 职场文书
英语三分钟演讲稿
2014/08/19 职场文书
小学三八妇女节活动总结
2015/02/06 职场文书
史上最全书信经典范文大全(建议收藏)
2019/07/10 职场文书
导游词之湖北武当山
2019/09/23 职场文书
php中配置文件保存修改操作 如config.php文件的读取修改等操作
2021/05/12 PHP