CN112631572A - 基于移动端的代码展示方法、装置、设备及存储介质 - Google Patents

Abstract

本申请实施例属于研发管理领域，涉及基于移动端的代码展示方法、装置、设备及存储介质，其中，方法包括：在H5界面接收到触发指令时，查找代码中的标签；确定目标标签，创建空白图片，从所述代码中截取所述目标标签对应的代码段，将所述代码段写入所述空白图片，生成目标图片；将所述目标图片进行存储，将存储的所述目标图片显示于移动端的图片控件内。此外，本申请涉及区块链技术，所述目标图片的数据可存储于区块链中。本申请实施例通过对选定的所述代码段进行图片化处理，实现对所述代码段完整阅读，提高阅读的流畅度。

Description

基于移动端的代码展示方法、装置、设备及存储介质

技术领域

本申请涉及研发管理领域，尤其涉及基于移动端的代码展示方法、装置、设备及存储介质。

背景技术

Hybrid App(混合应用可读指令，混合APP)主要以JS+Native两者相互调用为主，从开发层面实现“一次开发，多处运行”的机制，成为真正适合跨平台的开发。由于HybridApp兼具了Native App(本地应用可读指令，原生APP)良好用户体验的优势，也兼具了WebApp(网页应用可读指令，移动Web)使用HTML5跨平台开发低成本的优势，因此，目前很多移动应用都是采用Hybrid混合应用开发模式。然而，在开发过程中，往往需要在移动端阅读代码，但在显示时，存在代码过长无法完整显示的问题，阅读时需要左右或上下滑动，而在滑动过程中会存在遗忘，或者滑动到其他代码段的问题，因此，为更方便的阅读代码，需要解决滑动过程容易错过该代码段，或者在阅读时显示不完整的问题。

发明内容

本申请实施例的目的在于克服在移动端阅读代码时，长代码无法完整显示，从而影响阅读流畅性的问题。

为了解决上述技术问题，本申请实施例提供基于移动端的代码展示方法，采用了如下所述的技术方案：

基于移动端的代码展示方法,包括：

在H5界面接收到触发指令时，查找代码中的标签，确定目标标签；

创建空白图片，从所述代码中截取所述目标标签对应的代码段，将所述代码段写入所述空白图片，生成目标图片；

将所述目标图片进行存储；

将存储的所述目标图片显示于移动端的图片控件内。

进一步地，所述在所H5界面接收到触发指令时，查找所述代码中的标签，确定目标标签的步骤之前，还包括：

监视H5界面加载所述代码；

当所述代码加载完成，查找所述代码中的分段标签，预先为每一个所述分段标签创建单击事件。

进一步地，所述在H5界面接收到触发指令时，查找代码中的标签，确定目标标签的步骤包括：

当检测到触发所述单击事件时，查找发生所述单击事件的所述分段标签；

将触发所述单击事件的所述分段标签确定为所述目标标签。

进一步地，所述创建空白图片，从所述代码中截取所述目标标签对应的代码段，将所述代码段写入所述空白图片，生成目标图片的步骤包括：

获取所述移动端屏幕宽和高，根据所述宽和高创建所述空白图片；

以所述目标标签为分段标志，获取所述目标标签对应的所述代码段的宽和高以及所述代码段的内容；

基于所述代码段的宽和高，将所述代码段的内容写入所述空白图片生成目标图片。

进一步地，所述基于所述代码段的宽和高，将所述代码段的内容写入所述空白图片生成目标图片的步骤包括：

比较所述代码段的宽和高与所述移动端屏幕的宽和高；

当所述代码段的宽和高大于所述移动端屏幕的宽和高，则等比缩小所述代码段的宽和高，将缩小后的所述代码段的内容写入所述空白图片生成目标图片；

当所述代码段的宽和高小于所述移动端屏幕的宽和高，则将所述代码段的内容直接写入所述空白图片生成目标图片。

进一步地，所述将所述代码段的内容写入所述空白图片，生成目标图片的步骤之后，还包括：

将所述目标图片进行压缩形成压缩图片，将所述压缩图片转化成字符串；

所述将所述目标图片进行存储的步骤包括：

