微信小程序支付前端源码
//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 证书 勾上即可
微信小程序支付前端源码的更多相关文章
- 从微信小程序开发者工具源码看实现原理(一)- - 小程序架构设计
使用微信小程序开发已经很长时间了,对小程序开发已经相当熟练了:但是作为一名对技术有追求的前端开发,仅仅熟练掌握小程序的开发感觉还是不够的,我们应该更进一步的去理解其背后实现的原理以及对应的考量,这可能 ...
- 微信小程序一键生成源码 在线制作定制功能强大的微信小程序
微信小程序发展到现在,短短的一年不到的时间(很快就要迎来微信小程序周年庆),在快迎来周年庆之际,百牛信息技术bainiu.ltd特记录一下这个发展的历程,用于将来见证小程序发展的辉煌时刻,我们还能知道 ...
- 从微信小程序开发者工具源码看实现原理(四)- - 自适应布局
从前面从微信小程序开发者工具源码看实现原理(一)- - 小程序架构设计可以知道,小程序大部分是通过web技术进行渲染的,也就是最终通过浏览器的dom tree + cssom来生成渲染树:既然最终是通 ...
- 从微信小程序开发者工具源码看实现原理(三)- - 双线程通信
文章概览: 引言 小程序开发者工具双线程通信的设计 1.on: 用来收集小程序开发者工具触发的事件回调 2.invoke:以api方式调用开发工具提供的基础能力 3.publish:用来向Appser ...
- 从微信小程序开发者工具源码看实现原理(二)- - 小程序技术实现
wxml与wxss的转换 1.wxml使用wcc转换 2.wxss使用wcsc转换 开发者工具主入口 视图层页面的实现 视图层页面实现技术细节 视图层快速打开原理 视图层新打开页面流程 业务逻辑层页面 ...
- 2018微信小程序官方示例源码最新版
忘记从哪获得的 CSDN 可以支持一下 谢谢你们 https://download.csdn.net/download/lan1128/10197682 当然也有免费的 代码在码云上免费公开 点个关 ...
- 微信小程序支付C#后端源码
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.W ...
- 微信小程序支付源码,后台服务端代码
作者:尹华南,来自原文地址 微信小程序支付绕坑指南 步骤 A:小程序向服务端发送商品详情.金额.openid B:服务端向微信统一下单 C:服务器收到返回信息二次签名发回给小程序 D:小程序发起支付 ...
- 通俗易懂,C#如何安全、高效地玩转任何种类的内存之Span的脾气秉性(二)。 异步委托 微信小程序支付证书及SSL证书使用 SqlServer无备份下误删数据恢复 把list集合的内容写入到Xml中,通过XmlDocument方式写入Xml文件中 通过XDocument方式把List写入Xml文件
通俗易懂,C#如何安全.高效地玩转任何种类的内存之Span的脾气秉性(二). 前言 读完上篇<通俗易懂,C#如何安全.高效地玩转任何种类的内存之Span的本质(一).>,相信大家对sp ...
随机推荐
- django复习--学校管理系统用到的知识点梳理
先看如何引入静态文件 一.引入静态文件,静态文件包括css文件,图片文件,jquery文件等 STATIC_URL = '/static/' STATICFILES_DIRS = ( os.path. ...
- fragment 事务回滚 ---动态创建fragment
import java.util.Date; import java.util.LinkedList; import com.qianfeng.gp08_day23_fragment5.fragmen ...
- jquery-jsonp插件解决跨域问题
用jquery-jsonp插件解决ajax跨域问题,既可以实现ajax同样的请求效果,而且server服务端的相关代码也不用做任何改变. 代码如下: var url="http://loca ...
- php SESSON共享 (mysql方式)
为什么要进行session共享? 因为一些大型网站,通常会有很多服务器,每个服务器运行不同的业务模块,并使用二级域名(或是完全不同的域名),而用户系统是统一的,通过登陆名.密码来登陆各模块.用户数据放 ...
- 在windows系统下安装oracle 11g
oracle 11g 安装在windows server 2012 系统下. 最近,需要配置数据库,要求在windows操作系统下,安装oracle 11g 数据库,因为以前没有安装过,所以成功后, ...
- PAT 1044 火星数字(20)(思路+代码)
1044 火星数字(20)(20 分) 火星人是以13进制计数的: 地球人的0被火星人称为tret. 地球人数字1到12的火星文分别为:jan, feb, mar, apr, may, jun, jl ...
- web服务器部署过程记录
由于之前没有服务器部署经验,又选择了所有软件都是单独编译安装,遇到很多问题,解决之后还是学习到了很多新东西. 如今回过头来还是选择lnmp集成环境的部署方式比较方便快捷:https://lnmp.or ...
- 百度词汇检索,计算PMI值
'''词汇检索百度返回值,并且计算PMI值的类''' from bs4 import BeautifulSoup import requests import re import pandas as ...
- 541. Reverse String II
static int wing=[]() { std::ios::sync_with_stdio(false); cin.tie(NULL); ; }(); class Solution { publ ...
- iCn3D结构查看器的实现方法
iCn3D Structure Viewer:iCn3D结构查看器 演示效果如下: 上面只是一个Basic UI的演示,如果要Advanced UI的话可以去NCBI官网看API