CN109828756A - 基于微信小程序生成保险页面的代码的方法及电子装置 - Google Patents

Abstract

本发明实施例涉及开发辅助技术领域，提供了一种基于微信小程序生成保险页面的代码的方法，所述方法包括：根据微信小程序语言规范写所述保险页面所需要的多个组件的代码模板，其中，每个组件的代码模板包括可调节的多个参数；对所述保险页面所需要的多个组件进行排版；及根据所述排版调节所述保险页面所需要的多个组件的代码模板中的多个参数，将所述多个组件的代码模板关联起来，以生成符合所述微信小程序语言规范的保险页面的代码。本发明实施例还提供了电子装置、计算机设备和计算机可存储介质。本发明实施例通过拖动保险页面所需要的组件进行排版就可以快速直接生成符合微信程序语言规范的保险页面的代码。

Description

基于微信小程序生成保险页面的代码的方法及电子装置

技术领域

本发明实施例涉及开发辅助技术领域，尤其涉及一种基于微信小程序生成保险页面的代码的方法、电子装置、计算机设备及计算机可读存储介质。

背景技术

2011年腾讯公司推出了一个基于移动互联网的崭新的即时通信平台—微信平台，随着智能手机的频繁应用，该平台得到了广大用户的认可和使用。

伴随着微信的成功，微信小程序也在2017年2月上线。微信小程序，简称小程序，是一种不需要下载安装即可使用，用户可以通过扫一扫或搜一下即可打开应用。

当前，保险页面的代码主要有三种实现方式：(1)大部分都是用超文本标记语言(Hyper Text Mark-up Language，HTML)实现的；(2)将HTML语言转换为微信小程序语言；(3)可以用微信小程序实现保险页面，无法拖动实现，需要针对具体的保险页面具体编写代码，速度很慢。

因此，急需一种基于微信小程序快速生成保险页面的代码的方法。

发明内容

有鉴于此，本发明实施例的目的是提供一种基于微信小程序生成保险页面的代码的方法、电子装置、计算机设备及计算机可读存储介质，通过拖动保险页面所需要的组件进行排版就可以快速直接生成符合微信程序语言规范的保险页面的代码。

为实现上述目的，本发明实施例提供了一种基于微信小程序生成保险页面的代码的方法，所述方法包括：

根据微信小程序语言规范写所述保险页面所需要的多个组件的代码模板，其中，每个组件的代码模板包括可调节的多个参数；

对所述保险页面所需要的多个组件进行排版；及

根据所述排版调节所述保险页面所需要的多个组件的代码模板中的多个参数，将所述多个组件的代码模板关联起来，以生成符合所述微信小程序语言规范的保险页面的代码。

进一步地，所述保险页面所需要的多个组件包括多个文本框与多个图片。

进一步地，所述排版为可视化拖动组件排版。

进一步地，所述对所述保险页面所需要的多个组件进行排版包括：根据用户的指令，在微信小程序视图容器中，拖动多个文本框与多个图片到用户指定的位置。

进一步地，根据所述排版调节所述保险页面所需要的多个组件的代码模板中的多个参数，将所述多个组件的代码模板关联起来，以生成符合所述微信小程序语言规范的保险页面的代码的步骤包括：

根据多个文本框与多个图片在微信小程序视图容器中的位置，调节所述多个图片的代码模板与所述多个文本框的代码模板中的多个参数；

将调节参数之后多个图片与多个文本框的代码模板进行组合，以得到符合所述微信小程序语言规范的所述保险页面的代码。

进一步地，所述多个图片包括广告位图片、多个保险产品图片，所述多个文本框包括多个保险产品的分类文本框、多个保险排序文本框、多个保险产品名称文本框、多个月销量文本框、多个价格文本框、多个简介文本框；所述多个图片的代码模板的参数包括以下参数中一项或多项：margin-top、float、position；所述多个文本框的代码模板的参数包括以下参数中一项或多项：scroll-x、flex-direction。

进一步地，根据所述排版调节所述保险页面所需要的多个组件的代码模板中的多个参数，将所述多个组件的代码模板关联起来，以生成符合所述微信小程序语言规范的保险页面的代码的步骤包括：

S1将所述广告位图片放在微信小程序视图容器中，在所述广告位图片的代码模板中，调节margin-top参数为0px，代表将所述广告位图片放在所述保险页面最上方；

S2所述保险产品的分类文本框是一个可横向滑动的视图，将所述保险产品的分类文本框都放在微信小程序滚动视图容器中，在所述保险产品的分类文本框的代码模板中，调节scroll-x参数为true，代表允许横向滚动；

