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


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 相关文章推荐
SWFObject Flash js调用类
Jul 08 Javascript
初识javascript 文档碎片
Jul 13 Javascript
Jquery Validate 正则表达式实用验证代码大全
Aug 23 Javascript
js 遍历json返回的map内容示例代码
Oct 29 Javascript
zTree插件之单选下拉菜单实例代码
Nov 07 Javascript
探讨jQuery的ajax使用场景(c#)
Dec 03 Javascript
Bootstrap每天必学之按钮(一)
Nov 24 Javascript
Vue.js每天必学之内部响应式原理探究
Sep 07 Javascript
轻松学习Javascript闭包
Mar 01 Javascript
浅谈Node 调试工具入门教程
Mar 20 Javascript
超出JavaScript安全整数限制的数字计算BigInt详解
Jun 24 Javascript
微信小程序中遇到的iOS兼容性问题小结
Nov 14 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/03 冲泡冲煮
PHP如何编写易读的代码
2007/07/10 PHP
php 网页游戏开发入门教程一(webgame+design)
2009/10/26 PHP
基于HBase Thrift接口的一些使用问题及相关注意事项的详解
2013/06/03 PHP
PHP自定义函数实现格式化秒的方法
2016/09/14 PHP
PHP关键特性之命名空间实例详解
2017/05/06 PHP
Laravel框架实现即点即改功能的方法分析
2019/10/31 PHP
PHP pthreads v3下同步处理synchronized用法示例
2020/02/21 PHP
用jscript实现列出安装的软件列表
2007/06/18 Javascript
jQuery 复合选择器应用的几个例子
2014/09/11 Javascript
JavaScript中对象property的删除方法介绍
2014/12/30 Javascript
Angularjs中使用layDate日期控件示例
2017/01/11 Javascript
JS基于onclick事件实现单个按钮的编辑与保存功能示例
2017/02/13 Javascript
JavaScript中无法通过div.style.left获取值的解决方法
2017/02/19 Javascript
Koa项目搭建过程详细记录
2018/04/12 Javascript
vue实现记事本功能
2019/06/26 Javascript
vue的注意规范之v-if 与 v-for 一起使用教程
2019/08/04 Javascript
vantUI 获得piker选中值的自定义ID操作
2020/11/04 Javascript
Python 新建文件夹与复制文件夹内所有内容的方法
2018/10/27 Python
python 移动图片到另外一个文件夹的实例
2019/01/10 Python
Python3 中作为一等对象的函数解析
2019/12/11 Python
Python super()函数使用及多重继承
2020/05/06 Python
PyQt5结合matplotlib绘图的实现示例
2020/09/15 Python
python中altair可视化库实例用法
2021/01/26 Python
Corelle官方网站:购买康宁餐具
2016/11/02 全球购物
华为俄罗斯官方网上商城:购买Huawei手机和平板
2017/04/21 全球购物
巴西香水和化妆品购物网站:The Beauty Box
2019/09/03 全球购物
美体小铺法国官方网站:The Body Shop法国
2020/06/04 全球购物
动物学专业毕业生求职信
2013/10/11 职场文书
就业自荐书
2013/12/05 职场文书
甜品蛋糕店创业计划书范文
2014/02/06 职场文书
化工操作工岗位职责
2014/04/29 职场文书
微观世界观后感
2015/06/10 职场文书
拔河比赛新闻稿
2015/07/17 职场文书
同事离别感言
2015/08/04 职场文书
创业计划书之家政服务
2019/09/18 职场文书