将所述目标图片转化的所述字符串传输进入移动端的存储处进行存储。

进一步地，所述将存储的所述目标图片显示于图片控件内的步骤为：

唤醒部署在所述移动端的所述图片控件；

通过所述图片控件加载所述字符串，并转化成图片进行显示。

为了解决上述技术问题，本申请实施例还提供基于移动端的代码展示装置，包括：

标签确定模块，用于在H5界面接收到触发指令时，查找代码中的标签，确定目标标签；

图片生成模块，用于创建空白图片，从所述代码中截取所述目标标签对应的代码段，将所述代码段写入所述空白图片，生成目标图片；

存储模块，用于将所述目标图片进行存储；

显示模块，用于将存储的所述目标图片显示于移动端的图片控件内。

为了解决上述技术问题，本申请实施例还提供一种计算机设备，包括存储器和处理器，所述存储器中存储有计算机可读指令，所述处理器执行所述计算机可读指令时实现如上述的任意一项技术方案所述的基于移动端的代码展示方法的步骤。

为了解决上述技术问题，本申请实施例还提供一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机可读指令，所述计算机可读指令被处理器执行时实现如上述的任意一项技术方案所述的基于移动端的代码展示方法的步骤。

与现有技术相比，本申请实施例主要有以下有益效果：

本申请根据触发指令，从代码中截取触发的目标标签对应的代码段，将代码段写入创建的空白图片，生成目标图片并进行处理，转化为数据传入移动端，传入移动端的数据在图片控件中显示为图片。使代码片段能够根据阅读需要以图片的形式将该代码段完整的展示，且该图片的大小与屏幕的大小相同，方便查看，提高阅读的流畅性。

附图说明

为了更清楚地说明本申请中的方案，下面将对本申请实施例描述中所需要使用的附图作一个简单介绍，显而易见地，下面描述中的附图是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是本申请可以应用于其中的示例性系统架构图；

图2根据本申请的基于移动端的代码展示方法的一个实施例的流程图；

图3是本申请的基于移动端的代码展示装置的一个实施例的结构示意图；

图4是根据本申请的计算机设备的一个实施例的结构示意图。

具体实施方式

除非另有定义，本文所使用的所有的技术和科学术语与属于本申请的技术领域的技术人员通常理解的含义相同；本文中在申请的说明书中所使用的术语只是为了描述具体的实施例的目的，不是旨在于限制本申请；本申请的说明书和权利要求书及上述附图说明中的术语“包括”和“具有”以及它们的任何变形，意图在于覆盖不排他的包含。本申请的说明书和权利要求书或上述附图中的术语“第一”、“第二”等是用于区别不同对象，而不是用于描述特定顺序。

在本文中提及“实施例”意味着，结合实施例描述的特定特征、结构或特性可以包含在本申请的至少一个实施例中。在说明书中的各个位置出现该短语并不一定均是指相同的实施例，也不是与其它实施例互斥的独立的或备选的实施例。本领域技术人员显式地和隐式地理解的是，本文所描述的实施例可以与其它实施例相结合。

为了使本技术领域的人员更好地理解本申请方案，下面将结合附图，对本申请实施例中的技术方案进行清楚、完整地描述。

如图1所示，系统架构100可以包括终端设备101、102、103，网络104和服务器105。网络104用以在终端设备101、102、103和服务器105之间提供通信链路的介质。网络104可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。

用户可以使用终端设备101、102、103通过网络104与服务器105交互，以接收或发送消息等。终端设备101、102、103上可以安装有各种通讯客户端应用，例如网页浏览器应用、购物类应用、搜索类应用、即时通信工具、邮箱客户端、社交平台软件等。

终端设备101、102、103可以是具有显示屏并且支持网页浏览的各种电子设备，包括但不限于智能手机、平板电脑、电子书阅读器、MP3播放器(Moving PictureExpertsGroup Audio Layer III，动态影像专家压缩标准音频层面3)、MP4(MovingPictureExperts Group Audio Layer IV，动态影像专家压缩标准音频层面4)播放器、膝上型便携计算机和台式计算机等等。

服务器105可以是提供各种服务的服务器，例如对终端设备101、102、103上显示的页面提供支持的后台服务器。

