微信小程序支付前端源码


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 相关文章推荐
javascript 写类方式之三
Jul 05 Javascript
分享27款非常棒的jQuery 表单插件
Mar 28 Javascript
js和jquery使按钮失效为不可用状态的方法
Jan 26 Javascript
javascript页面渲染速度测试脚本分享
Apr 15 Javascript
jquery和css3实现的炫酷时尚的菜单导航
Sep 01 Javascript
使用jquery实现仿百度自动补全特效
Jul 23 Javascript
理解javascript闭包
Dec 15 Javascript
Sortable.js拖拽排序使用方法解析
Nov 04 Javascript
JS实现密码框的显示密码和隐藏密码功能示例
Dec 26 Javascript
bootstrap table使用入门基本用法
May 24 Javascript
vue 修改 data 数据问题并实时显示的方法
Aug 27 Javascript
微信小程序实现watch监听
Jun 04 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转盘抽奖接口实例
2015/02/09 PHP
PHP实现可添加水印与生成缩略图的图片处理工具类
2018/01/16 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
Lazy Load 延迟加载图片的 jQuery 插件
2010/02/06 Javascript
jquery uaMatch源代码
2011/02/14 Javascript
iframe 上下滚动条如何默认在下方实现原理
2012/12/10 Javascript
利用webqq协议使用python登录qq发消息源码参考
2013/04/08 Javascript
实现只能输入数字的input不用replace方法
2013/09/12 Javascript
javascript操作字符串的原生方法
2014/12/22 Javascript
jQuery表单美化插件jqTransform使用详解
2015/04/12 Javascript
js使用cookie记录用户名的方法
2015/11/26 Javascript
Javascript 函数的四种调用模式
2016/11/05 Javascript
Js利用Canvas实现图片压缩功能
2017/09/13 Javascript
vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)
2020/03/07 Javascript
weui上传多图片,压缩,base64编码的示例代码
2020/06/22 Javascript
用Python进行行为驱动开发的入门教程
2015/04/23 Python
python 异常处理总结
2016/10/18 Python
使用python爬虫实现网络股票信息爬取的demo
2018/01/05 Python
python try 异常处理(史上最全)
2019/03/07 Python
pandas DataFrame 警告(SettingWithCopyWarning)的解决
2019/07/23 Python
PyCharm刷新项目(文件)目录的实现
2020/02/14 Python
Python操作MongoDb数据库流程详解
2020/03/05 Python
Python3标准库之dbm UNIX键-值数据库问题
2020/03/24 Python
python和js交互调用的方法
2020/06/23 Python
分享一个python的aes加密代码
2020/12/22 Python
泰国第一的化妆品网站:Konvy
2018/02/25 全球购物
幼儿园中班开学寄语
2014/04/03 职场文书
优秀的个人求职信范文
2014/05/09 职场文书
商业企业管理专业求职信
2014/07/10 职场文书
2014年保卫工作总结
2014/12/05 职场文书
美术教师个人工作总结
2015/02/06 职场文书
开场白怎么写
2015/06/01 职场文书
英语导游欢迎词
2015/09/30 职场文书
2016党员学习作风建设心得体会
2016/01/21 职场文书
SpringBoot集成Redis,并自定义对象序列化操作
2021/06/22 Java/Android
vue里使用create, mounted调用方法
2022/04/26 Vue.js