WeChatPay 配置与HTML
本章使用: Python3.6 django MySQL
项目使用微信支付 购买会员 django+pc端
使用django创建项目
安装 Django
pip install django==1.11.11
使用django-admin 创建项目
django-admin startproject WeChatPay
创建子应用
python manage.py startapp pay
项目目录结构
├── WeChatPay
│ ├── pay # 子应用(包)
│ │ ├── __init__.py
│ │ ├── models.py # 模型类
│ │ ├── test.py
│ │ ├── views.py # 视图函数
│ ├── templates # 模板文件的文件夹 html
│ ├── static # 静态资源文件夹 例如js css等
│ ├── WeChatPay # 跟项目同名的文件夹
│ │ ├── __init__.py
│ │ ├── settings # 配置文件的位置
│ │ ├── urls.py # 全局路由
│ │ └── wsgi.py
│ ├── manage.py
配置settings.py文件 注册子应用
INSTALLED_APPS = [
'...',
'pay', # 微信支付
'...'
]
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
#'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
# 配置静态资源的请求
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(os.path.join(BASE_DIR, 'static')),
)
配置HTML页面文件
templates/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>微信支付</title>
<style>
.main_div{
width: 320px;
height: 150px;
text-align: center;
margin:0 auto;
margin-top: 100px;
border: aquamarine 2px solid;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="main_div">
<br>
<h1>进行微信支付测试?</h1>
<a href="pay">确定</a>
</div>
</body>
</html>
templates/qrcode.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>扫码支付</title>
</head>
<style>
.box {
position: absolute;
left: 50%;
top: 10%;
transform: translate(-50%);
text-align: center;
}
.conten {
width: 100%;
}
body {
background: #ccc;
}
</style>
<body>
{% load staticfiles %}
<div class="box">
<h2 class="content"><span>扫码支付</span></h2>
<h5>订单号:<span id="out_trade_no">{{ out_trade_no }}</span></h5>
<!--<h2>扫码支付</h2>-->
<img src="{% static qrcode_name %}"/><!--显示支付二维码-->
<br>
<span id="message"></span>
</div>
</body>
<script type="text/javascript">
var websocket = null;//websocket 的变量
function load() {//初始化 websocket
//获取订单号
var out_trade_no = "{{ out_trade_no }}";
//建立连接
if ('WebSocket' in window) {//支持 websocket
// 此处为获取支付是否成功
websocket = new WebSocket("ws://localhost:80/websocketLink/" + out_trade_no);
websocket.onopen = function() {
fillData("请在两小时内完成支付")
}
websocket.onclose = function() {
fillData("连接关闭了")
}
websocket.onerror = function() {
fillData("出现错误了")
}
websocket.onmessage = function(event) {
fillData(event.data);
alert("支付成功!!!");
if (window.s) {
window.s.close();//关闭websocket
console.log('websocket已关闭');
}
}
} else {
alert("浏览器不支持 websocket")
}
//设置监听,当有消息来的时候的监听
}
function fillData(data) {
document.getElementById("message").innerHTML = data;
}
window.onload=load();//页面加载完成后执行 load 方法
</script>
</html>
本章项目链接 跳转