在微信小程序中渲染HTML内容

1个月前

大部分Web应用的富文本内容都是以HTML字符串的形式存储的，通过HTML文档去展示HTML内容自然没有问题。但是，在微信小程序（下文简称为「小程序」）中，应当如何渲染这部分内容呢？

解决方案

wxParse

小程序刚上线那会儿，是无法直接渲染HTML内容的，于是就诞生了一个叫做「wxParse」的库。它的原理就是把HTML代码解析成树结构的数据，再通过小程序的模板把该数据渲染出来。

rich-text

后来，小程序增加了「rich-text」组件用于展示富文本内容。然而，这个组件存在一个极大的限制：组件内屏蔽了所有节点的事件。也就是说，在该组件内，连「预览图片」这样一个简单的功能都无法实现。

web-view

再后来，小程序允许通过「web-view」组件嵌套网页，通过网页展示HTML内容是兼容性最好的解决方案了。然而，因为要多加载一个页面，性能是较差的。

小动画大学问

2个月前

对于移动端的Web单页应用来说，为了达到媲美原生应用的效果，页面过渡动画是必不可少的。常用的页面过渡动画包括：

位移——当前页向左侧或右侧水平移出可视区，下一页由反方向移入可视区。
不透明度变化——当前页淡出，下一页淡入。
1和2同时进行。

（注意：以下讨论和实验均在 Chrome 68 浏览器环境下进行）

目前大多数设备的屏幕刷新率为60次/秒，算下来每个帧的预算时间约为16.66毫秒（1/60秒）。考虑到浏览器还有其他工作要执行，实际上预算时间只有10毫秒。跟此预算时间的差值越大，用户就会觉得动画过程越卡。那么，在这10毫秒内要完成什么事情呢？当使用JavaScript实现视觉交互效果时，一般要经过以下流程：

JavaScript视觉交互执行流程

PWA初探

2个月前

HTML 5 曾被认为是移动应用的明天，却被原生App在性能和功能上轻易战胜，Web逐渐成为App的附属。然而，马云“爸爸”告诉我们：“梦想还是要有的，万一实现了呢？”如今，我们离梦想又近了一步。

PWA，全称「Progressive Web App」，是Google提出的为Web提供App般使用体验的一系列技术方案。它优势主要体现在：

可在离线或网络较差的环境下正常打开页面。
安全（HTTPS）。
保持最新（及时更新）。
支持安装（添加到主屏幕）和消息推送。
向下兼容，在不支持相关技术的浏览器中仍可正常访问。

本文将逐一讲述PWA涉及的主要技术方案。

网页端「应用跳转」技术实现演变

9个月前

由于网页传播的便捷性，从网页向APP导流几乎是所有APP厂商都会采用的推广手段，具体来说就是在网页上提供一些触发点（例如按钮、链接），用于跳转到APP。

应用跳转

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 = 'none';
        iframe.src = '/favicon.ico';
        iframe.onload = () => {
            setTimeout(() => {
                document.body.removeChild(iframe);
            }, 9);
        };
        document.body.appendChild(iframe);
    }
}

据说新版的微信和QQ已经修复了这个bug，但为了兼容旧版本，这段代码还是必须的。

Vue.js项目模板搭建

1年前

前言

从今年（2017年）年初起，我们团队开始引入「Vue.js」开发移动端的产品。作为团队的领头人，我的首要任务就是设计整体的架构。一个良好的架构必定是具备丰富的开发经验后才能搭建出来的。虽然我有多年的前端开发经验，但就「Vue.js」来说，仍然是个新手。所幸「Vue.js」有一个配套工具「Vue-CLI」，它提供了一些比较成熟的项目模板，很大程度上降低了上手的难度。然而，很多具体的问题还是要自己思考和解决的。

项目划分

我们公司的H5产品大部分是嵌套在手机客户端里面的页面。每个项目的功能都比较独立，而且规模不大。这样一来，既可以让这些小项目各自为政，也可以把它们集中放到一个大项目中管理。各自的优缺点如下：

	一个大项目	多个小项目
