实现将HTML转换为微信小程序的方法、装置及系统与流程

文档序号:14910852发布日期:2018-07-10 23:22阅读:1024来源:国知局

本发明涉及微信小程序开发领域,尤其涉及一种实现将HTML转换为微信小程序的方法、装置及系统。



背景技术:

微信小程序是2017年2月左右由微信发布的一项新功能,它主要是基于微信的可展示类似APP的一个功能。微信小程序本身有一套语言和样式格式,所以如果要把浏览器上的网页转换为微信小程序,需要代码的转换。目前开发微信小程序,需要熟悉它的开发语言以及编码,相当于要学习一门新的语言,所以需要花费很大的时间成本。其中超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。HTML是一种基础技术,常与CSS、JavaScript一起被众多网站用于设计令人赏心悦目的网页、网页应用程序以及移动应用程序的用户界面。网页浏览器可以读取HTML文档,并将其渲染成可视化网页。HTML描述了一个网站的结构语义随着线索的呈现,使之成为一种标记语言而非编程语言。目前将HTML转为微信小程序的方法存在诸多问题,不利于开发人员快速,快捷地基于原始HTML开发微信小程序。



技术实现要素:

本发明所要解决的技术问题和提出的技术任务是对现有技术进行改进,提供了一种实现将HTML转换为微信小程序的方法、装置及系统。

根据本公开实施例的第一方面,提供一种实现将HTML转换为微信小程序的方法,所述方法包括以下步骤:

S1.获取原始HTML文档;

S2.将HTML文档中的代码的标签转为微信小程序的标签从而获得微信小程序的WXML文件;

S3.获取与S1中所述的原始HTML文档配套的CSS文件;

S4.将CSS文件中代码的大小单位PX转为微信小程序专用的RPX单位从而获得微信小程序WXSS文件;

S5.将所获得的WXML文件、WXSS文件以及预设的JS文件、json文件组成微信小程序页面。

优选地,步骤S1进一步包括:

S101.获取原始HTML文档中的HTML标签;

S102.获取原始HTML文档中的纯文本。

优选地,步骤S2包括:将HTML的图片标签<img>转为微信小程序的<image>。

优选地,步骤S2包括:标签内的不兼容的标签字段属性去除。

优选地,步骤S2包括:把图片地址转为绝对地址

优选地,步骤S3进一步包括:

把不能在小程序上使用的CSS语法移除。

根据本发明的第二方面,提供了一种实现将HTML转换为微信小程序的装置,其特征在于,所述装置包括:

存储器,用于存储一应用程序;

处理器,用于运行所述应用程序以执行上述方法。

根据本发明的第三方面,还提供了一种实现将HTML转换为微信小程序的系统,其特征在于,所述系统包括:

第一获取模块,被配置用于获取原始HTML文档;

标签转换模块,被配置用于将HTML文档中的代码的标签转为微信小程序的标签从而获得微信小程序的WXML文件;

第二获取模块,被配置获取与所述原始HTML文档配套的CSS文件;

单位转换模块,被配置用于将CSS文件中代码的大小单位PX转为微信小程序专用的RPX单位;

合成模块,被配置用于将WXML文件、WXSS文件、JS文件以及json文件组成微信小程序页面。

优选地,所述第一获取模块进一步包括:

HTML标签获取模块,配置用于获取原始HTML文档中的HTML标签;以及

纯文本获取模块,配置用于获取原始HTML文档中的纯文本。

本发明的实施例提供的技术方案具有以下有益效果:

对比传统的微信小程序制作,本发明可让熟悉HTML的编码人员,快速生成微信小程序专用的代码,节省了重新学习一门新的语言需要花费的时间成本。同时,根据本发明所提供的方法,可以实现将HTML转换为微信小程序的装置以及一种实现将HTML转换为微信小程序的系统。其中所述系统结构紧凑,能够实现原始HTML到微信小程序的转换,从而节约了开发人员的时间。

附图说明

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

图1是根据本发明一实施例的一种实现将HTML转换为微信小程序的方法流程图;