需要说明的是，本申请实施例所提供的基于移动端的代码展示方法一般由服务 器/终端设备执行，相应地，基于移动端的代码展示装置一般设置于服务器/终端设备中。

应该理解，图1中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络和服务器。

继续参考图2，示出了根据本申请的基于移动端的代码展示方法的一个实施例的流程图。所述的基于移动端的代码展示方法，包括以下步骤：

步骤201，在H5界面接收到触发指令时，查找代码中的标签，确定目标标签；

用户在触发H5界面的标签，即使H5界面接收到触发指令，例如：代码中包含<p>,</p>,用户在点击触发<p>，即为触发指令，H5界面接收到触发指令，查找代码中的标签，确定触发的标签为目标标签。

在本实施例中，基于移动端的代码展示方法运行于其上的电子设备(例如图1所示的服务器/终端设备)可以通过有线连接方式或者无线连接方式获取代码。需要指出的是，上述无线连接方式可以包括但不限于3G/4G连接、WiFi连接、蓝牙连接、WiMAX连接、Zigbee连接、UWB(ultra wideband)连接、以及其他现在已知或将来开发的无线连接方式。

在步骤201之前，还包括：

监视H5界面加载代码；

当代码加载完成，查找代码中的分段标签，预先为每一个分段标签创建单击事件。

具体地，在承载H5页面的webview中监听待阅读代码的加载情况，当监听代码加载完成，通过webview调用JS代码，通过注入的JS代码遍历查找分段标签，为所有分段标签上挂载onclick事件，即单击事件。

通过对每个分段标签创建对应的单击事件，保证触发后锁定的代码段为待处理代码段。

进一步地，步骤201包括：

当检测到触发单击事件时，查找发生单击事件的分段标签；

将触发单击事件的分段标签确定为目标标签。

由于每一个分段标签上都挂载了单击事件，对H5页面的任意一个分段标签进行单击，都会触发单击事件，一次单击事件展示一张图片。根据H5界面的单击触发调用请求，将受单击的分段标签指定为目标标签，确定目标标签，锁定目标标签对应的代码段为待处理对象，确定后续需要处理的代码段。例如：单击H5页面的分段标签A，分段标签A即确定为目标标签，分段标签A对应的代码段即为待处理对象。

通过确定目标标签，锁定待处理的对象，保证处理过程的连贯性。

步骤202：创建空白图片，从代码中截取目标标签对应的代码段，将代码段写入空白图片，生成目标图片。

根据步骤201确定目标标签后，以目标标签在对应代码段内的启始标志为起点，目标标签在对应段代码的结束标志为终点，确定待写入空白图片的代码段，保证了空白图片上写入的代码为完整的代码段。每一段代码段对应写入一张空白图片。在代码段写入空白图片的同时，将该代码段复制到剪切板，便于用户需要复制使用时，不需要拖到区块复制代码。

进一步地，步骤202包括：

获取移动端屏幕宽和高，根据宽和高创建空白图片；

以目标标签为分段标志，获取目标标签对应的代码段的宽和高以及代码段的内容；

基于代码段的宽和高，将代码段的内容写入空白图片生成目标图片。

要将代码段完整的写入空白图片，需获取写入空白图片的代码段基本宽和高，以保证代码段在空白图片中完整的显示。通过单击事件确定目标标签，目标标签对应的代码段即为待获取代码段，以目标标签在代码段的启始标志为起点，目标标签对应的在该段代码的结束标志为终点，确定为待写入空白图片的代码段，保证写入空白图片的代码段的完整性。不同移动端的屏幕大小存在差异，根据不同屏幕的宽与高，从而创建符合移动端大小的空白图片，保证生成目标图片贴合移动端屏幕。

创建空白图片的过程为：创建的与屏幕宽高相同的矩阵，在本实施例中，创建的画布为jmp格式的Canvas，(Canvas中可选参数maxWidth为文本的最大宽度，单位为像素。如果设置了该属性，当文本内容宽度超过该参数值，则会自动按比例缩小字体，使文本的内容全部可见)，空白图片为带矩阵的画布。通过drawText(Canvas基本绘制文本方法)写入代码段的内容。