S3将所述多个保险排序文本框放在微信小程序横向的视图容器中，在所述多个保险排序文本框的代码模板中，调节flex-direction参数为row，表示横向展示；

S4将每个保险产品图片放在微信小程序视图容器中，在每个保险产品图片的代码模板中，调节position参数为relative，代表是相对定位，调节float参数为left，代表将每个保险产品图片在所述保险页面左对齐；将所述名称文本框、所述月销量文本框、所述价格文本框、所述简介文本框放在视图容器中，所述名称文本框、所述月销量文本框、所述价格文本框、所述简介文本框的代码模板中position参数分别调节为relative，代表是相对定位，float参数调节为right，代表在页面右对齐；

通过S1至S4调节各组件代码模板中的多个参数，将所述保险页面所需要多个图片与多个文本框的代码模板关联起来，将调节参数之后的多个图片与多个文本框的代码模板进行组合，以得到符合微信小程序语言规范的保险页面的代码。

为实现上述目的，本发明实施例还提供了一种电子装置，所述电子装置包括：

写模块，适于根据微信小程序语言规范写保险页面所需要的多个组件的代码模板，其中，每个组件的代码模板包括可调节的多个参数；

排版模块，适于对所述保险页面所需要的多个组件进行排版；及

调节模块，适于根据所述排版调节所述保险页面所需要的多个组件的代码模板中的多个参数，将所述多个组件的代码模板关联起来，以生成符合所述微信小程序语言规范的所述保险页面的代码。

为实现上述目的，本发明实施例还提供了一种计算机设备，包括存储器、处理器以及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现如上所述基于微信小程序生成保险页面的代码的方法的步骤。

为实现上述目的，本发明实施例还提供了一种计算机可读存储介质，所述计算机可读存储介质内存储有计算机程序，所述计算机程序可被至少一个处理器所执行，以使所述至少一个处理器执行如上所述的基于微信小程序生成保险页面的代码的方法的步骤。

本发明实施例提供的基于微信小程序生成保险页面的代码的方法、电子装置、计算机设备及计算机可读存储介质，通过拖动保险页面所需要的组件进行排版就可以快速直接生成符合微信程序语言规范的保险页面的代码。

附图说明

图1为本发明实施例一之基于微信小程序生成保险页面的代码的方法的流程图。

图2为本发明实施例一之基于微信小程序生成保险页面的代码的方法中保险页面的示意图。

图3为本发明实施例二之电子装置的程序模块示意图。

图4为本发明实施例三之计算机设备的硬件结构示意图。

附图标记

本发明目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。

具体实施方式

为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅用以解释本发明，并不用于限定本发明。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

实施例一

参阅图1，示出了本发明实施例一之基于微信小程序生成保险页面的代码的方法的流程图。可以理解，本方法实施例中的流程图不用于对执行步骤的顺序进行限定。下面以电子装置为执行主体进行示例性描述。具体如下。

步骤S100，根据微信小程序语言规范写保险页面所需要的多个组件的代码模板，其中，每个组件的代码模板包括可调节的多个参数。

在本发明一具体实施方式中，微信小程序语言规范包括微信标记语言(WeiXinMarkup Language，WXML)与微信样式表(WeiXin Style Sheets,WXSS)，WXML是框架设计的一套标签语言，结合基础组件、事件***，可以构建出页面的框架结构，WXSS是一套样式语言，用于描述WXML的组件样式，用来决定WXML的组件应该怎么显示。

在本发明一具体实施方式中，保险页面所需要的多个组件包括多个文本框与多个图片。假设所述保险页面以图2中“XX的保险推荐列表”页面举例，“XX的保险推荐列表”页面由多个图片与多个文本框组成，多个图片包括广告位“畅游一夏说走就走”图片、多个保险产品图片，多个文本框包括多个保险产品的分类文本框(“旅游”、“财产”、“养老保障”、“百万保障”、“全部”)、多个保险排序文本框(“综合排序”、“销量排序”、“价格排序”)、多个保险产品名称(“XXe生保”、“XXe生保加强版”、“XXe家保2018版”)、多个月销量(“月销量：11311”、“月销量：1093”、“月销量：9318”)、多个价格(“174元起”、“289元起”、“390元起”)、多个简介(“百万医疗保障|0.4元/天起”、“普通门诊也可报销|0.8元/天起”、“带门诊的百万医疗险”)。

在本发明一具体实施例中，假设组件以图片举例，用WXSS语言规范写出来的图片的代码模板的范例可以为：

上述图片的代码模板的参数包括：距离上边缘的距离(margin-top)、对齐方式(float)、宽度(width)、高度(height)、背景颜色(background-color)，这些参数默认值分别是0px、right、200px、200px、#eeeeee，这些参数的值都是可以根据具体需求进行调节的。

