首次开发H5长图页总结

首次开发H5长图页总结.

资源统一加载

资源统一加载, 分开获取

定义资源标识符

• 在src/resources目录下 定义各个资源模块.
• 在Asset.js中获取定义好的所有模块, 循环出具体的文件路径, 统一数组.
• 按照一定规则组件文件id, 方便页面中获取.

暴露方法, 挂载全局

在全局app.init的时候, 进行资源的初始化, 并把初始化的资源对象挂载到Global对象上, 方面后续其他页面的资源获取.(Global用作全局属性管理).代码的执行顺序为:

app.init() => new Asset() => asset.load() => asset.onComplete() => initStage() => ....

• load: 可开始加载全部资源
• onComplete: 资源全部加载完成
• getAsset: 获取指定资源

切换思想

全局只存在两个container; 所有页面交替出现

创建舞台的过程

所有的页面均在initStage()初始化舞台时, 进行创建, 以确保资源全部加载完成. 舞台初始化完成, 所有的页面也均初始化完成.

initStage()过程包括:

1. initBus(): 初始化全局的事件订阅系统
2. createStage(): 创建舞台, 在创建舞台的时候, 就和绑定好了滚动函数.
3. initScene: 因为刚开始的代码逻辑出现问题, 全局只有一个场景, 是起初没有考虑到的
4. 完成, 即可把第一个页面推出显示栈.

页面创建过程

在创建舞台的时候, 会初始化场景, 我们的页面总体分成: 舞台 > 场景 > 部分(页面)

初始化场景的过程, 也就是初始化所有页面的过程:
new Scene() => init partMap() => partMap.push(new Part)

partMap是所有页面的集合, 按照显示顺序进行创建.

• 每当执行new part时, 就是页面执行自身constructor, 并调用init方法的过程.
• 因每一个页面都是通过push方法, 放入到parMap中的, 故初始化过程的中partMap的长度就是, 当前页面所在partMap中的位置
• 页面创建后, 会包含所有后续需要的属性, 以及页面声明周期中所有状态的初始化.
• 并在创建过程中完成各个模块的监听

页面生命周期

正序执行过程: p1.start => p1.next => p2.start => p1.end => p2.next => ....
倒序执行过程: p2.prev => p1.restart => p2.end => ....

每次声明周期函数, 为避免计算错误, 只在特定的时间执行一次, 故需要一些关键的状态管理

• start: 页面开始函数, 即让页面执行addTo()添加到舞台中

• reStart: 重新展示页面, 让页面的执行addTo(stage, 0), 让页面插入到舞台的最底层位置

• prev: 上一个页面战术, 即让上一个页面执行reStart()重新展示

• next: 下一个页面战术, 即下一个页面执行start()方法

• end: 页面展示结束, 从父元素中remove出来, 并重置方法执行状态.

  除next方法, 需要在页面内具体实现外, 其他方法均为统一处理

• shouldUpdate: 监听到滚动, 执行页面内具体逻辑

滑动高度

在initStage的时候, 绑定滚动事件. 并广播全局事件.

动态计算

• 全局总高度: 每一次new part的时候, 都会累加整个页面需要的总高度, 并以此设计能够滑动的高度.
• 页面高度计算方式: 页面的高度, 是通过参数传入的.
• 页面开始高度:
  • 从全局看: 当前页面高度是, 之前所有页面的累加高度, 也就是全局的高度.
  • 从页面看: 所有的页面都是从0开始.

当前页面的滚动位置

当前页面滚动的位置 = 总共滚动过的高度 - 当前页面开始的高度

• <0的部分还和上一个页面重叠
• >0之后, 自己完全出现
• 合适的时机 调用, next, 下一个页面就可以开始<0的过程了.
• 当滚动的高度大于当前页面的高度时, 就是执行end的时候了.

附上核心实现函数

// Part.js
// 注: 此函数依赖全局模块
import Global from './Global'

