电子杂志界面素材替换方法及其相关设备技术

本申请实施例属于UI设计技术领域，应用于电子杂志界面素材替换领域中，涉及一种电子杂志界面素材替换方法及其相关设备，包括接收并解析初始化请求指令，获取进行初始化的界面素材的获取路径；根据获取路径获得进行初始化的界面素材，并将进行初始化的界面素材渲染在电子杂志界面的预留展示区域；接收用户在电子杂志界面通过点击方式发出的调取更新指令；解析调取更新指令，根据解析结果，调用相应的更新函数对进行初始化的界面素材进行调取更新。通过界面分屏和H5实现的方式，使得界面素材渲染到预留展示区域后实现电子杂志的便捷开发展示，设置左右翻页功能、图片缩放功能，实现模拟书本左右翻页动态化更新，提高电子杂志阅读用户的体验度。户的体验度。户的体验度。

【技术实现步骤摘要】
电子杂志界面素材替换方法及其相关设备


[0001]本申请涉及UI设计
，尤其涉及一种电子杂志界面素材替换方法及其相关设备。

技术介绍

[0002]随着行政部门对产品宣传线上化的升级，希望将过去纸质的公司月刊转为线上电子杂志面向全体公司用户开放，并且希望在pc端可以有更好的交互体验，做出翻书的效果。
[0003]目前常见的方式是通过引入相关的开源插件如turn.js或者使用网上制作电子杂志的网站来实现，但会带来信息安全、质量、产品持续维护等方面的问题，并且像turn.js插件依赖于jQuery库，而这个库属于较旧的依赖库，无法融入现有的代码体系中，会带来开发上的难度。

技术实现思路

