Flask制作微信Html5滑屏宣传页

[miracledan]

相对于其它方式，微信H5页面的传播力可谓惊人。为了方便大家把项目分享到朋友圈，我们新增了一个自动生成微信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：二维码生成工具

欢迎大家使用这个功能分享自己的项目，如果有需求请提到我们的项目议题中