求h5培训视频整套的,没有很大缺失需要的

最近公司申请了微信的H5支付 相关支付文档见这里 发布上线后发起支付 一直报错 商家参数格式有误请联系商家解决 根据微信官方文档的错误提示 应该是 referer 丢失的问题 于是定位一通发现还真是 referer 丢失了 记录下解决问题过程


告诉服务器我是从哪个页面链接过来的,服务器藉此可以获得一些信息用于处理

Referer 的囸确英语拼法是 referrer。由于早期 HTTP 规范的拼写错误为了保持向后兼容就将错就错了

比如你发现访问加载自己的资源 而 referer不是自己的站点 就可以屏蔽它

比如微信H5支付 也需要这个 就不知道他们做啥用了(hhh

来获取,也就是说referer的发送实际上是一个浏览器行为发送与否的决定权是在浏览器手里。虽然这样说但是HTTP协议对什么情况下,浏览器该发送什么情况下不该发送有着严格的规定。

总结下 Referer 丢失的几种情况

1.当网站使用refresh字段进行跳转的时候大多数浏览器不发送referer

2.从用户从一个HTTPS的网站点击链接到另┅个HTTP的网站时,不发送referer

6.在html头部中使用meta标签来控制不让浏览器发送referer

有时候需要在API项目中生成一些URL链接返回 但是服务器端已经配置了支持HTTPS通过HTTPS访问的时候生成的URL仍然是HTTP

关于这个问题其实是服务器 配置 问题 和 下面类似

回到我遇到的微信支付问题 跟踪了一圈浏览器嘚跳转之后发现是属性第二种情况 从 HTTPS 站点跳到 HTTP 站点 丢失了 Referer【ps:反过来从HTTP到HTTPS是没问题的 不会丢失 Referer】 中间藏的比较深

当然我一开始没有发现这个問题 因为从前端请求到 API 整个都没有问题 全部项目已经全线部署了 HTTPS , Referer 信息也有携带 然后到最后一步微信的支付请求URL的时候 Referer 就丢失了.

后面发现在請求到API项目的时候 API项目返回了一个 URL 给前端 这个 URL 是后端代码根据规则生成的(Laravel 里的 action 辅助函数) 这个函数本身并没有什么问题 但是生成的URL链接 是 HTTP 了 叒搞事情!!!

API项目配置的是 HTTPS 请求 但是生成的URL是 HTTP 问题就是这里了 请求运维哥协助 最后发现是 Nginx 反向代理中配置的问题

nginx服务器配置片段如下:


特点:以动画制作为长离线操莋,需服务器部署

作为设计工具类的鼻祖级Adobe的产品在体验和功能上还是非常棒的,唯一不足的是导出来的HTML5 canvas文件还需要配合前端代码实現和部署,如果需要添加交互的动作也需要一定的代码基础对不懂编程的设计师难度较大。Google的那个主要用于做HTML5动态bannerHype是苹果员工创业做嘚,跟An类似

不过An的动画制作是最精细的,原理上比较接近物理世界以下介绍一下时间轴动画的制作和界面:

如图所示为An的动画制作页媔,主要就是舞台和时间轴面板基本的机构就是舞台>层1 层2 层3...,时间轴>层1轨迹层2轨迹层3轨迹可以说时间轴就是整个动画最顶级的对象,所有层的动作都由时间轴控制其中每个层的轨迹又包含四个属性:X轴位置,Y轴位置X方向缩放,Y方向缩放通过设置每个属性随时间轴變化的曲线,就能组合出复杂动画

举个例子,让小球往右运动减速至零再返回,X轴位置随时间轴变化的曲线是这样的一个抛物线抛粅线的两端是关键帧:

当然,如果是匀速向右运动那就是一条斜线了,以此类推配合其他属性的曲线,可以做出多种变速运动/变形动畫

特点:以交互为长,可视化界面在线编辑和发布

iH5综合水平比较高,产品设计的初衷就是用可视化操作替代传统的编程在易用性和動画/交互制作上的平衡较好,属于能达到编代码效果的小白工具Adobe虽然可以做很复杂的动画,但是对一般用户而言即使做出来也不知道怎麼部署和应用可能更适合作为H5前端开发的辅助性工具。

Wix和Weebly以PC端HTML5建站为主类似WordPress的模板编辑模式,功能自由度低勉强归在这一类别。

iH5属於所见即所得的做法可视化界面操作,做出来的东西直接在线发布就可以使用对不懂编程的设计师或普通用户而言实用性较高。

动画淛作上iH5在单个动画的结构也是时间轴>轨迹1 轨迹2 轨迹3... 的形式,跟Adobe不同的地方是:

1、iH5可以添加多个时间轴并且不同的时间轴可以相互控制,比如让时间轴1播放到N秒时触发时间轴2播放动画。

2、iH5不是每个位置/变形属性都设置随时间轴变化的曲线它采取的是更傻瓜化的做法,通过设置起始关键帧的不同属性值自动补充动画,类似于Flash的补间动画

举个例子,让飞镖向右运动并旋转逐渐消失需要在小球的轨迹丅添加两个关键帧并设置小球的属性值:

关键帧1(时间轴=0秒)小球属性:X=0,Y=0透明度=100%,旋转=360度

关键帧2(时间轴=3秒)小球属性:X=500Y=0,透明度=0%旋转=360度

这样时间轴播放的时候,飞镖就会同时变化X和透明度的值实现向右运动并旋转消失的效果。

iH5是以交互为长除了做H5动画以外,哽有价值的是交互的制作比如现在比较流行视差网站,交互式动画响应式微官网,小游戏弹幕这些,都是属于交互式H5的范畴

特点:以信息展示为主,在线编辑

Epub360相对于其他几个有更强的交互功能不过本质上是PPT的逻辑,操作上也比其他三个工具要难些兔展、maka、易企秀目前以满足C端或者商家的简单展示需求为主,所以产品形态比较简单Prezi则专注于在线PPT演示。

之所以归到一类主要是从产品逻辑上考虑,形象一点说明:易企秀到Epub360是 1到2 的关系,而易企秀到iH5是 1到A 的关系,第二种变化已经不属于同一体系和功能

PPT动画其实是以动画为单元嘚,把元素的常见动画抽象打包然后每个动画可以设置延迟,先后顺序以此来实现组合式动画。基本的结构是 动效1>动效2>动效5>动效4>动效3

举个例子,还是飞镖向右运动然后逐渐消失需要给小球添加针对每种属性的动效,然后设置延迟和顺序:

添加向右运动的动效:持续時间=3秒延迟=0,出现方式=上一个之后开始

添加渐隐的动效:持续时间=3秒延迟=0,出现方式=和上一个一起开始

添加旋转的动效:持续时间=3秒延迟=0,旋转角度=360度出现方式=和上一个一起开始

Epub这种动画处理方式,属于顺序执行的对于简单的动画操作会更容易上手,但如果动画楿对复杂并且涉及很多交互,则容易显出弊端因为模块化的动效组件是没办法控制中间状态的。

比如渐隐这种动效你只能从不透明箌透明,而无法从不透明变到半透明;另外如果动效的队列很长,各种延迟和持续时间很难计算一旦有交互要跳转到某个页面或动画,PPT式的动画逻辑复杂度会非常高

整体而言,这几类工具的对比如下:


如果对内容质量要求不高以信息展示为主,并且希望快速产出選用兔展、易企秀之类的工具更合适。

如果对内容质量要求高涉及到动画、交互的制作,则选用iH5、Adobe之类的工具更合适编程的话,自由喥更高但人力投入、时间成本也高。

我要回帖

更多关于 缺失 的文章

 

随机推荐