python flask豆瓣微信小程序案例

程序员文章站 2022-06-20 08:38:30

项目步骤定义首页模板index.html app.py 运行效果完整的一个例子 index.html app.py 运行app.py 效果如下：重构上面的代码 index.html app.py 运行app.py 访问效果如下： ......

项目步骤

定义首页模板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()

运行效果

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;
        }
        .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;
            padding-left: 10px;
            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 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 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豆瓣微信小程序案例

重构上面的代码

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;
            padding-left: 10px;
            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>
    <!--定义宏-->
    {% macro itemgroup(thumbnail,title,rating) %}
        <div class="item-group">
                <img src="{{ thumbnail }}" alt="" class="thumbnail">
                <p class="item-title">{{ title }}</p>
                <p class="item-rating">
                    <!--全亮星星-->
                    {% 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>
    {% endmacro %}

    {% macro listgroup(module_title,items)%}
        <div class="item-list-group">
            <div class="item-list-top">
                <span class="module-title">{{ module_title }}</span>
                <a href="#" class="more-btn">更多</a>
            </div>
            <div class="list-group">
                {% for item in items[0:3] %}
                    {{ itemgroup(item.thumbnail,item.title,item.rating) }}
                {% endfor %}
            </div>
    </div>
    {% endmacro %}

    <div class="container">
        <div class="search-group">
            <input type="text" class="search-input" placeholder="搜索...">
        </div>
        {{ listgroup('电影',movies) }}
        {{ listgroup('电视剧',tvs) }}
    </div>
</body>
</html>

app.py

from flask import flask,render_template

app = flask(__name__)
#模板改完后自动加载
app.config['templates_auto_reload']=true



#　电影
movies = [
    {
        'id': '11211',
        'thumbnail': 'https://img3.doubanio.com/view/movie_poster_cover/lpst/public/p2499792043.webp',
        'title': u'王牌特工2：黄金圈',
        'rating': u'7.3',
        'comment_count': 12000,
        'authors': u'科林·费尔斯 / 塔伦·埃格顿 / 朱丽安·摩尔'
    },
    {
        'id': '34532',
        'title': u'羞羞的铁拳',
        'thumbnail': u'https://img1.doubanio.com/view/movie_poster_cover/lpst/public/p2499793218.webp',
        'rating': u'7.6',
        'comment_count': 39450,
        'authors': u'艾伦/马丽/沈腾'
    },
    {
        'id': '394558',
        'title': u'情圣',
        'thumbnail': u'https://img3.doubanio.com/view/movie_poster_cover/mpst/public/p2409022364.jpg',
        'rating': u'6.3',
        'comment_count': 38409,
        'authors': u'肖央 / 闫妮 / 小沈阳'
    },
    {
        'id': '9384089',
        'title': u'全球风暴',
        'thumbnail': u'https://img3.doubanio.com/view/movie_poster_cover/lpst/public/p2501863104.webp',
        'rating': u'7.4',
        'comment_count': 4555,
        'authors': u'杰拉德·巴特勒/吉姆·斯特'
    },
    {
        'id': '26921827',
        'title': u'大卫贝肯之倒霉特工熊',
        'thumbnail': u'https://img3.doubanio.com/view/movie_poster_cover/mpst/public/p2408893200.jpg',
        'rating': u'4.3',
        'comment_count': 682,
        'authors': u'汤水雨 / 徐佳琪 / 杨默'
    },
    {
        'id': '26287884',
        'title': u'追龙',
        'thumbnail': u'https://img3.doubanio.com/view/movie_poster_cover/lpst/public/p2499052494.webp',
        'rating': u'7.5',
        'comment_count': 33060,
        'authors': u'查理兹·塞隆 / 阿特·帕金森 / 拉尔夫·费因斯'
    }
]

# 电视剧
tvs = [
    {
        'id': '235434',
        'title': u'鬼吹灯之精绝古城',
        'thumbnail': u'https://img3.doubanio.com/view/movie_poster_cover/lpst/public/p2404604903.jpg',
        'rating': u'8.4',
        'comment_count': 49328,
        'authors': u'靳东 / 陈乔恩 / 赵达 / 付枚 / 金泽灏 /'
    },
    {
        'id': '9498327',
        'title': u'孤芳不自赏',
        'thumbnail': u'https://img1.doubanio.com/view/movie_poster_cover/lpst/public/p2407425119.jpg',
        'rating': u'3.7',
        'comment_count': 8493,
        'authors': u'钟汉良 / 杨颖 / 甘婷婷 / 孙艺洲 / 亓航 /'
    },
    {
        'id': '26685451',
        'title': u'全球风暴',
        'thumbnail': u'https://img3.doubanio.com/view/movie_poster_cover/lpst/public/p2501769525.webp',
        'rating': u'8.2',
        'comment_count': 345,
        'authors': u' 卢克·崔德威 / 琼安·弗洛加特 / 露塔·格德米纳斯 / 安东尼·海德 / 卡罗琳·古多尔 /'
    },
    {
        'id': '235434',
        'title': u'其他人',
        'thumbnail': u'https://img3.doubanio.com/view/movie_poster_cover/lpst/public/p2371503632.jpg',
        'rating': u'7.6',
        'comment_count': 25532,
        'authors': u'杰西·普莱蒙 / 莫莉·香侬 / 布莱德利·惠特福德 / maude apatow / 麦迪逊·贝蒂 /'
    },
    {
        'id': '48373095',
        'title': u'全员单恋',
        'thumbnail': u'https://img1.doubanio.com/view/movie_poster_cover/lpst/public/p2367986708.jpg',
        'rating': u'6.4',
        'comment_count': 2483,
        'authors': u'伊藤沙莉 / 中川大志 / 上原实矩 / 森绘梨佳 / 樱田通 /'
    },
    {
        'id': '292843',
        'title': u'废纸板拳击手',
        'thumbnail': u'https://img1.doubanio.com/view/movie_poster_cover/lpst/public/p2380194237.jpg',
        'rating': u'8.2',
        'comment_count': 23456,
        'authors': u'托马斯·哈登·丘奇 / 泰伦斯·霍华德 / 波伊德·霍布鲁克 / 瑞斯·维克菲尔德 / 马尔洛·托马斯 /'
    }
]



@app.route('/')
def hello_world():
    context={
        'movies':movies,
        'tvs':tvs
    }
    return render_template('index.html',**context)


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

运行app.py

访问效果如下：

python flask豆瓣微信小程序案例

上一篇：笔记本电池怎么保养?笔记本电池正确保养及误区盘点

下一篇： Linux操作系统

python flask豆瓣微信小程序案例

微信小程序图片横向左右滑动案例

python获取微信小程序手机号并绑定遇到的坑

Python Flask 搭建微信小程序后台详解

Python爬虫微信小程序逆向某优选爬虫签名算法

python实现微信小程序自动回复

前端笔记之微信小程序（四）WebSocket&Socket.io&摇一摇案例&地图|地理位置

Python爬虫系列之微信小程序逆向某优选爬虫签名算法

小米5s微信跳一跳小程序python源码

基于腾讯云服务器部署微信小程序后台服务（Python+Django）

前端笔记之微信小程序（三）GET请求案例&文件上传和相册API&配置https