项目步骤
定义首页模板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') }}" al