Flask制作微信Html5滑屏宣传页

相对于其它方式,微信HTML5页面的传播力可谓惊人。为了方便大家把项目分享到朋友圈,我们新增了一个自动生成微信HTML5页面并分享的功能。
Raindrop创建自己的项目,填写信息,就可以把项目分享到朋友圈了。

效果

《Flask制作微信Html5滑屏宣传页》

实现

滑屏开源库

出于对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制作微信Html5滑屏宣传页》
可以看到,flask-assets给文件加上了版本号,当文件内容变化时,会自动更新版本号,强制客户端刷新缓存。

二维码生成

现在需要把制作好的H5页面分享到微信中,用手去敲url显然是不行的。为此我们需要一个二维码生成工具,方便用户分享。
因为网站是用angular写的,我们找了一个angular的qrcode库angular-qrcode
使用很简单,安装后,在页面中加上如下标签:
<qrcode size="100" data={{vm.shareUrl}} download></qrcode>
{{vm.shareUrl}}是需要分享页面的url

效果如下,现在只需要扫一扫就可以把自己的项目分享到朋友圈了。骚年,秀起来!
《Flask制作微信Html5滑屏宣传页》

总结

使用一下组件完成该功能:
1.powy1993/fullpage:滑屏组件
2.Flask-Assets:静态文件打包工具
3.angular-qrcode:二维码生成工具

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

    原文作者:miracledan
    原文地址: https://segmentfault.com/a/1190000003849215
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注