const Part = Hilo.Class.create({
  Mixes: Hilo.EventMixin,
  constructor: function (properties) {
    this.parentNode = properties.parentNode || null; // 页面所属场景
    this.parentContainer = properties.parentNode ? properties.parentNode.content : null; // 页面所属容器
    this.parentName = properties.parentNode ? properties.parentNode.name : ''; // 页面所属场景名称
    this.name = properties.name || ''; // 页面名称
    this.partHeight = properties.height || 0; // 页面的总高度
    this.disappearNext = properties.disappear || 0; // 页面需要消失的距离

    this.state = 'hide'; // 当前页面是否展示
    this.nextDone = false; // next函数是否执行过
    this.prevDone = false; // prev函数是否执行过
    this.index = this.parentNode.partMap.length; // 此处为核心概念, 根据数组长度确定当前索引!!
    this.content = new Hilo.Container({
      id: this.name
    });

    this.initStartHeight(); // 计算当前页面的在全局中的开始高度
    if (this.init instanceof Function) this.init();
    // 监听用户滚动, 高度变化.
    Global.bus.on('changeTouchHeight', this.changeTouchHeight.bind(this));
  },
  initStartHeight: function () {
    // 获得当前页面在全剧中的高度
    var perNode = this.getPrevNode()
    this.startHeight = perNode ? Global.totalHeight += perNode.partHeight : Global.totalHeight;

    // 页面能够滚动到的最大高度
    var maxHeight = (this.startHeight + this.partHeight - Global.height) / Global.touchSpeed;
    Global.scroller.setDimensions(0, 0, 0, maxHeight)
  },
  changeTouchHeight: function (info) { // 监听高度变化
    if (this.state === 'show' && this.shouldUpdate instanceof Function) {
      var touchHeight = info.detail.distance - this.startHeight; // 页面内的高度变化值
      var direction = info.detail.direction; // 滚动的方向
      if (direction === 'up' && touchHeight <= 0) { // 向上滚动, 且高度小于0, 上一个页面展示
        this.prev();
      }
      if (direction === 'down' && touchHeight >= this.partHeight) { // 向下滚动, 超过当前页面最大高度, 从父容器中抽出
        console.log(this.name, 'down end')
        this.end()
      }
      if (direction === 'up' && this.getPrevNode()  && touchHeight < -this.getDisappearPrev()) { // 向上滚动, 超过上一个页面的消失高度, 从父元素中抽出
        console.log(this.name, 'up end')
        this.end()
      }
      // 调用生命周期, 通知页面内变化
      this.shouldUpdate(touchHeight, direction);
    }
  },
  start: function () { // 开始展示
    if (this.state === 'show') return;
    this.state = 'show';
    console.log(this.name, 'start');
    if (this.onStart instanceof Function) this.onStart();
    this.content.addTo(this.parentContainer);
  },
  reStart: function () { // 再次展示, 也就是向上滑动, 展示到舞台的最底层
    if (this.state === 'show') return;
    this.state = 'show';
    console.log(this.name, 'reStart');
    if (this.onreStart instanceof Function) this.onreStart();
    this.content.addTo(this.parentContainer, 0);
  },
  prev: function () { // 展示上一个页面
    if (this.state === 'hide' || this.prevDone) return;
    if (this.getPrevNode() && this.getPrevNode().state === 'show') return;
    this.prevDone = true;
    console.log(this.name, 'prev')
    if (this.onPrev instanceof Function) this.onPrev();
    this.getPrevNode() && this.getPrevNode().reStart();
  },
  next: function () { // 展示下一个页面
    if (this.state === 'hide' || this.nextDone) return;
    if (this.getNextNode() && this.getNextNode().state === 'show') return;
    this.nextDone = true;
    console.log(this.name, 'next')
    if (this.onNext instanceof Function) this.onNext();
    this.getNextNode() && this.getNextNode().start();
  },
  end: function () { // 页面展示结束, 抽出
    if (this.state === 'hide') return;
    console.log(this.name, 'end')
    if (this.onEnd instanceof Function) this.onEnd();
    this.state = 'hide';
    this.content.removeFromParent();
    this.getNextNode() && (this.getNextNode().prevDone = false);
    this.getPrevNode() && (this.getPrevNode().nextDone = false);
  },
  getPrevNode: function () { // 获取上一个页面节点
    var map = this.parentNode.partMap;
    var index = this.index;
    return map[index - 1];
  },
  getNextNode: function () { // 获取下一个页面节点
    var map = this.parentNode.partMap;
    var index = this.index;
    return map[index + 1];
  },
  getDisappearNext: function () { // 向下滚动消失需要的距离
    return this.disappearNext;
  },
  getDisappearPrev: function () { // 向上滚动消失需要的距离
    return (this.getPrevNode() && this.getPrevNode().getDisappearNext()) || 0;
  },
});

export default Part;