Articles
13
Tags
8
Categories
1
Home
Archives
Tags
Categories
Catalog
  1. 1. 搭建小型服务器
  2. 2. 获取地理位置
  3. 3. 获取x、y、z方向的加速度
  4. 4. 体感
  5. 5. 本地存储 只能存字符串
  6. 6. 平滑的动画
  7. 7. history
  8. 8. worker 多线程
H5新特性
|前端
Post View:

很多h5接口需要在https协议下才能使用，而苹果在11.1.x版本后必须使用https才能使用

因为很多接口需要在手机上使用，所以先说下怎么搭建一个小型服务器。

搭建小型服务器

  1. 创建一个server.js文件
  2. npm init 一路回车
  3. npm install express –save（需要node版本在8以上）
  4. 创建page文件夹，里面放html文件。express默认访问index.html
  5. 运行服务器 node server.js，浏览器打开http://127.0.0.1:12306/就可以访问，如果是其他html，可以访问http://127.0.0.1:12306/其他.html
  6. 手机同时访问该网页： 同一个局域网，找到自己的ip更换127.0.0.1。
    1
    2
    3
    4
    5
    //server.js代码
    var express = require('express')
    var app = new express
    app.use(express.static('./page'))
    app.listen(12306)  //设置端口号。如果不想写是默认80
    这样一个简单的服务器就搭建好了，手机端可以访问相同的页面。

获取地理位置

window.navigator.geolocation.getCurrentPosition
需要在https协议下或者file协议下（本地打开文件）才能使用这个方法
因为获取地理位置是一个私人信息，用http会暴露。
只有在手机端才可以获取准确的位置，电脑端只能获取大概的位置。

1
2
3
4
5
6
window.navigator.geolocation.getCurrentPosition(
  function(position) {
  //获取成功后的回调
},function(err) {
  //获取失败后的回调
})

获取x、y、z方向的加速度

devicemotion
使用场景：摇一摇

1
2
//html
<div id='main'></div>
1
2
3
4
5
6
7
8
9
10
11
12
window.addEventListener('devicemotion',function(e) {
  document.getElementById('main').innerHTML = `
  x:${e.acceleration.x},
  y:${e.acceleration.y},
  z:${e.acceleration.z},
  `
  //Math.abs求绝对值
  //判断加速度
  if(Math.abs(e.acceleration.x) > 9 ||Math.abs(e.acceleration.y) > 9 || Math.abs(e.acceleration.z) > 9 ) {
    alert('在晃')
  }
})

体感

deviceorientation
可以制作指南针
alpha: 指南针，当为0的时候指北，180指南。
beta： 平放为0，立起来（短边）为90。倒立为-90
gamma： 平放为0，立起来（长边）为90，倒立-90

1
2
3
4
5
6
7
window.addEventListener('deviceorientation', function(e) {
  document.getElementById('main').innerHTML = `
  alpha: ${e.alpha},
  beta:${e.beta},
  gama: ${e.gamma}
  `
})

本地存储 只能存字符串

localStorage

1
2
3
4
localStorage.xxx = xx || localStorage.setItem('xx',xxx) //存储 
localStorage.xxx = xx  || localStorage.getItem('xx',xxx)//获取
localStorage.removeItem('xx',xxx)  //删除某一条
localStorage.clear() //清空

localStorage是一个永久存储，根据每个浏览器不同而内存不同，大小约5M。
sessionStorage是当页面关闭的时候存储的内容就会清空，大小也是约5M。
cookie大小4k，每次发起请求都会把cookie里面存储的内容发送到服务器上。

平滑的动画

requestAnimationFrame
默认1s执行60帧，相当于settimeout，需要一直调用。
和setinterval的区别是：
如果setinterval也设置时间为1000/60，如果每次执行的代码时间不在设置的这个时间范围内，则还是会丢帧。而requestAnimationFrame是一定会准时按照这个时间来每一帧每一帧执行的。
兼容性极差
cancelAnimationFrame() 相当于 clearTimeout

1
2
3
4
5
6
7
8
9
function move() {
  var square = document.getElementById('main')
  if(square.offsetLeft > 700) {
    return
  }
  square.style.left = square.offsetLeft + 20 + 'px'
  requestAnimationFrame(move)
}
move()
1
2
3
4
5
6
7
8
9
function move() {
  var square = document.getElementById('main')
  if(square.offsetLeft > 700) {
    return
  }
  square.style.left = square.offsetLeft + 20 + 'px'
}
//如果执行的代码时间很短，跟requestAnimationFrame对比看不出差别。
setInterval(move, 1000/60);

history

历史记录堆栈
当单页面应用：搜索功能想后退回到上一步操作的时候可以用
history.pushState({inpVal: 'xx'}, null, '#' + value) 锚点，也可以写成路径"/" + value

1
2
3
4
//当url变化的时候就会监听到，两个一起使用的时候，这个最先执行。
window.addEventListener('popstate', function(e) {})
//只有当锚点变化的时候才会监听
window.addEventListener('hashchange', function(e) {})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
//例子
 var data = ['js','html','css']
  function search() {
    var value = document.getElementById('search').value
    var result = data.filter(it => it === value)
    renderdata(result)
    //添加记录
    history.pushState({inpVal: value}, null, '#' + value)
  }
  function renderdata(data) {
    var conten = ''
    for (let i = 0; i < data.length; i++) {
      conten += `<div>${data[i]}</div>`
    }
    document.getElementById('main').innerHTML = conten 
  }
  //这样后退的时候就可以恢复页面，使用户看到之前的搜索页面
  window.addEventListener('popstate', function(e) {
    var value = e.state? e.state.inpVal: ''
    document.getElementById('search').value = value
    var result = data.filter(it => it === value)
    renderdata(result)
  })
  window.addEventListener('hashchange', function(e) {
    console.log(e)
  })
  //html
  <input type="text" id='search'><button onclick="search()">搜索</button>
  <div id="main"></div>

worker 多线程

  1. 可以在执行js过程中把耗时长的放到worker中执行
  2. 不能操作dom，没有window对象，不能读取本地文件。可以发ajax，可以计算。
  3. 兼容性很差
  4. worker文件里面不能继续使用worker,没有一个浏览器支持。
  5. 可以双向发送和接收信息
  6. 停止worker： worker.terminate() 在worker.js中可以this.close()

如果需要异步操作，可以创建一个worker
创建worker: var worker = new Worker('./worker.js')
发送消息:worker.postMessage({name: 123})
接收消息: worker.onmessage = function(e) {console.log(e.data)}

H5
繁