假设将图片放在一个微信小程序视图容器(view)中，相关属性也可以在WXML中定义，图片的代码模板如下：

<view class＝"image">

<image style＝"width:200px；height:200px；background-color:#eeeeee；"mode＝"top"；src＝"../../resources/cat.TIF">

</image>

</view>

上述图片的代码模板的参数包括width、height、background-color、mode，其中，width是图片的宽度，height是图片高度，background-color是背景颜色，mode是图片裁剪、缩放的模式，值为top是不缩放图片，只显示图片的顶部区域，src是图片资源地址。这些参数都是可以根据具体需求进行调节的。

在本发明一具体实施例中，假设组件以文本框举例，用WXML+WXSS语言规范写出来的文本框的代码模板的范例可以为：

上述文本框的代码模板的参数包括：字体大小(font-size)、位置(position)、左边距(left)、距离上面的距离(top)、左边距(margin-left)、右边距(margin-right)，这些参数默认值分别为10px、relative、90px、00px、auto、auto，且这些参数的大小是可以根据具体需求进行调节的。

假设将多个文本框放在一个微信小程序的视图容器(view)中，文本框1展示在文本框2之前，则用WXML语言规范写出来的代码模板如下：

其中flex-direction(弹性方向)用于设置主轴对齐方式，默认row x轴从左到右，style＝"flex-direction:row；"代表视图是横向展示的，如果视图可以横向滚动展示文本，文本框1展示在文本框2之前，则可以将文本框放在微信小程序滚动视图容器(scroll-view)中，具体如下：

<scroll-view scroll-x＝”true">

<text class＝"subtitle">1</view>

<text class＝"subtitle">2</view>

</scroll-x>

其中，横向滚动(scroll-x)参数为true，表示支持横向滚动。

上述图片的代码模板的多个参数与上述文本框的代码模板的多个参数仅为示例性说明，并非因此限制本发明的专利范围，凡是在此示例的基础上所作的任何等效变换，均同理包括在本发明的专利保护范围内。

在步骤S102，对保险页面所需要的多个组件进行排版。

在本发明一具体实施方式中，所述排版为可视化拖动组件排版，所述对所述保险页面所需要的多个组件进行排版包括：根据用户的指令，在微信小程序视图容器中，拖动多个文本框与多个图片到用户指定的位置。类似美图直接拖动图片进行组合排版一样，本发明可以根据用户指令直接拖动组件进行组合排版，哪几个组件在上面哪几个组件在下面，哪几个组件在左面哪几个组件在右面等等。

在本发明一具体实施例中，以图2中“XX的保险推荐列表”页面举例，根据用户的指令，在微信小程序视图容器中，可以直接拖动广告位图片在页面最上方；接着拖动多个保险产品的分类(“旅游”、“财产”、“养老保障”、“百万保障”、“全部”)文本框，使保险产品的分类文本框横向排列于广告图片下方；然后，拖动多个保险排序文本框(“综合排序”、“销量排序”、“价格排序”)，使保险排序文本框横向排列于保险产品的分类文本框下方；最后拖动每个保险产品的信息，使每个保险产品的信息纵向排列于保险排序文本框的正下方；其中，在每个保险产品的信息中，左边是保险产品的图片，右边的最上方是保险产品的名称(文本框)，右边的中间是月销量(文本框)以及价格(文本框)，右边的最下方是简介(文本框)；通过以上的可视化拖动组件排版，就可以得到图2中“XX的保险推荐列表”页面。

步骤S104，根据所述排版调节所述保险页面所需要的多个组件的代码模板中的多个参数，将所述多个组件的代码模板关联起来，以生成符合微信小程序语言规范的保险页面的代码(WXML+WXSS代码)。

在本发明一具体实施方式中，符合微信小程序语言规范的代码是指同时符合WXML和WXSS语言规范的代码，多个组件的代码模板中的多个参数可以控制各个组件的排版方式，相应地，从各个组件的排版方式也可以得到多个组件的代码模板中的多个参数的具体值，换言之，根据各个组件的排版即可调节所述保险页面所需要的多个组件的代码模板中的多个参数，从而，将所述多个组件的代码模板关联起来，以生成符合微信小程序语言规范的保险页面的代码。

步骤S104的细节步骤包括：根据多个文本框与多个图片在微信小程序视图容器中的位置，调节所述多个图片的代码模板与所述多个文本框的代码模板中的多个参数；将调节参数之后多个图片与多个文本框的代码模板进行组合，以得到符合所述微信小程序语言规范的所述保险页面的代码。