进一步地，所述基于所述代码段的宽和高，将所述代码段的内容写入所述空白图片生成目标图片的步骤包括：

比较所述代码段的宽和高与所述移动端屏幕的宽和高；

当所述代码段的宽和高大于所述移动端屏幕的宽和高，则等比缩小所述代码段的宽和高，将缩小后的所述代码段的内容写入所述空白图片生成目标图片；

当所述代码段的宽和高小于所述移动端屏幕的宽和高，则将所述代码段的内容直接写入所述空白图片生成目标图片。

具体地，如果获取的代码段的比例与移动屏幕的比例不匹配，如代码段过长，在阅读过长代码段时，需要左右滑动代码段，由于代码过长，往往会忘记前部分代码，需往复多次滑动阅读，浪费阅读时间，影响阅读体验。本实施例通过获取代码段的宽、高和代码段的内容，将代码段与屏幕的宽和高进行比较，当代码段的宽和高大于移动端屏幕的宽和高，则等比缩小代码段的宽和高，以适应屏幕大小，保证最后显示的内容的完整性；当代码段的宽和高小于移动端屏幕的宽和高，则将代码段的内容直接写入空白图片生成目标图片。

保证代码段在空白图片中完整的显示，且生成的目标图片完整显示于屏幕，实现对代码段的完整阅读，提高阅读流畅性。

进一步地，将代码段的内容写入空白图片，生成目标图片的步骤之后，还包括：

将目标图片进行压缩形成压缩图片，将压缩图片转化成字符串；

将所述目标图片进行存储的步骤包括：

将目标图片转化的字符串传输进入移动端的存储处进行存储。

将代码段写入空白图片生成目标图片，通过压缩得到png格式的压缩图片，在其他实施例中，也可根据需要选择合适的压缩格式。将写入内容的压缩图片转化成base64字符串，提高传输速度，进一步提高处理速度。

通过对图片的压缩以及转化成字符串的处理，提高图片传输的速度，进一步提高代码转化成图片的效率。

步骤203：将目标图片进行存储。

通过webview创建供H5端调用的桥接方法，将base64字符串传输进入移动端的存储处进行存储。其中，桥接是指依据OSI网络模型的链路层的地址，对网络数据包进行转发的过程，待写入了内容的空白图片转化成base64字符串后，可调用此桥接传输进入移动端存储处进行存储。

步骤204：将存储的目标图片显示于移动端的图片控件内。

移动端设置有图片控件，该图片控件设置为隐藏状态，只有在发生单击分段标签触发调用请求后，生成目标图片并存储，图片控件转变为展示状态，加载存储的字符串，一次加载一张图片。图片控件通过webview监控加载。

在本实施例的一些可选的实现方式中，图片控件加载存储的对应的字符串，并转化成图片进行显示时，代码段图片由于缩小到设定值影响阅读时，通过旋转屏幕进行显示。

本申请通过检测到APP端，比如对H5页面的分段标签进行了单击，即为触发为分段标签创建单击事件，根据H5界面的单击触发调用请求，将受单击的分段标签指定为目标标签，确定目标标签，锁定目标标签对应的代码段为待处理对象，以确定后续需要处理的代码段。以当前目标标签在代码段的启始标志为起点，目标标签对应的在该段代码的结束标志为终点，确定为待写入空白图片的代码段，使得空白图片上写入的代码为完整的代码段，将代码段写入空白图片生成目标图片，并将目标图片显示移动端的图片控件内，实现对代码段的完整阅读，且由于生成图片格式，避免滑动到屏幕时滑动到其他代码段，提高阅读效率。

另外，本申请在代码段写入空白图片的同时，将该代码段复制到剪切板，便于用户复制使用。将目标图片进行压缩形成压缩图片并转化成字符串，输进入移动端的存储处存储，提高传输速度。

进一步地，步骤204包括：

唤醒部署在移动端的图片控件；

通过图片控件加载字符串，并转化成图片进行显示。

本实施例通过唤醒部署在移动端的图片控件，将图片控件从隐藏状态变为展示状态，并把移动端存储的base64的字符串加载到图片控件中，图片控件将base64的字符串转化成图片进行显示。webview检测到有图片控件，使用图片控件对base64的字符转化成图片进行展示。