代码仓库	一个	多个
代码冲突	可能性大	可能性小
独立发布	不可行	可行
公共代码	共用一份	重复维护、加载

考虑到我们团队刚开始使用「Vue.js」，需要逐步摸索出合适的架构。如果做成一个大项目，一旦架构要调整，很可能会伤筋动骨。所以最终的选择是划分成多个小项目。

X5同层播放器试用报告

1年前

移动端浏览器中的video元素是比较特别的，早期无论是在iOS还是Android的浏览器中，它都位于页面的最顶层，无法被遮盖。后来这个问题在iOS下得到了解决，但是Android的浏览器则问题依旧。X5是腾讯基于Webkit开发的渲染引擎，它提供了一种名叫「同层播放器」的特殊video元素以解决遮盖问题。

简单使用

同层播放器的使用方式跟普通的video元素差别不大，只是需要加上两个X5的自定义属性：「x5-video-player-type」和「x5-video-player-fullscreen」。

下面做一个测试页面嵌入同层播放器：

body {
	margin: 0;
	background: #000;
	font-size: 0.3rem;
}
.player {
	width: 100%;
	height: 4.22rem;
}
.player .video {
	width: 100%;
	height: 100%;
}

<video id="video" class="video" controls="controls" playsinline x5-video-player-type="h5" x5-video-player-fullscreen="true">
    <source src="video.mp4" />
</video>

setTimeout/setInterval的最大延时值

2年前

先来看这样一段代码：

function update() {
    loadData().then(function(data) {
        $('#content').html(data.content);
        var delay = data.nextUpdateTime - new Date();
        if (delay > 0) {
            setTimeout(update, delay);
        }
    });
}

其流程非常简单：通过AJAX加载数据后更新HTML的内容；如果有指定下次更新时间，则通过计时器在该时间点再执行一次整个流程。

要说这段代码有什么隐患的话，那就是data.nextUpdateTime与当前时间的时间差（即delay变量的值）比较小的时候，会导致内容频繁更新。但这是属于正常的业务逻辑，要优化就只能牺牲内容更新的即时性。然而这里我要说的是，当时间差非常大的时候，也会出现同样的问题。

安卓版微信Webview中两个页面互相跳转的BUG

2年前

都说微信是移动端的IE6，不管你们信不信，反正我信了。最近在开发过程中就遇到了一个极其容易触发的BUG。

复现这个BUG只需要两个页面「a.html」以及「b.html」，并且两个页面都有跳去另一个页面的链接：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<title>A</title>
</head>

<body>
<h1>I am A.</h1>
<p><a href="b.html">to B</a></p>
</body>
</html>

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<title>B</title>
</head>

<body>
<h1>I am B.</h1>
<p><a href="a.html">to A</a></p>
</body>
</html>

先打开「a.html」，点击链接跳转到「b.html」，再点击「b.html」中的链接跳转到「a.html」。如此往复点击跳转几次，就会出现无法再次跳转的情况（会出现进度条，但是无法跳转）。

hashchange事件及其妙用

2年前

hash即URL中“#”字符后面的部分。使用浏览器访问网页时，如果网页URL中带有hash，页面就会定位到id（或name）与hash值一样的元素的位置，故而又称之为锚点。hash还有另一个特点，它的改变不会导致页面重新加载，因此在单页应用流行的当下，它的用处就更多了。

而hashchange事件，顾名思义，就是hash改变时触发的事件。在 caniuse.com 上查一下兼容性可以发现，IE8就已经支持该事件，但一直以来应用甚少。

hashchange事件兼容性

hashchange事件触发时，事件对象会有hash改变前的URL（oldURL）和hash改变后的URL（newURL）两个属性：

window.addEventListener('hashchange', function(e) {
	console.log(e.oldURL);
	console.log(e.newURL);
}, false);