今天早上主要是接着做昨天的微信端网页预览附件,听同事说当打包代码放入服务器上后,就不存在跨域问题了,也就懒得自己写接口了,那么就希望自己能一次过吧...结果写着写着,发现开发文档中关于预览文件的方法,在实际操作的时候竟然没有!也就是说,开发文档给了一个实际sdk中不存在的方法,真的是无语死了,结果搞来搞去一早上加昨晚都白搞了...那么还能怎么办呢,汇报了一下情况之后选择别的方法呗。首先pc端及app端的预览页面采用的是window.open的形式,而这种形式是会被微信自带浏览器给屏蔽的!
所以只好开始面向搜索引擎编程,一开始我是想在详情列表中,内嵌一个iframe来展示预览内容,发现奇丑无比,自适应大小也不是很会调,就放弃了这个方案。后来就打算碰碰运气,看看用最简单直接的办法,location.href = url来打开要预览的文件。谁知道这个方法竟然过了...这时候我才明白微信浏览器应该是可以自动打开各类主流文档和图片的。虽说预览效果达到了,但bug也出现了,点击了自带的返回按钮后,退出到列表详情页面,因为没有请求参数,导致页面没有数据,一片空白。然后大概想了一下,需要做一个页面,这个页面要有一个返回功能,带参数用来再次请求数据,然后内嵌一个组件(其实不可行)或子页面来显示预览内容。然后很快做出了一个带返回按钮的预览界面。子页面用的还是iframe...将要预览的文件的url地址传入该页面,绑定在iframe的src属性上,调整一下子页面大小,就大功告成了。返回按钮同事说他来做,就不关我事了~
然而快下班时,发现返回按钮这个设定不可行,因为如果采用返回按钮的形式,那么再次点击自带的返回按钮,则会依次跳转回之前的页面,这就很蛋疼,意味着始终会跳转回空白的详情页面。那么又要重新想办法了,既然不能用返回按钮,那么就只能使用自带的返回按钮了。然后我想到了一般的页面都有缓存机制,于是我就去查在Vue中的缓存机制,果然,可以通过设置缓存,来使返回的页面带有数据。在和同事交流之后决定采用这种方式。果然,第一次使用的东西一般总会有bug。在简单的配置了App.vue和index.js(路由设置下meta属性的keepAlive属性)之后,发现从预览页面返回到详情页面是有数据的,然而从主页再进入详情页则不会刷新数据。经过了解,大概是缓存页面后,vue页面的生命周期和钩子函数有改动,看来这部分特别重要需要去深入学习一下,改天再单发博客记录一下心得(挖坑)。再然后,也看到源来缓存的属性,是可以动态设置的,可以根据路由的切换来变换是否缓存,那么希望明天可以通过了解这方面来解决需求。
然后下午断断续续的做了昨天要求做的静态页面,因为根本无法看懂组长的前端组件,不知道怎么使用,所以自己通过ydui临摹了一个出来。在经过同事的谆谆教诲之后,终于看明白了组长的自定义组件,打算明天如果没什么事,就把静态页面用我们自己的组件库来写(挖坑)。想起来还有SSM框架搭建步骤和git常用命令没有写,头很大,只希望可以还有很多时间来学习,只有一技之长,才能摆脱焦虑。
Terence Xie
2018.7.25 周三 23:51