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_templateapp = 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;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_templateapp = 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

效果如下：

重构上面的代码

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_templateapp = 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

访问效果如下：

转载于:https://www.cnblogs.com/bkwxx/p/10077855.html

python flask豆瓣微信小程序案例相关推荐

Python Flask 搭建微信小程序后台详解
前言: 近期需要开发一个打分的微信小程序,涉及到与后台服务器的数据交互,因为业务逻辑相对简单,故选择Python的轻量化web框架Flask来搭建后台程序.因为是初次接触小程序,经过一番摸索和尝试,个 ...
flask ajax小程序,Python Flask 搭建微信小程序后台详解
后台程序返回了数据后,第三步就是小程序该怎么接收返回数据并进行相关业务逻辑处理. 小程序接收返回数据.Python-Flask向小程序返回了JSON格式的数据后,小程序的wx.requset()函数里 ...
微信小程序和python数据交互_记录 python flask 与微信小程序交互
一.小程序向flask传递参数 1.小程序将请求数据转换为JSON格式 wx.request({ url: 'http://127.0.0.1:8080/query_user', data: { go ...
Python + Flask 开发微信小程序
1. 微信开发文档地址: https://mp.weixin.qq.com/wiki/home/index.html 申请AppID 这些就不多说了,成为微信开发者之后使用一下网址就可以完成对 ...
Python Flask构建微信小程序订餐系统 (一)
微信小程序python flask_Python Flask 搭建微信小程序后台详解
前言: 近期需要开发一个打分的微信小程序,涉及到与后台服务器的数据交互,因为业务逻辑相对简单,故选择Python的轻量化web框架Flask来搭建后台程序.因为是初次接触小程序,经过一番摸索和尝试,个 ...
Flask开发微信小程序
flask介绍 Flask是一个python轻量级web框架,能够非常快速的就能把程序搭建起来,Flask是基于Python开发并且依赖jinja2和Werkzeng WSGI服务的一个微型框架,对于 ...
计算机毕业设计Python+uniapp基于微信小程序某企业考勤系统(小程序+源码+LW)
计算机毕业设计Python+uniapp基于微信小程序某企业考勤系统(小程序+源码+LW) 该项目含有源码.文档.程序.数据库.配套开发软件.软件安装教程项目运行环境配置: Pychram社区版+ ...
[附源码]计算机毕业设计Python+uniapp基于微信小程序某企业考勤系统01yr8(程序+lw+远程部署)
[附源码]计算机毕业设计Python+uniapp基于微信小程序某企业考勤系统01yr8(程序+lw+远程部署) 该项目含有源码.文档.程序.数据库.配套开发软件.软件安装教程项目运行环境配置: P ...
Flask与微信小程序之文件上传与显示
文章目录 Flask与微信小程序之文件上传与显示背景 flask_uploads应用 flask_uploads的使用步骤 1 安装flask-uploads模块 2 在文件夹中导入需要用到的库 3 ...

python flask豆瓣微信小程序案例

python flask豆瓣微信小程序案例相关推荐

最新文章

热门文章