微信支付 django+pc端 html

WeChat

发布日期: 2021-04-06

更新日期: 2021-09-12

阅读次数: 537

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>