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


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 中的switch表达式使用示例
Jun 03 Javascript
JavaScript中操作字符串小结
May 04 Javascript
Vue结合原生js实现自定义组件自动生成示例
Jan 21 Javascript
基于js中this和event 的区别(详解)
Oct 24 Javascript
Vue代码分割懒加载的实现方法
Nov 23 Javascript
vue 项目中使用Loading组件的示例代码
Aug 31 Javascript
js实现点击图片在屏幕中间弹出放大效果
Sep 11 Javascript
浅谈Vue组件单元测试究竟测试什么
Feb 05 Javascript
javascript 模块依赖管理的本质深入详解
Apr 30 Javascript
JS删除数组指定值常用方法详解
Jun 04 Javascript
vue 中的动态传参和query传参操作
Nov 09 Javascript
vue 中 get / delete 传递数组参数方法
Mar 23 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
咖啡豆的最常见发酵处理方法,详细了解一下
2021/03/03 冲泡冲煮
PHPMYADMIN 简明安装教程 推荐
2010/03/07 PHP
迅速确定php多维数组的深度的方法
2014/01/07 PHP
PHP实现的MongoDB数据库操作类分享
2014/05/12 PHP
PHP基于rabbitmq操作类的生产者和消费者功能示例
2018/06/16 PHP
JAVASCRIPT函数作用域和提前声明 分享
2013/08/22 Javascript
文本框文本自动补全效果示例分享
2014/01/19 Javascript
jquery操作对象数组元素方法详解
2014/11/26 Javascript
使用React实现轮播效果组件示例代码
2016/09/05 Javascript
Bootstrap基本插件学习笔记之标签切换(17)
2016/12/08 Javascript
js中的DOM模拟购物车功能
2017/03/22 Javascript
vue-quill-editor富文本编辑器简单使用方法
2018/09/21 Javascript
vue 项目@change多个参数传值多个事件的操作
2021/01/29 Vue.js
[01:45]绝对公平!DOTA2队长征召模式详解
2014/04/25 DOTA
Python 不同对象比较大小示例探讨
2014/08/21 Python
python中enumerate函数用法实例分析
2015/05/20 Python
python中文分词教程之前向最大正向匹配算法详解
2017/11/02 Python
AI人工智能 Python实现人机对话
2017/11/13 Python
两个元祖T1=('a', 'b'),T2=('c', 'd')使用匿名函数将其转变成[{'a': 'c'},{'b': 'd'}]的几种方法
2019/03/05 Python
python如何进入交互模式
2020/07/06 Python
canvas实现圆绘制的示例代码
2019/09/11 HTML / CSS
详解html5 canvas 微信海报分享(个人爬坑)
2018/01/12 HTML / CSS
最新党员的自我评价分享
2013/11/04 职场文书
获奖的大学生创业计划书
2014/01/05 职场文书
思想汇报格式
2014/01/05 职场文书
加拿大留学自荐信
2014/01/28 职场文书
医院竞聘演讲稿
2014/05/16 职场文书
小学安全工作汇报材料
2014/08/19 职场文书
2014法院干警廉洁警示教育思想汇报
2014/09/13 职场文书
2016婚礼主持词开场白
2015/11/24 职场文书
python3读取文件指定行的三种方法
2021/05/24 Python
详解MySQL集群搭建
2021/05/26 MySQL
python中pandas对多列进行分组统计的实现
2021/06/18 Python
php实现自动生成验证码的实例讲解
2021/11/17 PHP
Mysql事务索引知识汇总
2022/03/17 MySQL
Python+pyaudio实现音频控制示例详解
2022/07/23 Python