前言
上一篇文章主要介绍了我们团队的「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,但为了兼容旧版本,这段代码还是必须的。
Nginx中转
在「Vue.js」的项目根目录下,只要运行命令「npm run dev」就可以启动开发服务器,此时用浏览器打开「http://localhost:端口号」就可以访问页面。然而,使用这个域有两个问题:
- 无法获取实际运行环境的Cookie;
- 后端接口有可能不允许来自「localhost」的跨域请求。
这种情况下,就要配置一个本地开发用的域名(可以是不存在的域名),通过Nginx(或者IIS、Apache)把请求中转到「Vue.js」的开发服务器。具体的Nginx配置可能是这样:
server {
listen 80;
server_name webapp-local.ibeiliao.com;
location ^~ /project-a/ {
proxy_pass http://127.0.0.1:9001;
proxy_set_header Host $host;
}
}
接着修改「hosts」,把本地开发用的域名「webapp-local.ibeiliao.com」指向「127.0.0.1」,这样就可以用该域名访问页面了。
然而,加了这一层中转后,项目的热更新功能出现了延迟。具体表现就是:先后对一个文件进行两次修改并保存,第二次保存的时候,浏览器才会更新到第一次保存的内容。搜索了一番才知道,这是因为Nginx默认缓存了所代理的服务器的响应内容,达到一定的量才会返回给客户端。所以只要把缓冲关掉就可以解决问题了:
server {
listen 80;
server_name webapp-local.ibeiliao.com;
location ^~ /project-a/ {
proxy_pass http://127.0.0.1:9001;
proxy_set_header Host $host;
# 关闭缓冲
proxy_buffering off;
}
}
分享封面图
Webpack中的「url-loader」会把小图片转成base64编码:
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
}
例如这样的源代码:
<img src="./assets/logo.png">
经过构建之后会变成这样:
<img src="data:image/png;base64,iVBOR...此处省略成百上千个字符...DACog5YM65zugAAAAAElFTkSuQmCC">
移动端的主流浏览器都支持显示base64编码的图片,所以这不会带来兼容性问题。然而,调用微信JSSDK设置分享的封面图时,安卓版的微信并不支持base64编码的图片。
针对这个问题,有两种常见的解决方案:
- 通过其他途径(如FTP)把封面图传到服务器上,然后通过URL进行引用。但是这样一来,封面图就不在当前项目内了。
- 修改「url-loader」的「limit」配置。比如分享封面图是5K,可以把「limit」调整为小于5k,这样「url-loader」就会把图片构建为独立文件而不是base64编码。但是为了一张小图修改整体的打包策略,并不靠谱。
所以,最后用的方案是:把不需要打包的文件统一放在一个文件夹内,然后让「file-loader」取代「url-loader」去处理这个文件夹。假设不需要打包的文件都在根目录下的「static」文件夹内,那么可以这样修改「/build/webpack.base.conf.js」中的构建配置:
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
},
include: [resolve('src')],
exclude: [resolve('static')]
},
{
loader: 'file-loader',
options: {
name: utils.assetsPath('static/[name].[hash:7].[ext]')
},
include: [resolve('static')]
}
UIWebView内的奇怪阻塞
这个是在项目测试过程中发现的bug:在一个播放音乐的页面中,有一个地方同步显示音乐的当前播放位置;音乐开始播放后,这个地方的内容会不断改变,但是滚动页面后,内容却不再变化,看起来像是某个环节被阻塞了。并且,这个bug只在iOS 9以上的UIWebView中出现,iOS的WKWebView以及安卓的WebView则表现正常。
下面通过一个简单的demo重现bug出现的场景,关键代码如下:
<template>
<div>
<audio ref="player" :src="audioURL" @timeupdate="updateTime" controls></audio>
<div class="current-time">{{ time }}</div>
</div>
</template>
<script>
export default {
data() {
return {
audioURL: require('./music.mp3'),
time: ''
};
},
methods: {
updateTime() {
this.time = this.$refs.player.currentTime;
document.title = this.time;
}
}
};
</script>
页面逻辑非常简单,播放音乐的时候,通过timeupdate事件的回调修改数据字段「time」的值,从而把当前播放位置不断更新到界面上。同时,也把「time」的值更新到页面标题,这样做的目的是检查「time」的赋值是否成功。
常用的APP中,新浪微博还在用UIWebView,用它打开demo,运行效果如下:
可见,滚动页面的操作结束后,页面内的数字不再更新,但是标题还在继续变化。这说明了timeupdate事件是在不断触发的,「time」字段的值也是在不断更新,但是数据变化后更新到界面(刷新DOM)的过程被阻塞了。
要继续研究下去,看来只能啃「Vue.js」的源代码了,但是恰巧,我们在出现bug的产品页中发现了另一个现象:出现阻塞问题后,页面中调用客户端的功能也被阻塞了。这又让我们怀疑是客户端的锅,但调试过后发现并不是。我们把客户端的功能调用都封装成了Promise,在调试过程中,我们发现该Promise实例既无法进入then的流程,也没有进入catch的流程,所以开始怀疑被阻塞的是Promise,于是就在demo中增加两个按钮「Button1」和「Button2」:
<template>
<div>
<audio ref="player" :src="audioURL" @timeupdate="updateTime" controls></audio>
<div class="current-time">{{ time }}</div>
<input type="button" value="Button1" @click="click1" />
<input type="button" value="Button2" @click="click2" />
</div>
</template>
<script>
export default {
data() {
return {
audioURL: require('./music.mp3'),
time: ''
};
},
methods: {
click1() { alert('click1'); },
click2() {
Promise.resolve().then(() => {
alert('click2');
});
},
updateTime() {
this.time = this.$refs.player.currentTime;
document.title = this.time;
}
}
};
</script>
就如料想的那样,点击播放音乐并滚动页面后,点击「Button1」弹出了「click 1」,但是点击「Button2」却没有任何响应。这证明了被阻塞的确实就是Promise了。
找到了问题,就去搜索引擎上寻找答案,但是竟然搜到了「Vue.js」的源代码。本地打开「Vue.js」的源文件,也可以找到这一片代码:
从这里的注释可以发现,「Vue.js」的开发团队也知道Promise在UIWebView下的阻塞问题,并进行了修复,但为什么demo页仍然有问题呢?
排查bug很重要的一点就是尽量减少重现问题所需的代码和依赖。于是,我用「Vue-CLI」创建一个新项目,并把demo页放到此项目中。此时再用新浪微博打开页面进行同样的操作,并没有出现阻塞问题。依次安装项目中用到的「SASS」、「postcss-px2rem」、「Vuex」和「babel-polyfill」,并在每次安装后都重新打开demo页进行操作。最后发现,装完「babel-polyfill」之后问题就重现了。
iOS 8以上的Safari和WebView已经支持Promise,但是实测发现,「babel-polyfill」会用自己的Promise覆盖原生的Promise!查看「babel-polyfill」所依赖的「corejs」的代码可以发现,它对Promise的特性检查比较严格:
由于iOS下的Promise并没有完全支持这些特性,所以「corejs」用自己的Promise把原生的Promise覆盖了。而且,看起来「Vue.js」对阻塞问题的修复对「corejs」的Promise无效。
这样一来,解决方案有三个:
- 不要安装「babel-polyfill」,但这样会造成旧版本浏览器下无法运行「Vuex」。
- 升级到WKWebView,但这不是短期内可以完成的事情。
- 加载「babel-polyfill」后,把浏览器的Promise重置回原生的Promise。
考虑到那些额外的特性在实际开发中基本用不上,方案3反而是一种比较好的临时解决方案。
先调整「babel-polyfill」的引入方式,把它的代码文件通过其他方式传到服务器上。然后修改项目入口文件,也就是根目录下的「index.html」,检查到是iOS>=9时,就把原生Promise保存下来,待「babel-polyfill」加载执行完之后,再把保存下来的Promise覆盖回去:
<script>
var _Promise;
// 检查是否iOS9+(iOS9+才支持Symbol)
var useNativePromise = typeof Promise === 'function' &&
/^(iPhone|iPad|iPod)/.test(navigator.platform) &&
typeof Symbol === 'function';
if (useNativePromise) { _Promise = Promise; }
</script>
<script src="//s2.imgbeiliao.com/assets/js/lib/babel-polyfill/6.23.0/polyfill.min.js"></script>
<script>
if (_Promise) { Promise = _Promise; }
</script>
另外,既然「babel-polyfill」已通过script标签引入,就可以删除对它的依赖了:
npm uninstall babel-polyfill --save
然后修改「/build/webpack.base.conf.js」,移除「babel-polyfill」的打包入口:
entry: {
// app: ['babel-polyfill', './src/main.js']
app: ['./src/main.js']
}
这种临时的解决方案其实并不优雅,让客户端尽快升级到WKWebView才是正道。
(最新消息,iOS 11的Promise已经是“完全体”,可以通过「corejs」的特性检查,所以不会再有这个阻塞的问题)
后记
实际开发中遇到的问题其实挺多,但因为文章篇幅所限,我只挑了一些常见的,或者解决过程比较曲折的写在这。因为我接触「Vue.js」的时间并不长,写得不对的地方还望大家指正,有更好的解决方案也欢迎提出。
评论 (0条)