图2是根据本发明一实施例的一种实现将HTML转换为微信小程序的法装置框图;

图3是根据本发明一实施例的一种实现将HTML转换为微信小程序的系统框图;

图4是根据本发明另一实施例的一种实现将HTML转换为微信小程序的系统框图。

具体实施方式

下面将结合本发明实施例中的附图1-4,对本发明实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例仅仅是本发明一部分实施例,而不是全部的实施例。基于本发明中的实施例,本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例,都属于本发明保护的范围。

在本公开使用的术语是仅仅出于描述特定实施例的目的,而非旨在限制本公开。在本公开和所附权利要求书中所使用的单数形式的“一种”、“所述”和“该”也旨在包括复数形式,除非上下文清楚地表示其他含义。还应当理解,本文中使用的术语“和/或”是指包含一个或多个相关联的列出项目的任何或所有可能组合。

如图1所示,图1是根据一示例性实施例示出的一种实现将HTML转换为微信小程序的方法,包括以下步骤:

在步骤S1,获取原始HTML文档,HTML文档即超文本标记语言文件,网页浏览器可以读取HTML文档,并将其渲染成可视化网页。HTML描述了一个网站的结构语义随着线索的呈现,使之成为一种标记语言而非编程语言。HTML元素是构建网站的基石。HTML允许嵌入图像与对象,并且可以用于创建交互式表单,它被用来结构化信息——例如标题、段落和列表等等,也可用来在一定程度上描述文档的外观和语义。HTML的语言形式为尖括号包围的HTML元素(如<html>),浏览器使用HTML标签和脚本来诠释网页内容,但不会将它们显示在页面上。在该步骤中,获取需要转换为微信小程序的HTML文档;

在步骤S2中,将HTML文档中的代码的标签转为微信小程序的标签从而获得微信小程序的WXML文件,WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构,在该步骤中,将HTML文档中的代码的标签转为微信小程序的标签。

在步骤S3中,获取与S1中所述的原始HTML文档配套的CSS文件;

在步骤S4中,将CSS文件中代码的大小单位PX转为微信小程序专用的RPX单位从而获得微信小程序WXSS文件;其中WXSS(WeiXin Style Sheets)是一套样式语言,用于描述WXML的组件样式。WXSS用来决定WXML的组件应该怎么显示。为了适应广大的前端开发者,WXSS具有CSS大部分特性。同时为了更适合开发微信小程序,WXSS对CSS进行了扩充以及修改。与CSS相比,WXSS扩展的特性有:(1)尺寸单位,(2)样式导入。rpx(responsive pixel):可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在iPhone6上,屏幕宽度为375px,共有750个物理像素,则750rpx=375px=750物理像素,1rpx=0.5px=1物理像素;

在步骤S5中,WXML文件、WXSS文件、JS文件以及json文件组成微信小程序页面。其中,微信小程序为了方便开发者减少配置项,描述页面的四个文件必须具有相同的路径与文件名。微信小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生APP体验的服务。微信小程序的框架提供了自己的视图层描述语言WXML和WXSS,以及基于JavaScript的逻辑层框架,并在视图层与逻辑层间提供了数据传输和事件系统,可以让开发者可以方便的聚焦于数据与逻辑上。

如图1所示,优选地,根据本发明所述的一种实现将HTML转换为微信小程序的方法,步骤S2包括:将HTML的图片标签<img>转为微信小程序的<image>。由于网页编程采用的是HTML+CSS+JS这样的组合,其中HTML是用来描述当前这个页面的结构,CSS用来描述页面的样子,JS通常是用来处理这个页面和用户的交互。在小程序中也有同样的角色,其中WXML充当的就是类似HTML的角色。因为WXML和HTML非常相似,有标签、属性等等构成,所以把相似语法进行改换。如:<div>转为<view><font>转为<text>。

进一步地,步骤S2包括:标签内的不兼容的标签字段属性去除。

以及进一步地,步骤S2包括:把图片地址转为绝对地址,绝对地址是图片存放的实际地址;

其中,在步骤S3中,进一步包括:

