原文地址


//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)
}
})
}
})

  

微信小程序前端支付的更多相关文章

  1. 微信小程序,前端大梦想(六)

    微信小程序,前端大梦想(六) 微信小程序之联合百度API实现定位 定位功能对于我们都不陌生,在移动端的应用中更是不可或缺的功能,小程序中也提供了对应的API帮助我们完成定位的实现,但是目前小程序的定位 ...

  2. 微信小程序篇(微信小程序的支付)

    微信小程序的支付和微信公众号的支付是类似的,对比起来还比公众号支付简单了一些,我们只需要调用微信的统一下单接口获取prepay_id之后我们在调用微信的支付即可. 今天我们来封装一般node的支付接口 ...

  3. 【微信小程序】支付过程详解

    一.介绍 今天跟大家分享微信小程序集成支付. 二.分析 1.小程序支付API 地址:https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-pay.html ...

  4. 微信小程序在线支付功能使用总结

    最近需要在微信小程序中用到在线支付功能,于是看了一下官方的文档,发现要在小程序里实现微信支付还是很方便的,如果你以前开发过服务号下的微信支付,那么你会发现其实小程序里的微信支付和服务号里的开发过程如出 ...

  5. 微信小程序前端页面书写

    微信小程序前端页面书写 WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件.事件系统,可以构建出页面的结构. 一.数据绑定 1. 普通写法 <view ...

  6. 微信小程序前端样式WXSS书写

    微信小程序前端样式WXSS书写 一. WXSS的简单介绍 WXSS(WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式. 与 CSS 相比,WXSS 扩展的特性有: ...

  7. 关于微信小程序前端Canvas组件教程

    关于微信小程序前端Canvas组件教程 微信小程序Canvas接口函数 ​ 上述为微信小程序Canvas的内部接口,通过熟练使用Canvas,即可画出较为美观的前端页面.下面是使用微信小程序画图的一些 ...

  8. 微信小程序前端与myeclipse的数据交换过程(SSH)

    这是我个人探究微信小程序前端与后端之间的数据交换的过程,再结合个人所学的SSH框架, 编程工具用myEclipse2014工具.当然,前提是后台的项目要部署到tomcat服务器上才行, 然后总结了从后 ...

  9. 前端调用微信小程序的支付流程

    目录 1,前言 2,流程 3,参数说明 4,具体代码 1,前言 分享一个完整的微信小程序支付流程中,前端要做的模块. 2,流程 在调用wx.requestPayment之前,需要准备一些参数,流程如下 ...

随机推荐

  1. sql练习03

    准备数据建表语句CREATE TABLE students(sno VARCHAR(3) NOT NULL, sname VARCHAR(4) NOT NULL,ssex VARCHAR(2) NOT ...

  2. DevExpress ASP.NET v19.1版本亮点:发布全新的Gantt控件

    行业领先的.NET界面控件DevExpress 发布了v19.1版本,本文将以系列文章的方式为大家介绍DevExpress ASP.NET Controls v19.1中新增的一些控件及增强的控件功能 ...

  3. repo 回退当前分支下所有仓库到指定日期前的最新代码版本

    回退命令: repo forall -c 'commitID=git log --before "2019-11-24 23:59" -1 --pretty=format:&quo ...

  4. Array数组对象方法

    Array 对象方法 方法 描述 concat() 连接两个或更多的数组,并返回结果. copyWithin() 从数组的指定位置拷贝元素到数组的另一个指定位置中. entries() 返回数组的可迭 ...

  5. 20. ClustrixDB explain参数解读

    ClustrixDB有一个流模型,它从容器(表和索引)开始并通过操作符图对行进行流处理.ClustrixDB有一组丰富的操作符,随着更多功能和优化的添加,这些操作符偶尔会增加.我们使用一个地方来记录操 ...

  6. JavaScript的数组API函数

    ㈠数组转字符串 ⑴String(arr):将arr中的每个元素转为字符串,用逗号分隔     固定套路:对数组拍照:用于鉴别是否数组被修改过 ⑵arr.join("连接符"):将a ...

  7. 51 Nod 线段最长重叠部分

    1091 线段的重叠  基准时间限制:1 秒 空间限制:131072 KB 分值: 5 难度:1级算法题 X轴上有N条线段,每条线段包括1个起点和终点.线段的重叠是这样来算的,[10 20]和[12 ...

  8. Tarjan 【整理】

    Tarjan [整理] #include<bits/stdc++.h> using namespace std; class FastIO{ /* copyright (c) dgklr ...

  9. vue router 报错:NavigationDuplicated {_name: "NavigationDuplicated", name: "NavigationDuplicated"}

    https://blog.csdn.net/weixin_43202608/article/details/98884620

  10. Spring boot之JdbcTemplate

    实体类 package com.kfit.demo1.bean; import javax.persistence.Entity; import javax.persistence.Generated ...