[0004]本申请实施例的目的在于提出一种电子杂志界面素材替换方法及其相关设备，以解决现有技术在实现电子杂志功能的开发上存在性能和依赖资源较差，造成开发困难的问题。
[0005]为了解决上述技术问题，本申请实施例提供一种电子杂志界面素材替换方法，采用了如下所述的技术方案：
[0006]一种电子杂志界面素材替换方法，包括下述步骤：
[0007]接收电子杂志界面初始化请求指令，其中，所述初始化请求指令中包括进行初始化的界面素材的获取路径，所述界面素材包括图片资源；
[0008]解析所述初始化请求指令，获取所述进行初始化的界面素材的获取路径；
[0009]根据所述获取路径获得所述进行初始化的界面素材，并将所述进行初始化的界面素材渲染在所述电子杂志界面的预留展示区域；
[0010]接收用户在所述电子杂志界面通过点击方式发出的调取更新指令；
[0011]解析所述调取更新指令，获取所述调取更新指令对应的解析结果；
[0012]根据所述解析结果，调用相应的更新函数对所述进行初始化的界面素材进行调取更新。
[0013]进一步的，在执行所述接收电子杂志界面初始化请求指令的步骤之前，所述方法还包括：
[0014]获取构成所述电子杂志所需要的所有图片资源；
[0015]根据各所述图片资源在所述电子杂志中排版的先后顺序，将所述所有图片资源放置入预设数组中。
[0016]进一步的，在执行所述根据各所述图片资源在所述电子杂志中排版的先后顺序，将所述所有图片资源放置入预设数组中的步骤之前，所述方法还包括：
[0017]步骤301，统计所述所有图片资源的数量，记为第一数量；
[0018]步骤302，调用数组长度获取函数，获取所述预设数组内可存放图片资源的数量，记为第二数量；
[0019]步骤303，通过比较，判断所述第二数量是否小于所述第一数量；
[0020]步骤304，若所述第二数量小于所述第一数量，则调用数组扩容函数对所述预设数组进行扩容处理，获取扩容处理之后的新数组；
[0021]步骤305，重复执行步骤302至步骤304，直到所述第二数量不小于所述第一数量，停止扩容处理，获取并将最后一次扩容处理之后的新数组更新为所述预设数组。
[0022]进一步的，在执行所述根据所述获取路径获得所述进行初始化的界面素材，并将所述进行初始化的界面素材渲染在所述电子杂志界面的预留展示区域的步骤之前，所述方法还包括：
[0023]根据预设界面分屏组件，在所述电子杂志界面内划分出左侧预留展示区域和右侧预留展示区域两个展示部分；
[0024]分别为所述左侧预留展示区域和所述右侧预留展示区域匹配预先设置的H5页面标识；
[0025]根据所述左侧预留展示区域对应的H5页面标识生成所述左侧预留展示区域对应的图片渲染路径；
[0026]根据所述右侧预留展示区域对应的H5页面标识生成所述右侧预留展示区域对应的图片渲染路径；
[0027]所述将所述进行初始化的界面素材渲染在所述电子杂志界面的预留展示区域的步骤，具体包括：
[0028]通过将所述左侧预留展示区域对应的图片渲染路径作为目标路径，从所述预设数组中获取第一展示素材，通过所述第一展示素材和所述目标路径，完成所述电子杂志的左侧预留展示区域的界面素材渲染，其中，所述第一展示素材为初始化时预设渲染在左侧预留展示区域的界面素材；
[0029]通过将所述右侧预留展示区域对应的图片渲染路径作为目标路径，从所述预设数组中获取第二展示素材，通过所述第二展示素材和所述目标路径，完成所述电子杂志的右侧预留展示区域的界面素材渲染，其中，所述第二展示素材为初始化时预设渲染在右侧预留展示区域的界面素材。
[0030]进一步的，在执行所述接收用户在所述电子杂志界面通过点击方式发出的调取更新指令的步骤之前，所述方法还包括：
[0031]根据预设CSS属性为所述左侧预留展示区域匹配设置向左翻页功能和第一点击交互区域；
[0032]根据预设CSS属性为所述右侧预留展示区域匹配设置向右翻页功能和第二点击交互区域；
[0033]根据预设CSS属性为所述左侧预留展示区域和所述右侧预留展示区域匹配设置图片放大功能、图片缩小功能、左侧常规交互区域和右侧常规交互区域。
[0034]进一步的，所述解析所述调取更新指令，获取所述调取更新指令对应的解析结果的步骤，具体包括：
[0035]对所述通过点击方式发出的调取更新指令进行解析，获取所述用户进行点击时点
击触点在所述电子杂志界面处的坐标位置信息，其中，所述调取更新指令中包括所述用户进行点击时点击触点在所述电子杂志界面处的坐标位置信息；
[0036]所述根据所述解析结果，调用相应的更新函数对所述进行初始化的界面素材进行调取更新的步骤，具体包括：
[0037]根据所述坐标位置信息，识别所述点击触点所处的点击交互区域；
[0038]若所述点击触点所处的点击交互区域属于所述第一点击交互区域，则调用所述向左翻页功能所对应的更新函数，实现向左翻页；
[0039]若所述点击触点所处的点击交互区域属于所述第二点击交互区域，则调用所述向右翻页功能所对应的更新函数，实现向右翻页；
[0040]若所述点击触点所处的点击交互区域属于所述左侧常规交互区域或右侧常规交互区域，则根据预设判断规则实现界面素材的缩放。
[0041]进一步的，所述根据预设判断规则实现界面素材的缩放的步骤，具体包括：
[0042]根据预设的监测日志，识别进行本次点击交互之前所述点击交互区域处对应图片的缩放状态，其中，所述监测日志中记录了所述电子杂志界面内正在展示的图片资源的缩放状态信息；
[0043]若进行本次点击交互之前所述点击交互区域处对应图片处于缩小状态，则调用所述图片放大功能所对应的更新函数，对所述点击交互区域处对应图片进行放大展示；
[0044]若进行本次点击交互之前所述点击交互区域处对应图片处于放大状态，则调用所述图片缩小功能所对应的更新函数，对所述点击交互区域处对应图片进行缩小展示。
[0045]为了解决上述技术问题，本申请实施例还提供一种电子杂志界面素本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种电子杂志界面素材替换方法，其特征在于，包括下述步骤：接收电子杂志界面初始化请求指令，其中，所述初始化请求指令中包括进行初始化的界面素材的获取路径，所述界面素材包括图片资源；解析所述初始化请求指令，获取所述进行初始化的界面素材的获取路径；根据所述获取路径获得所述进行初始化的界面素材，并将所述进行初始化的界面素材渲染在所述电子杂志界面的预留展示区域；接收用户在所述电子杂志界面通过点击方式发出的调取更新指令；解析所述调取更新指令，获取所述调取更新指令对应的解析结果；根据所述解析结果，调用相应的更新函数对所述进行初始化的界面素材进行调取更新。2.根据权利要求1所述的电子杂志界面素材替换方法，其特征在于，在执行所述接收电子杂志界面初始化请求指令的步骤之前，所述方法还包括：获取构成所述电子杂志所需要的所有图片资源；根据各所述图片资源在所述电子杂志中排版的先后顺序，将所述所有图片资源放置入预设数组中。3.根据权利要求2所述的电子杂志界面素材替换方法，其特征在于，在执行所述根据各所述图片资源在所述电子杂志中排版的先后顺序，将所述所有图片资源放置入预设数组中的步骤之前，所述方法还包括：步骤301，统计所述所有图片资源的数量，记为第一数量；步骤302，调用数组长度获取函数，获取所述预设数组内可存放图片资源的数量，记为第二数量；步骤303，通过比较，判断所述第二数量是否小于所述第一数量；步骤304，若所述第二数量小于所述第一数量，则调用数组扩容函数对所述预设数组进行扩容处理，获取扩容处理之后的新数组；步骤305，重复执行步骤302至步骤304，直到所述第二数量不小于所述第一数量，停止扩容处理，获取并将最后一次扩容处理之后的新数组更新为所述预设数组。4.根据权利要求1所述的电子杂志界面素材替换方法，其特征在于，在执行所述根据所述获取路径获得所述进行初始化的界面素材，并将所述进行初始化的界面素材渲染在所述电子杂志界面的预留展示区域的步骤之前，所述方法还包括：根据预设界面分屏组件，在所述电子杂志界面内划分出左侧预留展示区域和右侧预留展示区域两个展示部分；分别为所述左侧预留展示区域和所述右侧预留展示区域匹配预先设置的H5页面标识；根据所述左侧预留展示区域对应的H5页面标识生成所述左侧预留展示区域对应的图片渲染路径；根据所述右侧预留展示区域对应的H5页面标识生成所述右侧预留展示区域对应的图片渲染路径；所述将所述进行初始化的界面素材渲染在所述电子杂志界面的预留展示区域的步骤，具体包括：通过将所述左侧预留展示区域对应的图片渲染路径作为目标路径，从所述预设数组中
获取第一展示素材，通过所述第一展示素材和所述目标路径，完成所述电子杂志的左侧预留展示区域的界面素材渲染，其中，所述第一展示素材为初始化时预设渲染在左侧预留展示区域的界面素材；通过将所述右侧预留展示区域对应的图片渲染路径作为目标路径，从所述预设数组中获取第二展示素材，通过所述第二展示素材和所述目标路径，完成所述电子杂志的右侧预留展示区域的界面素材渲染，其中，所述第二展示素材为初始化时预设渲染在右侧预留展示区域的界面素材。5.根据权利要求4所述的电子杂志界面素材替换方法，其特征在于，在执行所述接收用户在所述电子杂志界面通过点击方式发出的调取更新指令的步骤之前，所述方法还包括...

【专利技术属性】
技术研发人员：刁伟栋，
申请(专利权)人：中国平安财产保险股份有限公司，
类型：发明
国别省市：