mobileHack

白屏解决与优化方案

当前很多无线页面都是用前端模板进行数据渲染，那么在糟糕的网速情况下，一进去页面，看到的不是白屏就是 loading，这称为白屏问题。

此问题发生的原因基本可以归结为网速跟静态资源

1、css 文件加载需要一些时间，在加载的过程中页面是空白的。

解决：可以考虑将 css 代码前置和内联。

2、首屏无实际的数据内容，等待异步加载数据在渲染页面导致白屏

解决：在首页直接同步渲染 html，后续的滚屏等再采用异步请求数据和渲染 html

3、首屏内联 js 的执行会阻塞页面的渲染。

解决：尽量不在首屏 html 代码中房子内联脚本

解决方案

根本原因是客户端渲染的无力，因此最简单的方法是咋服务器端，使用模板引起渲染所有页面。同时

1 减少文件加载体积，如 html 压缩，js 压缩

2 加快 js 执行速度，比如常见的无限滚动的页面，可以使用 js 先渲染一个屏幕范围内的东西

3 提高一些优化的交互，比如提供一些假的滚动条

4 使用本地存储处理静态文件

如何实现打开已安装的 app，若未安装则引导用户安装？

来自 http://gallery.kissyui.com/redirectToNative/1.2/guide/index.htmlopen in new window kissy mobile 通过 iframe src 发送请求打开 app，自定义 url scheme，如 taobao://home(淘宝首页)、etao://scan（一淘扫描）;如果安装了客户端则会直接唤起，直接唤起后，之前浏览器窗口（或者扫码工具的 webview）推入后台；如果在指定的时间内客户端没有被唤起，则 js 重定向到 app 下载地址。大概实现代码如下

goToNative:function () {
    if(!body) {
        setTimeout(function() {
            document.body.appendChild(iframe);
        }, 0)
    } else {
        body.appendChild(iframe)
    }
}

setTimeout(function () {
    document.body.removeChild(iframe);
    gotoDownload(stratTime) // 去下载，下载链接一般是 itunes app store 或者 apk 文件链接
   	// 测试时间设置小于800ms时，在android下的UC浏览器会打开native appp时并下载apk，
    // 测试android+UC下打开native的时候最好大于800ms
}, 800)

需要注意的是如果是 android chrome 25 版本以后，在 iframe src 不会发送请求，原因如下 https://developers.google.com/chrome/mobile/docs/intentsopen in new window ，通过 loacation href 使用 intent 机制拉起客户端可行并且当前页面不跳转

window.location =
    'intent://' +
    schemeUrl +
    '#Intent;scheme=' +
    scheme +
    ';package=' +
    self.package +
    ';end';

神奇的 iframe

Flutter 开发的App引用，打开企业微信客服，返回时会白屏

起初用的是 location.href

例如

location.href = 'https://work.weixin.qq.com/kfid/xxx'

不行，后来同事用 iframe 打开可以

我很惊讶，iframe 不是嵌入代码吗，怎么能打开，于是向同事要了代码

<iframe id="iframe" frameborder="0" style="opacity: 0;position: absolute;"></iframe>
<script>
  const iframe = document.getElementById('iframe');
  iframe.setAttribute('src', 'https://work.weixin.qq.com/kfid/xxxx');
</script>

神奇，给 iframe 赋值，竟然能唤起企业微信

这不 hack 吗

# mobileHack

# 白屏解决与优化方案

# 解决方案

# 如何实现打开已安装的 app，若未安装则引导用户安装？

# 神奇的 iframe

# 参考资料

mobileHack

白屏解决与优化方案

解决方案

如何实现打开已安装的 app，若未安装则引导用户安装？

神奇的 iframe

参考资料