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：二維碼生成工具

歡迎你們使用這個功能分享本身的項目，若是有需求請提到咱們的項目議題中