图片控件为隐藏状态，保证在阅读代码时界面的简洁，减少界面冗杂。

在本实施例的一些可选的实现方式中，首次点击该H5界面的标签，将受单击的标签指定为目标标签，将目标标签对应的代码确定为待写入空白图片的代码段，生成目标图片，将目标图片进行压缩形成压缩图片并转化成字符串，将目标图片转化的字符串传输进入移动端的存储处存储，并显示于图片控件。在后续阅读中，根据阅读需要，再次点击相同的分段标签，直接唤醒部署在移动端的图片控件，通过图片控件直接加载已经存储的对应的字符串，并转化成图片进行显示，无需再次将该标签的代码段转化成图片，提高处理的速度。例如，点击分段标签A，分段标签A即为目标标签，将分段标签A对应的代码段写入空白图片，并将该空白图片压缩后转化成字符串，传到移动端，根据调用，则显示于图片控件。再次点击分段标签A，直接唤醒部署在移动端的图片控件，过图片控件直接加载已经存储的分段标签A的字符串，进行显示，提高显示速度。

在本实施例的一些可选的实现方式中，在图片控件显示时，检测回调操作，即左右滑动屏幕时，图片控件显示出回调图标，通过点击回调图标实现对显示过的图片的回调功能。回调标签通过并建立与存储的字符串的关联，实现点击回调标签时回调字符串。点击代码中的每一个分段标签都将分段标签对应的代码段生成一段字符串存储，并于图片控件中转化成图片显示，根据点击分段标签的顺序，将存储处存储的字符串进行排序，在图片控件界面生成图片的序号，即为回调图标，回调图标设定为隐藏属性，建立回调图标与对应图片的关联，当检测到图片控件中具有回调操作，则显示回调图标，点击回调图标，回调图标调用建立的关联，调用对应的字符串，进行显示。例如，依次点击分段标签A、分段标签B和分段标签C，与分段标签A对应的代码段A生成字符串A，唤醒部署在移动端的图片控件，通过图片控件加载移动端存储的字符串A进行显示，并将字符串A排序1；与分段标签B对应的代码段B生成字符串B，唤醒部署在移动端的图片控件，通过图片控件加载移动端存储的字符串B进行显示，并将字符串B排序2；与分段标签C对应的代码段C生成字符串C，唤醒部署在移动端的图片控件，通过图片控件加载移动端存储的字符串C进行显示，并将字符串C排序3；并在图片控件界面生成对应的图标1、2和3，图标1建立与字符串A的关联，图标2建立与字符串B的关联，图标3建立与字符串C的关联，点击图标1，则调用字符串A，图片控件再次将字符串A转化为图片显示。减少重复点击操作，节约阅读时间。需要强调的是，为进一步保证上述生成的字符串的私密和安全性，上述字符串信息还可以存储于一区块链的节点中。

本申请所指区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。区块链(Blockchain)，本质上是一个去中心化的数据库，是一串使用密码学方法相关联产生的数据块，每一个数据块中包含了一批次网络交易的信息，用于验证其信息的有效性(防伪)和生成下一个区块。区块链可以包括区块链底层平台、平台产品服务层以及应用服务层等。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机可读指令来指令相关的硬件来完成，该计算机可读指令可存储于一计算机可读取存储介质中，该可读指令在执行时，可包括如上述各方法的实施例的流程。其中，前述的存储介质可为磁碟、光盘、只读存储记忆体(Read-Only Memory，ROM)等非易失性存储介质，或随机存储记忆体(Random Access Memory，RAM)等。

应该理解的是，虽然附图的流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，其可以以其他的顺序执行。而且，附图的流程图中的至少一部分步骤可以包括多个子步骤或者多个阶段，这些子步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，其执行顺序也不必然是依次进行，而是可以与其他步骤或者其他步骤的子步骤或者阶段的至少一部分轮流或者交替地执行。

进一步地，如图3所示，本实施例的基于移动端的代码展示装置包括：标签确定模块301、图片生成模块302、存储模块303、显示模块304，其中：

标签确定模块301，用于在H5界面接收到触发指令时，查找代码中的标签，确定目标标签，

