首页前端开发Node.js开发其他开发工作生活登录工作经历（七）-贝聊篇工作生活  |  3个月前离开上家公司后，我接受邀请加入了当时主打家园（家长、幼儿园）沟通的贝聊。虽然是创业公司，但贝聊已经有一定的用户规模和知名度。更重要的是，公司愿景与幼教行业的健康发展相符，因此也具备一定的社会价值。250次阅读，6条评论X5同层播放器应用实践前端开发  |  7个月前移动端浏览器中的video元素是比较特别的，早期无论是在iOS还是Android的浏览器中，它都位于页面的最顶层，无法被遮挡。后来，这个问题在iOS下得到了解决。但是对Android的大部分浏览器来说，问题仍然存在。X5是腾讯基于Webkit开发的浏览器内核，应用于Android端的微信、QQ、QQ浏览器等应用。它提供了一种名叫「同层播放器」的特殊video元素以解决遮挡问题。简单使用只要给普通的video元素加上X5的自定义属性 x5-video-player-type ，就可以调用同层播放器。示例代码如下：body {margin: 0;background: #000;}.video {width: 100%;}<div class="player"><video id="video" class="video" controls="controls" playsinline x5-video-player-type="h5"><source src="video.mp4" /></video></div>3431次阅读，11条评论打造一份网页版简历前端开发  |  7个月前多年前，因为换工作的需要，我得更新简历。但可能是写惯了CSS的缘故，在Word中排版实在是各种不顺手，于是就发挥了作为前端工程师的优势，把简历做成了网页。久而久之，这份简历就成为了我的个人产品，无论是否需要再找工作，每隔一段时间我都会进行更新迭代。网页版简历有以下这些好处：无须下载，直接打开；内容展示形式更丰富，排版更灵活；可以展示自己的技术能力；可以通过超链接访问外部资源（如个人作品）；可以让自己登上搜索引擎的榜单（SEO）。在此基础上，我还给这份简历定下了一个重要目标——「Write once, run anywhere」。兼容PC、手机和平板设备，还可以通过浏览器直接打印。本文将从技术角度描述这样一份简历的开发过程。设计说到设计，很多程序员会喊：“我是写代码的，不懂设计。”但俗话说得好：没吃过猪肉，总见过猪跑吧。平时看过这么多网页，还跟大量产品设计稿打交道。看到布局合适的，抄一下；看到配色合适的，抄一下；看到素材合适的，也抄一下。值得注意的是，近年来有一类页面特别适合改造成个人简历，那就是手机厂商每发布一款新手机都会做的手机宣传页。我自己的简历设计就是借鉴了iPhone的宣传页。4388次阅读，22条评论在微信小程序中渲染HTML内容前端开发  |  9个月前大部分Web应用的富文本内容都是以HTML字符串的形式存储的，通过HTML文档去展示HTML内容自然没有问题。但是，在微信小程序（下文简称为「小程序」）中，应当如何渲染这部分内容呢？解决方案wxParse小程序刚上线那会儿，是无法直接渲染HTML内容的，于是就诞生了一个叫做「wxParse」的库。它的原理就是把HTML代码解析成树结构的数据，再通过小程序的模板把该数据渲染出来。rich-text后来，小程序增加了「rich-text」组件用于展示富文本内容。然而，这个组件存在一个极大的限制：组件内屏蔽了所有节点的事件。也就是说，在该组件内，连「预览图片」这样一个简单的功能都无法实现。web-view再后来，小程序允许通过「web-view」组件嵌套网页，通过网页展示HTML内容是兼容性最好的解决方案了。然而，因为要多加载一个页面，性能是较差的。640次阅读，0条评论小动画大学问前端开发  |  9个月前对于移动端的Web单页应用来说，为了达到媲美原生应用的效果，页面过渡动画是必不可少的。常用的页面过渡动画包括：位移——当前页向左侧或右侧水平移出可视区，下一页由反方向移入可视区。不透明度变化——当前页淡出，下一页淡入。1和2同时进行。（注意：以下讨论和实验均在 Chrome 68 浏览器环境下进行）目前大多数设备的屏幕刷新率为60次/秒，算下来每个帧的预算时间约为16.66毫秒（1/60秒）。考虑到浏览器还有其他工作要执行，实际上预算时间只有10毫秒。跟此预算时间的差值越大，用户就会觉得动画过程越卡。那么，在这10毫秒内要完成什么事情呢？当使用JavaScript实现视觉交互效果时，一般要经过以下流程：307次阅读，0条评论PWA初探前端开发  |  10个月前HTML 5 曾被认为是移动应用的明天，却被原生App在性能和功能上轻易战胜，Web逐渐成为App的附属。然而，马云“爸爸”告诉我们：“梦想还是要有的，万一实现了呢？”如今，我们离梦想又近了一步。PWA，全称「Progressive Web App」，是Google提出的为Web提供App般使用体验的一系列技术方案。它优势主要体现在：可在离线或网络较差的环境下正常打开页面。安全（HTTPS）。保持最新（及时更新）。支持安装（添加到主屏幕）和消息推送。向下兼容，在不支持相关技术的浏览器中仍可正常访问。本文将逐一讲述PWA涉及的主要技术方案。414次阅读，0条评论网页端「应用跳转」技术实现演变前端开发  |  1年前由于网页传播的便捷性，从网页向APP导流几乎是所有APP厂商都会采用的推广手段，具体来说就是在网页上提供一些触发点（例如按钮、链接），用于跳转到APP。1230次阅读，3条评论Vue.js踩坑记前端开发  |  1年前前言上一篇文章主要介绍了我们团队的「Vue.js项目模板」的搭建过程，这只是第一步。作为新手，在实际开发过程中，难免还会遇到各种各样奇怪的问题。本文主要介绍问题的起因以及解决方式。导航栏标题在单页应用中，由于页面切换不会导致浏览器重新加载页面，所以页面的标题是不会改变的，这时候就要通过Javascript去修改标题。这个操作本来是非常简单的，只需要修改「document.title」即可：document.title = 'New title';然而，在iOS的微信和QQ中，这种方法可能无效，具体的现象就是：导航栏上的标题没有改变。这是iOS微信和QQ的bug，解决方法就是在修改「document.title」之后，用「iframe」发送一个请求（任意一个请求）。把相关的代码封装成函数：function setTitle(title) {document.title = title;if (isIOS && (isInWeixin || isInQQ)) {
let iframe = document.createElement('iframe');
iframe.style.display = 'n