Flask制作微信Html5滑屏宣传页

lentrue 发布于2019-08-02 18:19 / 2968人阅读

摘要：相对于其它方式，微信页面的传播力可谓惊人。框架的回调事件在微信里面太慢，等的心碎。二维码生成现在需要把制作好的页面分享到微信中，用手去敲显然是不行的。

相对于其它方式，微信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" %}
    
{% endassets %} 

{% assets "fullpage_js" %}
    
{% endassets %}

当访问页面时，flask-assets会检查文件变化，将css和js合并压缩后供前端使用。

可以看到，flask-assets给文件加上了版本号，当文件内容变化时，会自动更新版本号，强制客户端刷新缓存。

二维码生成

现在需要把制作好的H5页面分享到微信中，用手去敲url显然是不行的。为此我们需要一个二维码生成工具，方便用户分享。
因为网站是用angular写的，我们找了一个angular的qrcode库angular-qrcode
使用很简单，安装后，在页面中加上如下标签：

{{vm.shareUrl}}是需要分享页面的url

效果如下，现在只需要扫一扫就可以把自己的项目分享到朋友圈了。骚年，秀起来！

总结

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

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

混合云专线服务 html5动画制作 vps制作微信小程序滑屏移动视图类 html5与微信

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/55298.html

谈谈常见H5制作方法——视频与CSS3

摘要：但目前白名单申请途径已经关闭。目前在安卓有一种同层播放器的解决方案。可解决安卓机自动全屏以及视频播放完毕会跳出广告的问题，并且可以实现交互。本文在H5动效的常见制作手法的基础上，对相印的H5动效制作手法进行了扩展和整理，并结合案例谈谈怎么将其做得生动。视频类 1、体验案例视频类h5可以带给用户动效逼真，流畅的体验。虽然说制作视频的难度较大，但是瑕不掩瑜，一支视频可以尽可能地创造出...

Flink_China 2019-08-05 10:22 评论0 收藏0
谈谈常见H5制作方法——视频与CSS3

摘要：但目前白名单申请途径已经关闭。目前在安卓有一种同层播放器的解决方案。可解决安卓机自动全屏以及视频播放完毕会跳出广告的问题，并且可以实现交互。本文在H5动效的常见制作手法的基础上，对相印的H5动效制作手法进行了扩展和整理，并结合案例谈谈怎么将其做得生动。视频类 1、体验案例视频类h5可以带给用户动效逼真，流畅的体验。虽然说制作视频的难度较大，但是瑕不掩瑜，一支视频可以尽可能地创造出...

Bmob 2019-07-16 16:03 评论0 收藏0
谈谈常见H5制作方法——视频与CSS3

摘要：但目前白名单申请途径已经关闭。目前在安卓有一种同层播放器的解决方案。可解决安卓机自动全屏以及视频播放完毕会跳出广告的问题，并且可以实现交互。本文在H5动效的常见制作手法的基础上，对相印的H5动效制作手法进行了扩展和整理，并结合案例谈谈怎么将其做得生动。视频类 1、体验案例视频类h5可以带给用户动效逼真，流畅的体验。虽然说制作视频的难度较大，但是瑕不掩瑜，一支视频可以尽可能地创造出...

tracy 2019-06-21 16:14 评论0 收藏0
H5 是 HTML5 吗？

摘要：我相信现在大多数人认为的页面，就是在手机微信分享的那种炫酷的网页。背景作为程序员经常会被业务人员问一些技术相关的热门词，比如：H5页面是什么？，我的回答是：符合 HTML5 标准实现的页面，大家为了方便，简称 H5。真的是这样的吗？当连续有人问相关的问题，并详细了解一些业务以后，慢慢的发现 H5 已经不单单是一个技术相关的词。之前被我们产品人员也问到一个类似的问题：怎么通...

gaomysion 2019-08-05 11:55 评论0 收藏0
关于微信朋友圈广告的H5页面制作de注意事项

摘要：其实官方文档已经写得很清楚了，记得不要用哈微信开发规范目录规范官方开发规范自测表压力测试项目初始化设置微信提供找项目负责人项目别名创建目录的名称，添加统计时的别名例上线地址绝对路径例例编译调试部署使用微信工具微信通用库是由微信朋友圈广告团队其实官方文档已经写得很清楚了，记得不要用es6哈~ 微信开发规范、目录规范官方开发规范http://ad.weixin.qq.com/learn...

FingerLiu 2019-08-21 11:18 评论0 收藏0