图片生成模块302，用于创建空白图片，从代码中截取目标标签对应的代码段，将代码段写入空白图片，生成目标图片；

存储模块303，用于将目标图片进行存储；

显示模块304，用于将存储的目标图片显示于移动端的图片控件内。

在本实施例的代码展示装置，根据触发指令，从代码中截取触发的目标标签对应的代码段，将代码段写入创建的空白图片，生成目标图片并进行处理，转化为数据传入移动端，传入移动端的数据在图片控件中显示为图片。使代码片段能够根据阅读需要以图片的形式将该代码段完整的展示，且该图片的大小与屏幕的大小相同，方便查看，提高阅读的流畅性。

在本实施例的一些可选的实现方式中，标签确定模块301包括：

检测子模块，用于当检测到触发单击事件时，查找发生单击事件的分段标签；

判定子模块，用于将触发单击事件的分段标签确定为目标标签。

保证处理的及时性；

在本实施例的一些可选的实现方式中，图片生成模块302包括：

获取子模块，用于获取移动端屏幕宽和高，根据宽和高创建空白图片；

生成子模块，用于以目标标签为分段标志，获取目标标签对应的代码段的宽和高以及代码段的内容，使生成的图片贴合屏幕大小；

写入子模块，基于代码段的宽和高，将代码段的内容写入空白图片生成目标图片。

其中，写入子模块包括：

比较单元，用于比较代码段的宽和高与移动端屏幕的宽和高，使代码段能够根据比较结果，进行调整，保证代码段完整写入空白图片。

调整单元，用于当代码段的宽和高大于移动端屏幕的宽和高，则等比缩小代码段的宽和高，将缩小后的代码段的内容写入空白图片生成目标图片，当代码段的宽和高小于移动端屏幕的宽和高，则将代码段的内容直接写入空白图片生成目标图片，保证代码完全写入空白图片。

在本实施例的一些可选的实现方式中，显示模块304包括：

唤醒单元，通过唤醒部署在所述移动端的图片控件；

转化单元，通过图片控件加载存储的字符串，并转化成图片进行显示。

图片控件的属性设置为隐藏能够状态，在没有对分段标签进行触发时，图片控件为隐藏状态，便于阅读代码，分段标签受到触发，唤醒图片控件，并通过图片控件加载字符串，转化成图片进行显示。

在本实施例的一些可选的实现方式中，代码展示装置还包括：

监控模块，用于监视H5界面加载所述代码，

事件创建模块，用于当所述代码加载完成，查找所述代码中的分段标签，预先为每一个所述分段标签创建单击事件，便于锁定待处理代码段。

本实施例中，通过监视H5界面加载代码保证代码的完整，对每个分段标签创建对应的单击事件，保证触发后锁定的代码段为待处理代码段。

在本实施例的一些可选的实现方式中，代码展示装置还包括：

压缩模块，用于将目标图片进行压缩形成压缩图片，将压缩图片转化成字符串，提高传输的效率；

存储模块303还用于将目标图片转化的字符串传输进入移动端的存储处进行存储。

在H5页面中，因为适配问题，阅读代码片段没有在PC端方便，对于一排很长的代码，由于没有对代码进行处理，在有限的移动端界面无法进行完整的显示，根据阅读时的习惯，大都会从左往右依次进行阅读，对于较长的代码，往往需要左右滑动界面进行阅读，或者对于较长的代码段，在阅读完前排代需要阅读该段代码后续内容，或者在阅读完该段代码段的后排代码，想要返回阅读前排代码时，需要上下滑动，但是由于滑动过程中会存在滑动到其他代码段的情形，浪费时间，影响阅读体验。本申请在H5界面加载完代码后，通过webview加载JS代码，通过加载的JS代码在加载的代码中查找分段标签，并为所有分段标签上挂载单击事件，方便对分段标签进行单击后触发后续处理过程。根据H5界面的单击触发调用请求，将受单击的分段标签指定为目标标签，确定目标标签，锁定目标标签对应的代码段为待处理对象，以确定后续需要处理的代码段。以目标标签在代码段的启始标志为起点，目标标签对应的在该段代码的结束标志为终点，确定为待写入空白图片的代码段，使得空白图片上写入的代码为完整的代码段，将代码段写入空白图片生成目标图片。在代码段写入空白图片的同时，将该代码段复制到剪切板，便于用户复制使用。将目标图片进行压缩形成压缩图片并转化成字符串，将目标图片转化的字符串传输进入移动端的存储处存储。唤醒部署在移动端的图片控件，通过图片控件加载移动端存储的字符串进行显示。