把不能在小程序上使用的CSS语法移除。因为小程序的WXSS具有CSS大部分的特性,在WXSS也做了扩充和修改,从而实现了兼容及大部分功能的完整性。

如图2所示,根据本发明一方面的一实施例,提供一种实现将HTML转换为微信小程序的装置,该装置包括:存储器,用于存储一应用程序;处理器,用于运行所述应用程序以执行上述的方法。

与前述方法实施例相对应,本发明还提供了系统的实施例。对于系统实施例而言,由于其基本对应于方法实施例,所以相关之处参见方法实施例的部分说明即可。以下所描述的系统实施例仅仅是示意性的,其中作为分离部件说明的单元可以是或者也可以不是物理上分开的,作为单元显示的部件可以是或者也可以不是物理单元,即可以位于一个地方,或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本公开方案的目的。本领域普通技术人员在不付出创造性劳动的情况下,即可以理解并实施。

如图3所示,图3是本发明根据一示例性实施例示出的一种实现将HTML转换为微信小程序的系统,该系统包括:

第一获取模块101,被配置用于获取原始HTML文档;

标签转换模块102,被配置用于将HTML文档中的代码的标签转为微信小程序的标签从而获得微信小程序的WXML文件;

第二获取模块103,被配置获取与所述原始HTML文档配套的CSS文件;

单位转换模块104,被配置用于将CSS文件中代码的大小单位PX转为微信小程序专用的RPX单位;

合成模块105,被配置用于将WXML文件、WXSS文件、JS文件以及json文件组成微信小程序页面。

作为优选的实施例,第一获取模块101进一步包括:

HTML标签获取模块1011,配置用于获取原始HTML文档中的HTML标签;其中HTML标记标签通常被称为HTML标签(HTMLtag),HTML标签是由尖括号包围的关键词,比如<html>,HTML标签通常是成对出现的,比如<b>和</b>,标签对中的第一个标签是开始标签,第二个标签是结束标签,开始和结束标签也被称为开放标签和闭合标签。

第一获取模块101进一步包括纯文本获取模块1012,配置用于获取原始HTML文档中的纯文本。

应当认识到,本发明的实施例可以由计算机硬件、硬件和软件的组合、或者通过存储在非暂时性计算机可读存储器中的计算机指令来实现或实施。所述方法可以使用标准编程技术-包括配置有计算机程序的非暂时性计算机可读存储介质在计算机程序中实现,其中如此配置的存储介质使得计算机以特定和预定义的方式操作-根据在具体实施例中描述的方法和附图。每个程序可以以高级过程或面向对象的编程语言来实现以与计算机系统通信。然而,若需要,该程序可以以汇编或机器语言实现。在任何情况下,该语言可以是编译或解释的语言。此外,为此目的该程序能够在编程的专用集成电路上运行。

进一步,该方法可以在可操作地连接至合适的任何类型的计算平台中实现,包括但不限于个人电脑、迷你计算机、主框架、工作站、网络或分布式计算环境、单独的或集成的计算机平台、或者与带电粒子工具或其它成像装置通信等等。本发明的各方面可以以存储在非暂时性存储介质或设备上的机器可读代码来实现,无论是可移动的还是集成至计算平台,如硬盘、光学读取和/或写入存储介质、RAM、ROM等,使得其可由可编程计算机读取,当存储介质或设备由计算机读取时可用于配置和操作计算机以执行在此所描述的过程。此外,机器可读代码,或其部分可以通过有线或无线网络传输。当此类媒体包括结合微处理器或其他数据处理器实现上文所述步骤的指令或程序时,本文所述的发明包括这些和其他不同类型的非暂时性计算机可读存储介质。当根据本发明所述的方法和技术编程时,本发明还包括计算机本身。

计算机程序能够应用于输入数据以执行本文所述的功能,从而转换输入数据以生成存储至非易失性存储器的输出数据。输出信息还可以应用于一个或多个输出设备如显示器。在本发明优选的实施例中,转换的数据表示物理和有形的对象,包括显示器上产生的物理和有形对象的特定视觉描绘。

当前第1页1 2 3 
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1