在本发明一具体实施例中，以图2中“XX的保险推荐列表”页面举例，保险页面所需要的多个组件的代码模板中的多个参数调节过程如下：

S1可以将广告位图片放在一个微信小程序视图容器(view)中，在广告位图片的代码模板中，调节距离上边缘的距离(margin-top)参数为0px，代表将广告位图片放在页面最上方；

S2保险产品的分类文本框是一个可以横向滑动的视图，将保险产品的分类文本框都放在一个微信小程序滚动视图容器(scroll-view)中，在保险产品的分类文本框的代码模板中，调节横向滚动(scroll-x)参数为true，允许横向滚动。保险产品的分类文本框在页面展示的先后顺序根据WXML中文本框组件定义的顺序展示；

S3保险排序文本框可以放在一个微信小程序横向的视图容器中，在保险排序文本框的代码模板中，调节flex-direction(弹性方向)参数为row，表示横向展示，三种排序方式：综合排序文本框、销量排序文本框、价格排序文本框，页面展示顺序根据WXML中定义的顺序决定；

S4将每个保险产品图片放在微信小程序视图容器中，在每个保险产品图片的代码模板中，调节position参数为relative，代表是相对定位，调节float参数为left，代表将每个保险产品图片在页面左对齐；将名称文本框、月销量文本框、价格文本框、简介文本框放在视图容器中，名称文本框、月销量文本框、价格文本框、简介文本框的代码模板中position参数分别调节为relative，代表是相对定位，float参数调节为right，代表在页面右对齐；

S4.1可以将保险产品“XXe生保”图片放在一个微信小程序视图容器(view)中，在保险产品“XXe生保”图片的代码模板中，调节position(位置)参数为relative，代表是相对定位，调节float(对齐方式)参数为left，代表将“XXe生保”图片在页面左对齐；可以将“XXe生保”名称、“XXe生保”月销量、“XXe生保”价格、“XXe生保”简介文本框放在一个视图容器view中，代码模板中position参数分别设置为relative，代表是相对定位，float参数设置为right，代表该组件在页面右对齐，该视图容器就是一个父节点，包含的四个文本框就是子节点，文本框展示的先后顺序是根据在WXML中定义的先后顺序；

S4.2可以将保险产品“XXe生保加强版”图片放在一个视图容器view中，在保险产品“XXe生保加强版”图片的代码模板中，调节position参数为relative，代表是相对定位，调节float参数为left，代表将“XXe生保加强版”图片在页面左对齐；可以将“XXe生保加强版”名称、“XXe生保加强版”月销量、“XXe生保加强版”价格、“XXe生保加强版”简介文本框放在一个视图容器view中，代码模板中position参数分别设置为relative，代表是相对定位，float参数设置为right代表该模块在页面右对齐，该视图容器就是一个父节点，包含的四个文本框就是子节点，文本框展示的先后顺序是根据在WXML中定义的先后顺序；

S4.3可以将保险产品“XXe家保2018版”图片放在一个视图容器view中，在保险产品“XXe家保2018版”图片的代码模板中，调节position参数为relative，代表是相对定位，调节float参数为left，代表将“XXe生保”图片在页面左对齐；可以将可以将“XXe家保2018版”名称、“XXe家保2018版”月销量、“XXe家保2018版”价格、“XXe家保2018版”简介文本框放在一个视图容器view中，代码模板中position参数分别设置为relative，代表是相对定位，float参数设置为right代表该模块在页面右对齐，该视图容器就是一个父节点，包含的四个文本框就是子节点，文本框展示的先后顺序是根据在WXML中定义的先后顺序；

通过S1至S4调节各组件代码模板中的多个参数，就可以将所述“XX的保险推荐列表”页面所需要多个图片与多个文本框的代码模板关联起来，将调节参数之后多个图片与多个文本框的代码模板进行组合，即可得到符合微信小程序语言规范的“XX的保险推荐列表”页面的代码。

实施例二

请参阅图3，示出了本发明实施例二之电子装置300的程序模块示意图。在本实施例中，电子装置300可以包括或被分割成一个或多个程序模块，一个或者多个程序模块被存储于存储介质中，并由一个或多个处理器所执行，以完成本发明，并可实现上述基于微信小程序生成保险页面的代码的方法。本发明实施例所称的程序模块是指能够完成特定功能的一系列计算机程序指令段，比程序本身更适合于描述基于微信小程序生成保险页面的代码的方法在存储介质中的执行过程。以下描述将具体介绍本实施例各程序模块的功能：

