Flask制作微信Html5滑屏宣传页
相对于其它方式，微信HTML5页面的传播力可谓惊人。为了方便大家把项目分享到朋友圈，我们新增了一个自动生成微信HTML5页面并分享的功能。
在Raindrop创建自己的项目，填写信息，就可以把项目分享到朋友圈了。
效果
实现
滑屏开源库
出于对android上的微信X5阉割内核的畏惧（坑太多），一开始就放弃了自己实现滑屏效果的想法。所以首要任务是找到一个相对稳定的开源库。
github上搜索一下fullpage，有很多。一开始没有考虑清楚，用了star最多的项目，做完找人体验后发现不行：
1.库文件较大，加载等待时间长。
2.框架的回调事件在微信X5里面太慢，等的心碎。
微信官方也开源了推广页的开发库，并且提供一些特殊接口，使用起来也简单。
不过把上下滑屏和左右滑屏结合起来使用比较麻烦。
考虑到浏览器的兼容问题和体验流畅度，最后使用了powy1993/fullpage，适合移动端，在微信上也比较流畅。
这个库的接口很简单，引入js后，简单初始化一下就可以用了。
flask模板文件
使用上面的fullpage库制作好H5页面后，需要整合到flask里面。
添加一条路由返回渲染的Jinja模板，这个就不多说了。
@app.route('/project')
def project():
........
return render_template('project/index.html', project=project)这里要考虑模板中引入的js和css文件的打包发布问题：
1.js、css文件需要合并压缩，缩短加载时间。
2.当js、css内容改变后，需要强制客户端刷新缓存。
为此使用了Flask-Assets，这个库帮助开发者把webassets工具整合到Flask项目中。使用起来也很简单：
1.安装
$ pip install Flask-Assets
为了压缩css和js文件，还要安装如下两个库
$ pip install cssmin $ pip install jsmin
2.初始化（proxy方式）
from flask.ext.assets import Bundle, Environment
assets = Environment()
def create_app(config_name):
......
assets.init_app(app)
bundles = {
'fullpage_css': Bundle(
'css/fullpage.css',
'bower_components/animate.css/animate.min.css',
output='gen/fullpage.css',
filters='cssmin'),
'fullpage_js': Bundle(
'js/fullpage.js',
output='gen/fullpage.js',
filters='jsmin'),
}
assets.register(bundles)3.在模板文件中引用
{% assets "fullpage_css" %}
<link rel="stylesheet" href="{{ ASSET_URL }}" />
{% endassets %}
{% assets "fullpage_js" %}
<script type="text/javascript" src="{{ ASSET_URL }}"></script>
{% endassets %}当访问页面时，flask-assets会检查文件变化，将css和js合并压缩后供前端使用。
可以看到，flask-assets给文件加上了版本号，当文件内容变化时，会自动更新版本号，强制客户端刷新缓存。
二维码生成
现在需要把制作好的H5页面分享到微信中，用手去敲url显然是不行的。为此我们需要一个二维码生成工具，方便用户分享。
因为网站是用angular写的，我们找了一个angular的qrcode库angular-qrcode
使用很简单，安装后，在页面中加上如下标签：<qrcode size="100" data={{vm.shareUrl}} download></qrcode>{{vm.shareUrl}}是需要分享页面的url
效果如下，现在只需要扫一扫就可以把自己的项目分享到朋友圈了。骚年，秀起来！
总结
使用一下组件完成该功能：
1.powy1993/fullpage：滑屏组件
2.Flask-Assets：静态文件打包工具
3.angular-qrcode：二维码生成工具
欢迎大家使用这个功能分享自己的项目，如果有需求请提到我们的项目议题中