移动页面开发

Posted on | In

基于APP的移动页面开发

如何唤醒app

URL Scheme：一个可以让app相互之间可以跳转的协议
UniversalLink：通过传统http链接来启动app的技术，可以使用相同的网址打开网站和app

浏览器中唤起native app

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{
  _openApp(openUrl, callback) {
    var iframe = document.createElement('iframe');
    iframe.src = openUrl;
    var body = document.body;
    body.appendChlid(iframe);
    setTimeout(()=>{
      body.removeChild(iframe)
      callback && callback(1)
    }, 800)
  },
  appGo(openUrl, downUrl) {
    this._openApp(openUrl, (opened) => {
      if (opened) {
        console.log('app awake success')
      } else {
        window.location.href = downUrl
      }
    })
  }
}

如何和app进行数据交互

jsBridge

移动端性能优化

  1. 首屏优化
  2. 白屏时间
  3. 可交互时间
  4. 完全加载时间

定位性能问题

首屏时间 = DNS时间 + 建立连接时间 + 后端相应时间 + 网络传输时间 + 首屏页面渲染时间

移动端的一些坑

1px

用scale

慎用fixed

使用绝对定位代替

transition闪屏

1
2
3
4
5
6
body {
/*设置内嵌的元素在 3D 空间如何呈现：保留3D */
-webkit-transform-style: preserve-3d;
/* 设置进行转换的元素的背面在面对用户时是否可见：隐藏 */
-webkit-backface-visibility:hidden;
}

计时器 暂停

  • 放入后台任务，用websocket进行传输（这是最方便快捷的方法）
  • 把定时器函数里的时间累加逻辑，换成每次都从系统时间获取。
  • 使用监听事件visibilitychange，当监听到离开页面时，使js动画暂停，回来后继续

active失效

1
2
3
4
5
6
7
8
<style>
  a{color:#000;}
  a{color:#fff;}
</style>
<a href="#">btn</a>
<script>
  document.addEventListener('touchstart', function () {})
</script>

页面滚动

overflow的滚动效果不佳，用-webkit-overflow-scrolling代替

1
2
/* 当手指从触摸屏上移开，会保持一段时间的滚动 */
html {-webkit-overflow-scrolling: touch; }