写模块300，用于根据微信小程序语言规范写保险页面所需要的多个组件的代码模板，其中，每个组件的代码模板包括可调节的多个参数。

在本发明一具体实施方式中，微信小程序语言规范包括微信标记语言(WeiXinMarkup Language，WXML)与微信样式表(WeiXin Style Sheets,WXSS)，WXML是框架设计的一套标签语言，结合基础组件、事件***，可以构建出页面的框架结构，WXSS是一套样式语言，用于描述WXML的组件样式，用来决定WXML的组件应该怎么显示。

在本发明一具体实施方式中，保险页面所需要的多个组件包括多个文本框与多个图片。假设所述保险页面以图2中“XX的保险推荐列表”页面举例，“XX的保险推荐列表”页面由多个图片与多个文本框组成，多个图片包括广告位“畅游一夏说走就走”图片、多个保险产品图片，多个文本框包括多个保险产品的分类(“旅游”、“财产”、“养老保障”、“百万保障”、“全部”)、多个保险排序文本框(“综合排序”、“销量排序”、“价格排序”)、多个保险产品名称(“XXe生保”、“XXe生保加强版”、“XXe家保2018版”)、多个月销量(“月销量：11311”、“月销量：1093”、“月销量：9318”)、多个价格(“174元起”、“289元起”、“390元起”)、多个简介(“百万医疗保障|0.4元/天起”、“普通门诊也可报销|0.8元/天起”、“带门诊的百万医疗险”)。

在本发明一具体实施例中，假设组件以图片举例，用WXSS语言规范写出来的图片的代码模板的范例可以为：

上述图片的代码模板的参数包括：距离上边缘的距离(margin-top)、对齐方式(float)、宽度(width)、高度(height)、背景颜色(background-color)，这些参数默认值分别是0px、right、200px、200px、#eeeeee，这些参数的值都是可以根据具体需求进行调节的。

假设将图片放在一个微信小程序视图容器(view)中，相关属性也可以在WXML中定义，图片的代码模板如下：

<view class＝"image">

<image style＝"width:200px；height:200px；background-color:#eeeeee；"mode＝"top"；src＝"../../resources/cat.TIF">

</image>

</view>

上述图片的代码模板的参数包括width、height、background-color、mode，其中，width是图片的宽度，height是图片高度，background-color是背景颜色，mode是图片裁剪、缩放的模式，值为top是不缩放图片，只显示图片的顶部区域，src是图片资源地址。这些参数都是可以根据具体需求进行调节的。

在本发明一具体实施例中，假设组件以文本框举例，用WXML+WXSS语言规范写出来的文本框的代码模板的范例可以为：

上述文本框的代码模板的参数包括：字体大小(font-size)、位置(position)、左边距(left)、距离上面的距离(top)、左边距(margin-left)、右边距(margin-right)，这些参数默认值分别为10px、relative、90px、00px、auto、auto，且这些参数的大小是可以根据具体需求进行调节的。

假设将多个文本框放在一个微信小程序的视图容器(view)中，文本框1展示在文本框2之前，则用WXML语言规范写出来的代码模板如下：

其中style＝"flex-direction:row；"代表视图是横向展示的，如果视图可以横向滚动展示文本，文本框1展示在文本框2之前，则可以将文本放在微信小程序滚动视图容器(scroll-view)中，具体如下：

<scroll-view scroll-x＝”true">

<text class＝"subtitle">1</view>

<text class＝"subtitle">2</view>

</scroll-x>

其中，scroll-x的参数为true，表示支持横向滚动。

上述图片的代码模板的多个参数与上述文本框的代码模板的多个参数仅为示例性说明，并非因此限制本发明的专利范围，凡是在此示例的基础上所作的任何等效变换，均同理包括在本发明的专利保护范围内。

排版模块302，用于对保险页面所需要的多个组件进行排版。

在本发明一实施方式中，所述排版为可视化拖动组件排版，类似美图直接拖动图片进行组合排版一样，本发明可以根据用户指令直接拖动组件进行组合排版，哪几个组件在上面哪几个组件在下面，哪几个组件在左面哪几个组件在右面等等。

在本发明一具体实施例中，以图2中“XX的保险推荐列表”页面举例，则可以直接拖动广告位图片在页面最上方；接着拖动多个保险产品的分类(“旅游”、“财产”、“养老保障”、“百万保障”、“全部”)文本框，使保险产品的分类文本框横向排列于广告图片下方；然后，拖动多个保险排序文本框(“综合排序”、“销量排序”、“价格排序”)，使保险排序文本框横向排列于保险产品的分类文本框下方；最后拖动每个保险产品的信息，使每个保险产品的信息纵向排列于保险排序文本框的正下方；其中，在每个保险产品的信息中，左边是保险产品的图片，右边的最上方是保险产品的名称(文本框)，右边的中间是月销量(文本框)以及价格(文本框)，右边的最下方是简介(文本框)；通过以上的可视化拖动组件排版，就可以得到图2中“XX的保险推荐列表”页面。