为解决上述技术问题，本申请实施例还提供计算机设备。具体请参阅图4，图4为本实施例计算机设备基本结构框图。

所述计算机设备包括通过系统总线相互通信连接存储器41、处理器42、网络接口43。需要指出的是，图中仅示出了具有组件41-43的计算机设备，但是应理解的是，并不要求实施所有示出的组件，可以替代的实施更多或者更少的组件。其中，本技术领域技术人员可以理解，这里的计算机设备是一种能够按照事先设定或存储的指令，自动进行数值计算和/或信息处理的设备，其硬件包括但不限于微处理器、专用集成电路(Application SpecificIntegrated Circuit，ASIC)、可编程门阵列(Field－Programmable Gate Array，FPGA)、数字处理器(Digital Signal Processor，DSP)、嵌入式设备等。

所述计算机设备可以是桌上型计算机、笔记本、掌上电脑及云端服务器等计算设备。所述计算机设备可以与用户通过键盘、鼠标、遥控器、触摸板或声控设备等方式进行人机交互。

所述存储器41至少包括一种类型的可读存储介质，所述可读存储介质包括闪存、硬盘、多媒体卡、卡型存储器(例如，SD或DX存储器等)、随机访问存储器(RAM)、静态随机访问存储器(SRAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、可编程只读存储器(PROM)、磁性存储器、磁盘、光盘等。在一些实施例中，所述存储器41可以是所述计算机设备的内部存储单元，例如该计算机设备的硬盘或内存。在另一些实施例中，所述存储器41也可以是所述计算机设备的外部存储设备，例如该计算机设备上配备的插接式硬盘，智能存储卡(Smart Media Card,SMC)，安全数字(Secure Digital,SD)卡，闪存卡(Flash Card)等。当然，所述存储器41还可以既包括所述计算机设备4的内部存储单元也包括其外部存储设备。本实施例中，所述存储器41通常用于存储安装于所述计算机设备的操作系统和各类应用软件，例如基于移动端的代码展示方法可读指令代码等。此外，所述存储器41还可以用于暂时地存储已经输出或者将要输出的各类数据。

所述处理器42在一些实施例中可以是中央处理器(Central Processing Unit，CPU)、控制器、微控制器、微处理器、或其他数据处理芯片。该处理器42通常用于控制所述计算机设备的总体操作。本实施例中，所述处理器42用于运行所述存储器41中存储的可读指令代码或者处理数据，例如运行所述基于移动端的代码展示方法的可读指令代码。

所述网络接口43可包括无线网络接口或有线网络接口，该网络接口43通常用于在所述计算机设备与其他电子设备之间建立通信连接。

计算机设备实现存储器中存储有计算机可读指令，处理器执行计算机可读指令时实现上述基于移动端的代码展示方法；使代码片段能够根据阅读需要以图片的形式将该代码段完整的展示方便查看。

本申请还提供了另一种实施方式，即提供一种计算机可读存储介质，所述计算机可读存储介质存储有基于移动端的代码展示方法可读指令，所述基于移动端的代码展示方法可读指令可被至少一个处理器执行，以使所述至少一个处理器执行如上述的基于移动端的代码展示方法的步骤。

计算机可读存储介质上存储有计算机可读指令，计算机可读指令被处理器执行时实现上述的基于移动端的代码展示方法的步骤，从而让代码片段能够根据阅读需要以图片的形式将该代码段完整的展示方便查看。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质(如ROM/RAM、磁碟、光盘)中，包括若干指令用以使得一台终端设备(可以是手机，计算机，服务器，空调器，或者网络设备等)执行本申请各个实施例所述的方法。

显然，以上所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例，附图中给出了本申请的较佳实施例，但并不限制本申请的专利范围。本申请可以以许多不同的形式来实现，相反地，提供这些实施例的目的是使对本申请的公开内容的理解更加透彻全面。尽管参照前述实施例对本申请进行了详细的说明，对于本领域的技术人员来而言，其依然可以对前述各具体实施方式所记载的技术方案进行修改，或者对其中部分技术特征进行等效替换。凡是利用本申请说明书及附图内容所做的等效结构，直接或间接运用在其他相关的技术领域，均同理在本申请专利保护范围之内。

Claims (10)

1.基于移动端的代码展示方法,其特征在于，包括：

在H5界面接收到触发指令时，查找代码中的标签，确定目标标签；

创建空白图片，从所述代码中截取所述目标标签对应的代码段，将所述代码段写入所述空白图片，生成目标图片；

将所述目标图片进行存储；

将存储的所述目标图片显示于移动端的图片控件内。

2.根据权利要求1所述的基于移动端的代码展示方法，其特征在于，所述在所H5界面接收到触发指令时，查找所述代码中的标签，确定目标标签的步骤之前，还包括：

监视H5界面加载所述代码；

当所述代码加载完成，查找所述代码中的分段标签，预先为每一个所述分段标签创建单击事件。

3.根据权利要求2所述的基于移动端的代码展示方法，其特征在于，所述在H5界面接收到触发指令时，查找代码中的标签，确定目标标签的步骤包括：

当检测到触发所述单击事件时，查找发生所述单击事件的所述分段标签；

将触发所述单击事件的所述分段标签确定为所述目标标签。

4.根据权利要求1所述的基于移动端的代码展示方法，其特征在于，所述创建空白图片，从所述代码中截取所述目标标签对应的代码段，将所述代码段写入所述空白图片，生成目标图片的步骤包括：

获取所述移动端屏幕宽和高，根据所述宽和高创建所述空白图片；

以所述目标标签为分段标志，获取所述目标标签对应的所述代码段的宽和高以及所述代码段的内容；

基于所述代码段的宽和高，将所述代码段的内容写入所述空白图片生成目标图片。

5.根据权利要求4所述的基于移动端的代码展示方法，其特征在于，所述基于所述代码段的宽和高，将所述代码段的内容写入所述空白图片生成目标图片的步骤包括：

比较所述代码段的宽和高与所述移动端屏幕的宽和高；

当所述代码段的宽和高大于所述移动端屏幕的宽和高，则等比缩小所述代码段的宽和高，将缩小后的所述代码段的内容写入所述空白图片生成目标图片；

当所述代码段的宽和高小于所述移动端屏幕的宽和高，则将所述代码段的内容直接写入所述空白图片生成目标图片。

6.根据权利要求4所述的基于移动端的代码展示方法，其特征在于，所述将所述代码段的内容写入所述空白图片，生成目标图片的步骤之后，还包括：

将所述目标图片进行压缩形成压缩图片，将所述压缩图片转化成字符串；

所述将所述目标图片进行存储的步骤包括：

将所述目标图片转化的所述字符串传输进入移动端的存储处进行存储。

7.根据权利要求6所述的基于移动端的代码展示方法，其特征在于，所述将存储的所述目标图片显示于图片控件内的步骤为：

唤醒部署在所述移动端的所述图片控件；

通过所述图片控件加载所述字符串，并转化成图片进行显示。

8.基于移动端的代码展示装置，其特征在于，包括：

标签确定模块，用于在H5界面接收到触发指令时，查找代码中的标签，确定目标标签；

图片生成模块，用于创建空白图片，从所述代码中截取所述目标标签对应的代码段，将所述代码段写入所述空白图片，生成目标图片；

存储模块，用于将所述目标图片进行存储；

显示模块，用于将存储的所述目标图片显示于移动端的图片控件内。

9.一种计算机设备，包括存储器和处理器，所述存储器中存储有计算机可读指令，所述处理器执行所述计算机可读指令时实现如权利要求1至7中任一项所述的基于移动端的代码展示方法的步骤。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有计算机可读指令，所述计算机可读指令被处理器执行时实现如权利要求1至7中任一项所述的基于移动端的代码展示方法的步骤。

Images