微信小程序支付前端源码


Posted in Javascript onAugust 29, 2018

本文实例为大家分享了微信小程序支付前端源码,供大家参考,具体内容如下

//index.js
Page({
 data: {

 },
 //点击支付按钮进行支付
 payclick: function () {
 var t = this;
 wx.login({
  //获取code换取openID
  success: function (res) {
  //code = res.code //返回code
  console.log("获取code");
  console.log(res.code);
  var opid = t.getOpenId(res.code);
  }
 })
 },
 //获取openID
 getOpenId: function (code) {
 var that = this;
 wx.request({
  url: "https://api.weixin.qq.com/sns/jscode2session?appid=你的appid&secret=AppSecret(小程序密钥)&js_code=" + code + "&grant_type=authorization_code",
  data: {},
  method: 'GET',
  success: function (res) {
  console.log("获取openid")
  console.log(res)
  that.setData({
   openid: res.data.openid,
   session_key: res.data.session_key
  })
  that.generateOrder(res.data.openid)
  },
  fail: function () {
  // fail
  },
  complete: function () {
  // complete
  }
 })
 },
 //生成商户订单
 generateOrder: function (openid) {
 var that = this
 wx.request({
  url: 'http://localhost:25492/wx/getda',//后台请求地址
  method: 'GET',
  data: {
  gfee: '商品价钱',
  gname: '商品名称',
  openId: openid
  //(商品价钱和商品名称根据自身需要是否传值, openid为必传)
  },
  success: function (res) {
  console.log("后台获取数据成功");
  console.log(res);
  var param = { "timeStamp": res.data.timeStamp, "package": res.data.package, "paySign": res.data.paySign, "signType": "MD5", "nonceStr": res.data.nonceStr };
   //发起支付
  that.pay(param);
  },
  fail: function (res) {
  console.log("向后台发送数据失败")
  }
 })
 },
 //支付
 pay: function (param) {
 var that = this;
 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) {
  console.log("success");
  console.log(res);
  },
  fail: function (res) {
  console.log("fail")
  console.log(res);
  },
  complete: function (res) {
  console.log("complete");
  console.log(res)
  }
 })
 }
})

本地调试如过出现请求失败请将    微信开发者工具  >    详情(右上角) > 不校验合法域名、web-view(业务域名)、TLS 版本以及 HTTPS 证书   勾上即可

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jQuery的简单的列表导航菜单
Mar 02 Javascript
js获取对象为null的解决方法
Nov 21 Javascript
JavaScript使用encodeURI()和decodeURI()获取字符串值的方法
Aug 04 Javascript
基于JavaScript代码实现随机漂浮图片广告
Jan 05 Javascript
js选择器全面解析
Jun 27 Javascript
Highcharts学习之坐标轴
Aug 02 Javascript
纯JS实现弹性导航条效果
Mar 06 Javascript
vue基于Vue2.0和高德地图的地图组件实例
Apr 28 Javascript
Vue2.5学习笔记之如何在项目中使用和配置Vue
Sep 26 Javascript
vue-cli 2.*中导入公共less文件的方法步骤
Nov 22 Javascript
node将geojson转shp返回给前端的实现方法
May 29 Javascript
js微信分享接口调用详解
Jul 23 Javascript
微信小程序使用swiper组件实现类3D轮播图
Aug 29 #Javascript
javascript中UMD规范的代码推演
Aug 29 #Javascript
详解webpack自定义loader初探
Aug 29 #Javascript
在vue中使用SockJS实现webSocket通信的过程
Aug 29 #Javascript
微信小程序自定义select下拉选项框组件的实现代码
Aug 28 #Javascript
微信小程序中上传图片并进行压缩的实现代码
Aug 28 #Javascript
vee-validate vue 2.0自定义表单验证的实例
Aug 28 #Javascript
You might like
php采用ajax数据提交post与post常见方法总结
2014/11/10 PHP
php实现的树形结构数据存取类实例
2014/11/29 PHP
typecho插件编写教程(四):插件挂载
2015/05/28 PHP
CentOS系统中PHP安装扩展的方式汇总
2017/04/09 PHP
php基于自定义函数记录log日志方法
2017/07/21 PHP
php适配器模式简单应用示例
2019/10/23 PHP
javascript插入样式实现代码
2012/02/22 Javascript
jquery如何实现在加载完iframe的内容后再进行操作
2013/09/10 Javascript
jquery live()重复绑定的解决方法介绍
2014/01/03 Javascript
基于NodeJS的前后端分离的思考与实践(五)多终端适配
2014/09/26 NodeJs
12行javascript代码绘制一个八卦图
2015/04/02 Javascript
jQuery.prop() 使用详解
2015/07/19 Javascript
原生JS封装Ajax插件(同域、jsonp跨域)
2016/05/03 Javascript
总结Javascript中数组各种去重的方法
2016/10/04 Javascript
js 模仿锚点定位的实现方法
2016/11/19 Javascript
JS组件系列之JS组件封装过程详解
2017/04/28 Javascript
浅谈Angular2 ng-content 指令在组件中嵌入内容
2017/08/18 Javascript
使用Vue-Router 2实现路由功能实例详解
2017/11/14 Javascript
JavaScript正则表达式函数总结(常用)
2018/02/22 Javascript
在Vue项目中引入腾讯验证码服务的教程
2018/04/03 Javascript
vue input输入框模糊查询的示例代码
2018/05/22 Javascript
JavaScript算法学习之冒泡排序和选择排序
2019/11/02 Javascript
JS中队列和双端队列实现及应用详解
2020/09/29 Javascript
Python队列、进程间通信、线程案例
2019/10/25 Python
python+openCV对视频进行截取的实现
2020/11/27 Python
HTML5之SVG 2D入门10—滤镜的定义及使用
2013/01/30 HTML / CSS
HTML5 Canvas draw方法制作动画效果示例
2013/07/11 HTML / CSS
HTML5 localStorage使用总结
2017/02/22 HTML / CSS
工厂厂长岗位职责
2013/11/08 职场文书
体育教育毕业生自荐信
2013/11/21 职场文书
趣味体育活动方案
2014/02/08 职场文书
个人自荐材料
2014/05/23 职场文书
组织鉴定材料
2014/06/02 职场文书
高中班级口号
2014/06/09 职场文书
创业计划书之闲置物品置换中心
2019/12/25 职场文书
如何用 Python 子进程关闭 Excel 自动化中的弹窗
2021/05/07 Python