python flask豆瓣微信小程序案例

项目步骤

定义首页模板index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>豆瓣微信小程序</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
        }
        .container{
            width: 375px;
            height:600px;
            background: pink;
        }
    </style>
</head>
<body>
    <div class="container">

    </div>
</body>
</html>

app.py

from flask import Flask,render_template

app = Flask(__name__)
#模板改完后自动加载
app.config['TEMPLATES_AUTO_RELOAD']=True

@app.route('/')
def hello_world():
    return render_template('index.html')


if __name__ == '__main__':
    app.run()

运行效果

完整的一个例子

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>豆瓣微信小程序</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
        }
        .container{
            width: 375px;
            height:600px;
            background: pink;
        }
        .search-group{
            padding: 14px 8px;
            background: #41be57;
        }
        .search-group .search-input{
            display: block;
            height: 30px;
            width: 100%;
            box-sizing: border-box;
            background: #fff;
            border: none;
            outline: none;
            border-radius: 5px;
        }
        .item-list-group .item-list-top{
            overflow: hidden;
            padding: 10px;
        }
        .item-list-top .module-title{
            float: left;
        }
        .item-list-top .more-btn{
            float: right;
        }
        .list-group{
            overflow: hidden;
        }
        .list-group .item-group{
            float: left;
            margin-right: 10px;
        }
        .item-group .thumbnail{
            display: block;
            width: 100px;
        }
        .item-group .item-title{
            font-size: 12px;
            text-align: center;
        }
        .item-group .item-rating{
            font-size: 12px;
            text-align: center;
        }
        .item-rating img{
            width: 10px;
            height: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="search-group">
            <input type="text" class="search-input" placeholder="搜索...">
        </div>

    <div class="item-list-group">
        <div class="item-list-top">
            <span class="module-title">电影</span>
            <a href="#" class="more-btn">更多</a>
        </div>
        <div class="list-group">
            <div class="item-group">
                <img src="https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2537158013.webp" alt="" class="thumbnail">
                <p class="item-title">毒液</p>
                <p class="item-rating">
                    {% set rating=7.3 %}
                    <!--全亮星星-->
                    {% set lights=((rating|int)/2)|int %}
                    <!--半亮星星-->
                    {% set halfs=(rating|int)%2 %}
                    <!--不亮星星-->
                    {% set grays=5-lights-halfs %}
                    {% for light in range(0,lights) %}
                        <img src="{{ url_for("static",filename='images/rate_light.png') }}" alt="">
                    {% endfor %}

                    {% for half in range(0,halfs) %}
                         <img src="{{ url_for("static",filename='images/rate_half.jpg') }}" alt="">
                    {% endfor %}

                    {% for gray in range(0,grays) %}
                         <img src="{{ url_for("static",filename='images/rate_gray.png') }}" alt="">
                    {% endfor %}
                    {{ rating }}
                </p>
            </div>
        </div>
    </div>
        </div>
</body>
</html>

app.py

from flask import Flask,render_template

app = Flask(__name__)
#模板改完后自动加载
app.config['TEMPLATES_AUTO_RELOAD']=True

@app.route('/')
def hello_world():
    return render_template('index.html')


if __name__ == '__main__':
    app.run()

运行app.py

效果如下：

python flask豆瓣微信小程序案例

猜你喜欢