首次开发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;

首次开发H5长图页总结的更多相关文章

  1. ios开发之滑动长图截全屏应用

    最近做项目遇到要求截取图片长度超出手机屏幕,即可滑动的长图截屏,这里简单说一下解决思路,下面附带Demo下载地址. ,当我们要截全屏时,将滑动视图的frame以及偏移量记录下来,然后将滑动视图偏移量设 ...

  2. 开发H5游戏引擎的选择:Egret或Laya?

    开发H5游戏引擎的选择:Egret或Laya? 一.总结 一句话总结:选laya吧 二.开发H5游戏引擎的选择:Egret或Laya? 一.H5游戏开发的引擎介绍 开发H5游戏的引擎有很多,比如egr ...

  3. 模仿开发H5游戏,看你有多色

    开发记录 前言 之前跟着慕课网学习开发H5小游戏开心鱼,勾起我的兴趣. 在写代码的过程中,不怎么会遇到问题.虽然代码是亲手敲出来的,但是由于并没有对游戏的整体思路,所以并不知道开发与优化的过程. 为了 ...

  4. web实时长图实践--摘抄

    背景简介 全民K歌专辑发布新玩法,传统宣传专辑战绩的流程,从获取数据,到制作海报,到传播,周期长运营成本高,如何快速分享战绩进行荣誉感的传播成为一个亟待解决的问题. 产品:能不能在专辑大事件触发时,自 ...

  5. Android 截屏与 WebView 长图分享经验总结

    最近在做新业务需求的同时,我们在 Android 上遇到了一些之前没有碰到过的问题,截屏分享. WebView 生成长图以及长图在各个分享渠道分享时图片模糊甚至分享失败等问题,在这过程中踩了很多坑,到 ...

  6. 基于vuecli3构建一个快速开发h5 APP的模板

    基于vuecli3构建的一个快速开发h5 APP的模板,集成了高德地图.mint-ui,以及antv-f2可视化框架 vue-cli3安装 查看vue cli版本 vue --version 要求no ...

  7. 微信小程序_(校园视)开发视频的展示页_上

    微信小程序_(校园视) 开发用户注册登陆 传送门 微信小程序_(校园视) 开发上传视频业务 传送门 微信小程序_(校园视) 开发视频的展示页-上 传送门 微信小程序_(校园视) 开发视频的展示页-下 ...

  8. iPhone截长图的方法

    iPhone手机暂没有长图截取功能,所以我们只能通过别的方式进行长图截取. (2020年4月10日更新) ios13目前可以截长图了,不过只能在Safari中进行长图截取,而且存储形式为pdf格式,下 ...

  9. ReactNative新手学习之路04 组件化开发轮播图swiper支持安卓和IOS

    react native 新手之路04 组件化开发轮播图swiper支持安卓和IOS npm install react-native-carousel --save git 地址Properties ...

随机推荐

  1. 分享知识-快乐自己:Mybatis缓存机制

    论缓存机制: 1):mybatis 提供了缓存机制减轻数据库压力,提高数据库性能. 2):mybatis 的缓存分为两级:一级缓存.二级缓存 3):一级缓存是SqlSession级别的缓存,缓存的数据 ...

  2. python基础-正则2

    正则函数 Python提供re模块,包含所有正则表达式的功能 由于python的字符串本身也有\转义,所以需要注意: s = "ABC\\-001" 对应的正则表达式应为:'ABC ...

  3. SpringMVC框架<mvc:default-servlet-handler/>的作用

    1.创建一个新工程 Eclipse下新建一个web项目,File>New>Dynamic Web Project     2.添加Jar包     3.配置Web.xml     4.配置 ...

  4. CodeForces -163E :e-Government (AC自动机+DFS序+树状数组)

    The best programmers of Embezzland compete to develop a part of the project called "e-Governmen ...

  5. C# GUID使用总结

    全局唯一标识符(GUID,Globally Unique Identifier) What is GUID 也称作 UUID(Universally Unique IDentifier) . GUID ...

  6. shell 脚本学习之一 ------let,echo,变量

    转自:http://blog.chinaunix.net/uid-26827001-id-3154024.html 首先看到好多以这样开头的    #!/bin/bash   这个是告诉系统 解释此脚 ...

  7. 转载:SharePoint 2010 自定义 字段 类型--------省市区联动

    最近有几个朋友问到了有关自定义字段类型的问题,为了让更多的人了解自定义字段类型的方法,特写一篇博客与大家分享,首先看一下解决方案目录 创建自定义类型分以下几个步骤: 第一步:添加SharePoint映 ...

  8. Python的subprocess子进程和管道进行交互

    在很久以前,我写了一个系列,Python和C和C++的交互,如下 http://blog.csdn.net/marising/archive/2008/08/28/2845339.aspx 目的是解决 ...

  9. switch()出现警告warning:enumeration value ‘xxx’ not handled in switch

    enumeration value ... not handled in switch 如果在switch中使用使用枚举类型,如:switch(枚举类型) 枚举类型的个数没有全部列出,就会报这个警告

  10. js中的"=="和equals()以及is()三者的区别

    在 javaScript或者jQuery中字符串比较没有equals()方法,要比较两个字符串是否相等可以直接用==或者is()进行判断. 例如: "a"=="a&quo ...