生成模块303，用于根据所述排版调节所述保险页面所需要的多个组件的代码模板中的多个参数，将所述多个组件的代码模板关联起来，以生成符合微信小程序语言规范的保险页面的代码(WXML+WXSS代码)。

在本发明一实施方式中，符合微信小程序语言规范的代码是指同时符合WXML和WXSS语言规范的代码，多个组件的代码模板中的多个参数可以控制各个组件的排版方式，相应地，从各个组件的排版方式也可以得到多个组件的代码模板中的多个参数的具体值，换言之，根据各个组件的排版即可调节所述保险页面所需要的多个组件的代码模板中的多个参数，从而，将所述多个组件的代码模板关联起来，以生成符合微信小程序语言规范的保险页面的代码。

进一步地，生成模块303根据多个文本框与多个图片在微信小程序视图容器中的位置，调节所述多个图片的代码模板与所述多个文本框的代码模板中的多个参数；将调节参数之后多个图片与多个文本框的代码模板进行组合，以得到符合所述微信小程序语言规范的所述保险页面的代码。

在本发明一具体实施例中，以图2中“XX的保险推荐列表”页面举例，保险页面所需要的多个组件的代码模板中的多个参数调节过程如下：

S1可以将广告位图片放在一个微信小程序视图容器(view)中，在广告位图片的代码模板中，调节距离上边缘的距离(margin-top)参数为0px，代表将广告位图片放在页面最上方；

S2保险产品的分类文本框是一个可以横向滑动的视图，将保险产品的分类文本框都放在一个微信小程序滚动视图容器(scroll-view)中，在保险产品的分类文本框的代码模板中，调节横向滚动(scroll-x)参数为true，允许横向滚动。保险产品的分类文本框在页面展示的先后顺序根据WXML中文本框组件定义的顺序展示；

S3保险排序文本框可以放在一个微信小程序横向的视图容器中，在保险排序文本框的代码模板中，调节flex-direction(弹性方向)参数为row，表示横向展示，三种排序方式：综合排序文本框、销量排序文本框、价格排序文本框，页面展示顺序根据WXML中定义的顺序决定；

S4将每个保险产品图片放在微信小程序视图容器中，在每个保险产品图片的代码模板中，调节position参数为relative，代表是相对定位，调节float参数为left，代表将每个保险产品图片在页面左对齐；将名称文本框、月销量文本框、价格文本框、简介文本框放在视图容器中，名称文本框、月销量文本框、价格文本框、简介文本框的代码模板中position参数分别调节为relative，代表是相对定位，float参数调节为right，代表在页面右对齐；

S4.1可以将保险产品“XXe生保”图片放在一个微信小程序视图容器(view)中，在保险产品“XXe生保”图片的代码模板中，调节position(位置)参数为relative，代表是相对定位，调节float(对齐方式)参数为left，代表将“XXe生保”图片在页面左对齐；可以将“XXe生保”名称、“XXe生保”月销量、“XXe生保”价格、“XXe生保”简介文本框放在一个视图容器view中，代码模板中position参数分别设置为relative，代表是相对定位，float参数设置为right，代表该组件在页面右对齐，该视图容器就是一个父节点，包含的四个文本框就是子节点，文本框展示的先后顺序是根据在WXML中定义的先后顺序；

S4.2可以将保险产品“XXe生保加强版”图片放在一个视图容器view中，在保险产品“XXe生保加强版”图片的代码模板中，调节position参数为relative，代表是相对定位，调节float参数为left，代表将“XXe生保加强版”图片在页面左对齐；可以将“XXe生保加强版”名称、“XXe生保加强版”月销量、“XXe生保加强版”价格、“XXe生保加强版”简介文本框放在一个视图容器view中，代码模板中position参数分别设置为relative，代表是相对定位，float参数设置为right代表该模块在页面右对齐，该视图容器就是一个父节点，包含的四个文本框就是子节点，文本框展示的先后顺序是根据在WXML中定义的先后顺序；

S4.3可以将保险产品“XXe家保2018版”图片放在一个视图容器view中，在保险产品“XXe家保2018版”图片的代码模板中，调节position参数为relative，代表是相对定位，调节float参数为left，代表将“XXe生保”图片在页面左对齐；可以将可以将“XXe家保2018版”名称、“XXe家保2018版”月销量、“XXe家保2018版”价格、“XXe家保2018版”简介文本框放在一个视图容器view中，代码模板中position参数分别设置为relative，代表是相对定位，float参数设置为right代表该模块在页面右对齐，该视图容器就是一个父节点，包含的四个文本框就是子节点，文本框展示的先后顺序是根据在WXML中定义的先后顺序；

通过S1至S4调节各组件代码模板中的多个参数，就可以将所述“XX的保险推荐列表”页面所需要多个图片与多个文本框的代码模板关联起来，将调节参数之后多个图片与多个文本框的代码模板进行组合，即可得到符合微信小程序语言规范的“XX的保险推荐列表”页面的代码。

实施例三

参阅图4，是本发明实施例三之计算机设备的硬件架构示意图。在本实施例中，所述计算机设备400是一种能够按照事先设定或者存储的指令，自动进行数值计算和/或信息处理的设备。如图所示，所述计算机设备400至少包括，但不限于，可通过***总线相互通信连接存储器401、处理器402、网络接口403、以及基于微信小程序生成保险页面的代码的***404。其中：

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

处理器402在一些实施例中可以是中央处理器(Central Processing Unit，CPU)、控制器、微控制器、微处理器、或其他数据处理芯片。该处理器402通常用于控制计算机设备400的总体操作。本实施例中，处理器402用于运行存储器401中存储的程序代码或者处理数据，例如运行基于微信小程序生成保险页面的代码的***404，以实现实施例一中的基于微信小程序生成保险页面的代码的方法。

所述网络接口403可包括无线网络接口或有线网络接口，该网络接口403通常用于在所述计算机设备400与其他电子装置之间建立通信连接。例如，所述网络接口403用于通过网络将所述计算机设备400与外部终端相连，在所述计算机设备400与外部终端之间的建立数据传输通道和通信连接等。所述网络可以是企业内部网(Intranet)、互联网(Internet)、全球移动通讯***(Global System of Mobile communication，GSM)、宽带码分多址(Wideband Code Division Multiple Access，WCDMA)、4G网络、5G网络、蓝牙(Bluetooth)、Wi-Fi等无线或有线网络。

需要指出的是，图4仅示出了具有部件401-404的计算机设备400，但是应理解的是，并不要求实施所有示出的部件，可以替代的实施更多或者更少的部件。

在本实施例中，存储于存储器401中的所述基于微信小程序生成保险页面的代码的***404还可以被分割为一个或者多个程序模块，所述一个或者多个程序模块被存储于存储器401中，并由一个或多个处理器(本实施例为处理器402)所执行，以完成本发明基于微信小程序生成保险页面的代码的方法。

实施例四

本实施例还提供一种计算机可读存储介质，如闪存、硬盘、多媒体卡、卡型存储器(例如，SD或DX存储器等)、随机访问存储器(RAM)、静态随机访问存储器(SRAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、可编程只读存储器(PROM)、磁性存储器、磁盘、光盘、服务器、App应用商城等等，其上存储有计算机程序，程序被处理器执行时实现相应功能。本实施例的计算机可读存储介质用于存储基于微信小程序生成保险页面的代码的***404，被处理器执行时实现本发明之基于微信小程序生成保险页面的代码的方法。

上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。

以上仅为本发明的优选实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本发明的专利保护范围内。

本发明实施例之基于微信小程序生成保险页面的代码的方法，可应用于微信小程序的代码生成工具中，在该工具中，通过拖动保险页面所需要的组件直接生产符合微信程序语言规范的保险页面的代码(WXML+WXSS代码)。

本发明实施例通过拖动保险页面所需要的组件进行排版就可以快速直接生成符合微信程序语言规范的保险页面的代码(WXML+WXSS代码)，而现有技术关于保险页面主要有三种方式：(1)大部分都是用超文本标记语言(Hyper Text Mark-up Language，HTML)实现的；(2)将HTML语言转换为微信小程序语言；(3)可以用微信小程序实现保险页面，无法拖动实现，需要针对具体的保险页面具体编写代码，速度很慢。

本案相对于第(1)方式，本案是微信小程序语言WXML+WXSS，并非HTML语言。

本案相对于第(2)种方式，本案并不是通过HTML语言翻译微信小程序代码，而是直接生成微信小程序代码。

本案相对于第(3)方式，本案并非个案编写代码，速度太慢，而是通过拖动保险页面所需要的组件进行排版就可以直接且快速生成符合微信程序语言规范的保险页面的代码(WXML+WXSS代码)。

Claims (10)

1.一种基于微信小程序生成保险页面的代码的方法，其特征在于，所述方法包括：

根据微信小程序语言规范写所述保险页面所需要的多个组件的代码模板，其中，每个组件的代码模板包括可调节的多个参数；

对所述保险页面所需要的多个组件进行排版；及

根据所述排版调节所述保险页面所需要的多个组件的代码模板中的多个参数，将所述多个组件的代码模板关联起来，以生成符合所述微信小程序语言规范的保险页面的代码。

2.如权利要求1所述的基于微信小程序生成保险页面的代码的方法，其特征在于，所述保险页面所需要的多个组件包括多个文本框与多个图片。

3.如权利要求2所述的基于微信小程序生成保险页面的代码的方法，其特征在于，所述排版为可视化拖动组件排版。

4.如权利要求3所述的基于微信小程序生成保险页面的代码的方法，其特征在于，所述对所述保险页面所需要的多个组件进行排版包括：根据用户的指令，在微信小程序视图容器中，拖动多个文本框与多个图片到用户指定的位置。

5.如权利要求4所述的基于微信小程序生成保险页面的代码的方法，其特征在于，根据所述排版调节所述保险页面所需要的多个组件的代码模板中的多个参数，将所述多个组件的代码模板关联起来，以生成符合所述微信小程序语言规范的保险页面的代码的步骤包括：

根据所述多个文本框与所述多个图片在微信小程序视图容器中的位置，调节所述多个图片与所述多个文本框的代码模板中的多个参数；

将调节参数之后多个图片与多个文本框的代码模板进行组合，以得到符合所述微信小程序语言规范的所述保险页面的代码。

6.如权利要求5所述的基于微信小程序生成保险页面的代码的方法，其特征在于，所述多个图片包括广告位图片、多个保险产品图片，所述多个文本框包括多个保险产品的分类文本框、多个保险排序文本框、多个保险产品名称文本框、多个月销量文本框、多个价格文本框、多个简介文本框；所述多个图片的代码模板的参数包括以下参数中一项或多项：margin-top、float、position；所述多个文本框的代码模板的参数包括以下参数中一项或多项：scroll-x、flex-direction。

7.如权利要求6所述的基于微信小程序生成保险页面的代码的方法，其特征在于，根据所述排版调节所述保险页面所需要的多个组件的代码模板中的多个参数，将所述多个组件的代码模板关联起来，以生成符合所述微信小程序语言规范的保险页面的代码的步骤包括：

S1将所述广告位图片放在微信小程序视图容器中，在所述广告位图片的代码模板中，调节margin-top参数为0px，代表将所述广告位图片放在所述保险页面最上方；

S2所述保险产品的分类文本框是一个可横向滑动的视图，将所述保险产品的分类文本框都放在微信小程序滚动视图容器中，在所述保险产品的分类文本框的代码模板中，调节scroll-x参数为true，代表允许横向滚动；

S3将所述多个保险排序文本框放在微信小程序横向的视图容器中，在所述多个保险排序文本框的代码模板中，调节flex-direction参数为row，表示横向展示；

S4将每个保险产品图片放在微信小程序视图容器中，在每个保险产品图片的代码模板中，调节position参数为relative，代表是相对定位，调节float参数为left，代表将每个保险产品图片在所述保险页面左对齐；将所述名称文本框、所述月销量文本框、所述价格文本框、所述简介文本框放在视图容器中，所述名称文本框、所述月销量文本框、所述价格文本框、所述简介文本框的代码模板中position参数分别调节为relative，代表是相对定位，float参数调节为right，代表在页面右对齐；

通过S1至S4调节各组件代码模板中的多个参数，将所述保险页面所需要多个图片与多个文本框的代码模板关联起来，将调节参数之后的多个图片与多个文本框的代码模板进行组合，以得到符合微信小程序语言规范的保险页面的代码。

8.一种电子装置，其特征在于，所述电子装置包括：

写模块，用于根据微信小程序语言规范写保险页面所需要的多个组件的代码模板，其中，每个组件的代码模板包括可调节的多个参数；

排版模块，用于对所述保险页面所需要的多个组件进行排版；及

调节模块，用于根据所述排版调节所述保险页面所需要的多个组件的代码模板中的多个参数，将所述多个组件的代码模板关联起来，以生成符合所述微信小程序语言规范的所述保险页面的代码。

9.一种计算机设备，包括存储器、处理器以及存储在所述存储器上并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1至7任一项所述基于微信小程序生成保险页面的代码的方法的步骤。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质内存储有计算机程序，所述计算机程序可被至少一个处理器所执行，以使所述至少一个处理器执行如权利要求1-7中任一项所述的基于微信小程序生成保险页面的代码的方法的步骤。