页面创建方法、装置、电子设备和计算机可读存储介质与流程

文档序号:18894244发布日期:2019-10-15 22:39阅读:576来源:国知局
页面创建方法、装置、电子设备和计算机可读存储介质与流程
本公开涉及计算机
技术领域
,尤其涉及一种页面创建方法、装置、电子设备和计算机可读存储介质。
背景技术
:随着计算机技术的发展,小程序越来越受到用户青睐,也得到广泛的发展和应用。小程序是运行在应用程序(application,简称app)上的,无需用户进行下载就可以使用;小程序采用的是网页技术进行实现的。小程序所展示的内容包括了项目组和展示页面。现有技术中,在对小程序进行开发的时候,可以通过小程序的统一组件创建小程序所需要展示的项目组,其中,项目组中包括多个项目,例如,项目组为菜单栏、项目为菜单项;在创建小程序所需要展示的项目组的时候,可以根据开发人员所输入的项目数量和内容信息,生成项目组。然而现有技术中,小程序所提供的统一组件具有固定的样式,进而得到的项目组的样式、以及项目组中的项目的样式是固定的,风格单一化,例如,项目组为底部菜单栏、项目为菜单项时,采用现有技术的方式,得到的底部菜单栏的样式、以及底部菜单栏中的菜单项的样式是固定的;无法对小程序的展示样式进行自定义的开发和创建;进一步的,导致用户使用小程序时的体验较差。技术实现要素:本公开实施例提供一种页面创建方法、装置、电子设备和计算机可读存储介质,实现对小程序的展示样式进行自定义的开发和创建,进而使得风格多元化,并提高用户使用小程序时的体验。第一方面,本公开提供一种页面创建方法,包括:获取第一视图容器和项目配置信息,所述项目配置信息中包括位于第一位置的项目组的项目数量和项目内容信息;根据所述项目数量,在所述第一视图容器中设置至少一个第二视图容器,其中,所述第二视图容器用于承载所述位于第一位置的项目组中的一个项目;获取所述第一视图容器的样式信息和每一个所述第二视图容器的样式信息;根据所述项目内容信息、所述第一视图容器的样式信息和每一个所述第二视图容器的样式信息,生成所述位于第一位置的项目组。进一步地,根据所述项目内容信息、所述第一视图容器的样式信息和每一个所述第二视图容器的样式信息,生成所述位于第一位置的项目组,包括:根据所述项目内容信息,在每一个第二视图容器中生成与每一个第二视图容器对应的项目;根据所述第一视图容器的样式信息和每一个所述第二视图容器的样式信息,调整所述位于第一位置的项目组的样式、与每一个第二视图容器对应的项目的样式,以生成所述位于第一位置的项目组。进一步地,所述项目内容信息中包括每一个项目的图片来源信息和每一个项目的文字信息;根据所述项目内容信息,在每一个第二视图容器中生成与每一个第二视图容器对应的项目,包括:在每一个所述第二视图容器中设置一个图片容器和一个第三视图容器;根据与每一个所述第二视图容器对应的项目的图片来源信息,设置到与每一个所述第二视图容器对应的图片容器中,并将与每一个所述第二视图容器对应的项目的文字信息,设置到与每一个所述第二视图容器对应的第三视图容器中,以生成与每一个第二视图容器对应的项目。进一步地,所述图片来源信息包括:第一来源地址和第二来源地址;其中,所述第一来源地址用于指示出项目被选中状态时所显示的图片,所述第二来源地址用于指示出项目未被选中状态时所显示的图片。进一步地,所述文字信息被设置有颜色属性,所述颜色属性用于指示项目上的文字的颜色值,所述颜色值包括文字在选中状态下的颜色值和在未选中状态下的颜色值。进一步地,所述方法,还包括:获取第四视图容器和待生成的至少一个页面的页面信息;在所述第四视图容器中设置至少一个第五视图容器,所述第五视图容器用于承载一个页面的页面信息。进一步地,在根据所述项目内容信息、所述第一视图容器的样式信息和每一个所述第二视图容器的样式信息,生成所述位于第一位置的项目组之前,还包括:为所述第一视图容器设置回调函数,其中,所述回调函数与多个调用属性值对应,每一个调用属性值与每一个第二视图容器一一对应;且所述第一视图容器配置有一个变量值,所述变量值用于指示当前被选中的项目;在根据所述项目内容信息、所述第一视图容器的样式信息和每一个所述第二视图容器的样式信息,生成所述位于第一位置的项目组之后,还包括:接收用户发送的触发指令,其中,所述触发指令用于指示用户选择的项目所对应的第二视图容器;根据所述回调函数,确定所述触发指令所指示的第二视图容器所对应的调用属性值;在确定所述变量值与所述触发指令所指示的第二视图容器所对应的调用属性值相同时,确定保持显示当前所被选中的项目所对应的页面;在确定所述变量值与所述触发指令所指示的第二视图容器所对应的调用属性值不同时,根据所述触发指令所指示的第二视图容器的调用属性值,更新所述变量值,并显示更新后的变量值所指示的项目所对应的页面。进一步地,显示更新后的变量值所指示的项目所对应的页面,包括:确定更新后的变量值所指示的项目对应的第二视图容器;根据预设的第二视图容器与第五视图容器之间的对应关系,确定与第二视图容器对应的第五视图容器;根据预设的页面信息,对与第二视图容器对应的第五视图容器进行渲染,以生成更新后的变量值所指示的项目所对应的页面。第二方面,本公开提供了一种页面创建装置,包括:第一获取单元,用于获取第一视图视图容器和项目配置信息,所述项目配置信息中包括位于第一位置的项目组的项目数量和项目内容信息;第一设置单元,用于根据所述项目数量,在所述第一视图容器中设置至少一个第二视图容器,其中,所述第二视图容器用于承载所述位于第一位置的项目组中的一个项目;第二获取单元,用于获取所述第一视图容器的样式信息和每一个所述第二视图容器的样式信息;生成单元,用于根据所述项目内容信息、所述第一视图容器的样式信息和每一个所述第二视图容器的样式信息,生成所述位于第一位置的项目组。进一步地,所述生成单元,具体用于:根据所述项目内容信息,在每一个第二视图容器中生成与每一个第二视图容器对应的项目;根据所述第一视图容器的样式信息和每一个所述第二视图容器的样式信息,调整所述位于第一位置的项目组的样式、与每一个第二视图容器对应的项目的样式,以生成所述位于第一位置的项目组。进一步地,所述项目内容信息中包括每一个项目的图片来源信息和每一个项目的文字信息;所述生成单元,具体用于:在每一个所述第二视图容器中设置一个图片容器和一个第三视图容器;根据与每一个所述第二视图容器对应的项目的图片来源信息,设置到与每一个所述第二视图容器对应的图片容器中,并将与每一个所述第二视图容器对应的项目的文字信息,设置到与每一个所述第二视图容器对应的第三视图容器中,以生成与每一个第二视图容器对应的项目。进一步地,所述图片来源信息包括:第一来源地址和第二来源地址;其中,所述第一来源地址用于指示出项目被选中状态时所显示的图片,所述第二来源地址用于指示出项目未被选中状态时所显示的图片。进一步地,所述文字信息被设置有颜色属性,所述颜色属性用于指示项目上的文字的颜色值,所述颜色值包括文字在选中状态下的颜色值和在未选中状态下的颜色值。进一步地,所述装置还包括:第三获取单元和第二设置单元;所述第三获取单元,用于获取第四视图容器和待生成的至少一个页面的页面信息;所述第二设置单元,用于在所述第四视图容器中设置至少一个第五视图容器,所述第五视图容器用于承载一个页面的页面信息。进一步地,所述装置还包括:第三设置单元和页面切换处理单元;所述第三设置单元,用于在所述生成单元生成所述位于第一位置的项目组之前,为所述第一视图容器设置回调函数,其中,所述回调函数与多个调用属性值对应,每一个调用属性值与每一个第二视图容器一一对应;且所述第一视图容器配置有一个变量值,所述变量值用于指示当前被选中的项目;所述页面处理单元,用于在所述生成单元生成所述位于第一位置的项目组之后,接收用户发送的触发指令,其中,所述触发指令用于指示用户选择的项目所对应的第二视图容器;根据所述回调函数,确定所述触发指令所指示的第二视图容器所对应的调用属性值;在确定所述变量值与所述触发指令所指示的第二视图容器所对应的调用属性值相同时,确定保持显示当前所被选中的项目所对应的页面;在确定所述变量值与所述触发指令所指示的第二视图容器所对应的调用属性值不同时,根据所述触发指令所指示的第二视图容器的调用属性值,更新所述变量值,并显示更新后的变量值所指示的项目所对应的页面。进一步地,所述页面处理单元,具体用于:确定更新后的变量值所指示的项目对应的第二视图容器;根据预设的第二视图容器与第五视图容器之间的对应关系,确定与第二视图容器对应的第五视图容器;根据预设的页面信息,对与第二视图容器对应的第五视图容器进行渲染,以生成更新后的变量值所指示的项目所对应的页面。第三方面,本公开提供一种电子设备,包括:存储器和处理器;所述存储器,用于存储计算机程序;其中,所述处理器执行所述存储器中的计算机程序,以实现如第一方面中任一实施例的方法。第四方面,本公开提供一种计算机可读存储介质,其上存储有计算机程序,所述计算机程序被处理器执行以实现如第一方面中任一实施例的方法。本公开提供了一种页面创建方法、装置、电子设备和计算机可读存储介质,通过获取第一视图容器和项目配置信息,然后便可根据项目配置信息中的项目数量,在该第一视图容器中设置至少一个第二视图容器,其中,第一视图容器用于承载位于第一位置的项目组,第二视图容器用于承载位于第一位置的项目组中的一个项目,那么,基于视图容器所提供的样式属性,开发人员便可对第一视图容器的样式信息和每一个第二视图容器的样式信息进行自定义的开发和创建,这样,在获取到第一视图容器的样式信息和每一个第二视图容器的样式信息之后,结合项目配置信息中的项目内容信息,便可生成自定义样式的项目组,从而使得风格多元化,进而提高用户在使用小程序时的体验。附图说明此处的附图被并入说明书中并构成本说明书的一部分,示出了符合本公开的实施例,并与说明书一起用于解释本公开的原理。图1为本公开一实施例提供的页面创建方法的流程示意图;图2为本公开一实施例提供的底部菜单栏的示意图;图3为本公开另一实施例提供的底部菜单栏的示意图;图4为本公开另一实施例提供的页面创建方法的流程示意图;图5为本公开一实施例提供的页面创建装置的结构示意图;图6为本公开另一实施例提供的页面创建装置的结构示意图;图7为本公开一实施例提供的电子设备的结构示意图;图8为本公开一实施例提供的电子设备的示例性结构示意图。通过上述附图,已示出本公开明确的实施例,后文中将有更详细的描述。这些附图和文字描述并不是为了通过任何方式限制本公开构思的范围,而是通过参考特定实施例为本领域技术人员说明本公开的概念。具体实施方式为使本公开实施例的目的、技术方案和优点更加清楚,下面将结合本公开实施例中的附图,对本公开实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例是本公开一部分实施例,而不是全部的实施例。基于本公开中的实施例,本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例,都属于本公开保护的范围。下面先介绍一下相关技术。一、什么是事件事件是视图层到逻辑层的通讯方式;事件可以将用户的行为反馈到逻辑层进行处理;事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数;事件对象可以携带额外信息,如id,dataset,touches。二、事件的使用方式在组件中绑定一个事件处理函数,如bindtap,当用户点击该组件的时候会在该页面对应的page中找到相应的事件处理函数。在相应的page定义中写上相应的事件处理函数,参数是event。三、使用wxs函数响应事件基础库2.4.4开始支持,低版本需做兼容处理。从基础库版本2.4.4开始,支持使用wxs函数绑定事件,wxs函数接受2个参数,第一个是event,在原有的event的基础上加了event.instance对象,第二个参数是ownerinstance,和event.instance一样,是一个componentdescriptor对象。具体使用如下:在组件中绑定和注册事件处理的wxs函数;test.wxs文件实现tapname函数。需说明的是,绑定的wxs函数必须用{{}}括起来。其中,ownerinstance包含了一些方法,可以设置组件的样式和class。四、事件分类事件分为冒泡事件和非冒泡事件:冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递。非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递。wxml的冒泡事件列表如下表1所示:表1需说明的是,除上表之外的其他组件自定义事件如无特殊声明都是非冒泡事件,如<form/>的submit事件,<input/>的input事件,<scroll-view/>的scroll事件。五、事件绑定和冒泡事件绑定的写法同组件的属性,以key、value的形式。key以bind或catch开头,然后跟上事件类型,如bindtap、catchtouchstart。自基础库版本1.5.0起,在非原生组件中,bind和catch后可以紧跟一个冒号,其含义不变,如bind:tap、catch:touchstart。value是一个字符串,需要在对应的page中定义同名的函数,不然当触发事件的时候会报错。bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡。六、事件的捕获阶段自基础库版本1.5.0起,触摸类事件支持捕获阶段。捕获阶段位于冒泡阶段之前,且在捕获阶段中,事件到达节点的顺序与冒泡阶段恰好相反。需要在捕获阶段监听事件时,可以采用capture-bind、capture-catch关键字,后者将中断捕获阶段和取消冒泡阶段。图1为本公开一实施例提供的页面创建方法的流程示意图,如图1所示,以该实施例提供的方法应用于页面创建装置来进行示例说明,该方法包括:步骤101:获取第一视图容器和项目配置信息,项目配置信息中包括位于第一位置的项目组的项目数量和项目内容信息。实际应用中,本公开实施例的执行主体可以为页面创建装置,该页面创建装置可以为程序软件,也可以为存储有相关计算机程序的介质,例如,u盘等;或者,该页面创建装置还可以为集成或安装有相关计算机程序的实体设备,例如,芯片、智能终端、电脑、服务器等。在本公开实施例中,获取第一视图容器的方式可有多种。例如,可在接收到开发人员输入的创建指令时,获取第一视图容器,具体的,一种实施方式为,在接收到创建指令时,创建第一视图容器;另一种实施方式为,在接收到创建指令时,从存储设备中获取第一视图容器,其中,存储设备中存储有第一视图容器,存储设备可为芯片、智能终端、电脑、服务器等等。为了提高页面创建的效率,提高开发人员在创建页面时的体验,可向开发人员提供可配置化的界面,这样,开发人员通过可配置化的界面便可输入项目配置信息,也即,通过该界面可获取到项目配置信息。项目配置信息可根据实际需求进行设定。其中,第一位置可为小程序的顶边、底边、侧边等等,项目组可为菜单栏等等,举例来说,当第一位置为小程序的底边、项目组为菜单栏时,位于第一位置的项目组则为小程序的底部菜单栏。另外,配置信息中的项目内容信息可包括每一个项目的图片来源信息和每一个项目的文字信息,例如,当项目组为菜单栏时,项目可为菜单项;除此之外,项目配置信息中还可包括位于第一位置的项目组的背景颜色信息等等。步骤102:根据项目数量,在第一视图容器中设置至少一个第二视图容器,其中,第二视图容器用于承载位于第一位置的项目组中的一个项目。在本公开实施例中,为了便于对每一个项目的样式进行自定义,一个项目对应一个第二视图容器。具体的,可根据项目数量,在第一视图容器中创建并插入相应数量的<view>标签,并使用小程序所提供的列表渲染每一个<view>标签,以作为相应项目所对应的第二视图容器。步骤103:获取第一视图容器的样式信息和每一个第二视图容器的样式信息。在本公开实施例中,第一视图容器和每一个第二视图容器均具有class属性,也即,样式属性,从而开发人员可对第一视图容器的样式信息和每一个第二视图容器的样式信息进行自定义的开发和创建,也即,页面创建装置能够获取到开发人员所自定义的第一视图容器的样式信息和每一个第二视图容器的样式信息。实际应用中,样式信息可包括但不限于形状、位置、颜色等等。针对第一视图容器,举例来说,第一视图容器的样式信息包括位于第一位置的项目组的形状,其中,项目组的形状可根据实际需求进行设定,如设定为不规则的多边形、长方形、正方形等等。例如,第一位置为小程序的底边,项目组为菜单栏,也即第一位置的项目组为底部菜单栏时,参见图2,图2为本公开一实施例提供的底部菜单栏的示意图,图2所示的底部菜单栏的形状为椭圆形。针对第二视图容器,举例来说,第二视图容器的样式信息包括项目的位置信息,其中,位置信息可根据实际需求进行设定,如设定为项目中的图片显示在相应第二视图容器中,或者是,项目组中的图片显示在相应第二视图容器外。例如,第一位置为小程序的底边,项目组为菜单栏,也即第一位置的项目组为底部菜单栏,相应的,项目组中的项目为菜单项时,参见图3,图3为本公开另一实施例提供的底部菜单栏的示意图,如图3所示,位于中间的菜单项(即“发布”对应的菜单项)中的图片显示在相应第二视图容器外,其余四个图片显示在相应第二视图容器中。步骤104:根据项目内容信息、第一视图容器的样式信息和每一个第二视图容器的样式信息,生成位于第一位置的项目组。在本公开实施例中,在获取到第一视图容器的样式信息和每一个第二视图容器的样式信息之后,结合已获取到的项目内容信息,便可生成位于第一位置的项目组,其中,通过第一视图容器的样式信息和每一个第二视图容器的样式信息,使得所生成的位于第一位置的项目组具有自定义的样式信息,本公开实施例提供了一种页面创建方法,通过获取第一视图容器和项目配置信息,然后便可根据项目配置信息中的项目数量,在该第一视图容器中设置至少一个第二视图容器,其中,第一视图容器用于位于第一位置的项目组,第二视图容器用于承载位于第一位置的项目组中的一个项目,那么,基于视图容器所提供的样式属性,开发人员便可对第一视图容器的样式信息和每一个第二视图容器的样式信息进行自定义的开发和创建,这样,在获取到第一视图容器的样式信息和每一个第二视图容器的样式信息之后,结合项目配置信息中的项目内容信息,便可生成自定义样式的项目组,从而使得风格多元化,进而提高用户在使用小程序时的体验。图4为本公开另一实施例提供的页面创建方法的流程示意图,如图4所示,该方法可以包括:步骤401:获取第一视图容器和项目配置信息,项目配置信息中包括位于第一位置的项目组的项目数量和项目内容信息。在本公开实施例中,以位于第一位置的项目组为底部菜单栏为例,相应的,项目为菜单项,可采用tabbar对象来获取底部菜单栏所对应的项目配置信息。该对象具有color属性、selectedcolor属性、backgroundcolor属性和list属性,其中,color属性表示未被选中的菜单项中的文字信息的颜色,selectedcolor属性表示被选中的菜单项中的文字信息的颜色,backgroundcolor属性表示底部菜单栏的背景颜色,list属性对应一个数组,用于存储项目内容信息。即,可通过开发人员对上述每一个属性进行赋值,来获取到底部菜单栏所对应的项目配置信息。其中,项目内容信息包括每一个菜单项的图片来源信息和每一个菜单项的文字信息。另外,通对list属性所进行的赋值,可确定底部菜单栏所对应的项目数量。步骤402:根据项目数量,在第一视图容器中设置至少一个第二视图容器,其中,第二视图容器用于承载位于第一位置的项目组中的一个项目。步骤403:为第一视图容器设置回调函数,其中,回调函数与多个调用属性值对应,每一个调用属性值与每一个第二视图容器一一对应;且第一视图容器配置有一个变量值,变量值用于指示当前被选中的项目。在本公开实施例中,初始化变量tabindex为1,tabindex变量表示当前被选中的项目在位于第一位置的项目组中的位置,变量值为1表示当前被选中的项目为第1个项目(如按照从左至至右的顺序)。以项目组为菜单栏为例,相应的,项目为菜单项,则变量值为1表示当前被选中的菜单项为第1个菜单项。需要说明的是,tabindex的初始值也可根据实际需求设置为其它数值,本方案对此不作限定。为了实现界面切换,针对第n个项目,可设置第n个项目对应的第二视图容器的data-index属性的值为n,也即,为每一个第二视图容器设置一个调用属性值,并为第一视图容器设置回调函数,其中,可采用bindtap回调函数。步骤404:获取第一视图容器的样式信息和每一个第二视图容器的样式信息。步骤405:根据项目内容信息,在每一个第二视图容器中生成与每一个第二视图容器对应的项目。在本公开实施例中,该步骤具体可通过如下子步骤实现:第一子步骤:在每一个第二视图容器中设置一个图片容器和一个第三视图容器;第二子步骤:根据与每一个第二视图容器对应的项目的图片来源信息,设置到与每一个第二视图容器对应的图片容器中,并将与每一个第二视图容器对应的项目的文字信息,设置到与每一个第二视图容器对应的第三视图容器中,以生成与每一个第二视图容器对应的项目。具体的,针对第一子步骤,可在每一个第二视图容器中创建并插入一个<image>标签,作为图片容器,并在每一个第二视图容器中创建并插入一个<视图>标签,作为第三视图容器。步骤406:获取第四视图容器和待生成的至少一个页面的页面信息。在本公开实施例中,获取第四视图容器的方式可有多种,具体可参照获取第一视图容器的方式,此处不再赘述。步骤407:在第四视图容器中设置至少一个第五视图容器,第五视图容器用于承载一个页面的页面信息。在本公开实施例中,根据项目数量,在第四视图容器中创建并插入至少一个<view>标签,以将每一个<view>标签作为一个第五视图容器。步骤408:根据第一视图容器的样式信息和每一个第二视图容器的样式信息,调整位于第一位置的项目组的样式、与每一个第二视图容器对应的项目的样式,以生成位于第一位置的项目组。在本公开实施例中,以一个第二视图容器a的样式信息为图片1显示在第二视图容器a之外、另一个第二视图容器b的样式信息为图片2显示在第二视图容器b之中为例,那么在获取到这些样式信息之后,便可进行样式调整,以在生成的项目组中图片1显示在第二视图容器a之外,而图片2显示在第二视图容器b之中,示例性的,可参照图3所示,“发布”所对应的图片显示在容器之外,而其它菜单项所对应的图片显示在相应容器之中。步骤409:接收用户发送的触发指令,其中,触发指令用于指示用户选择的项目所对应的第二视图容器。步骤410:根据回调函数,确定触发指令所指示的第二视图容器所对应的调用属性值。在本公开实施例中,根据回调函数,可获得dataset属性对应的对象的index属性的值,其中,dataset属性为target属性对应的对象的属性,而target属性为传入的事件对象的属性。举例来说,当使用小程序的用户点击底部菜单栏中的菜单项时,会接收到用户发送的触发指令,而后根据该触发指令生成事件对象,从而根据回调函数和事件对象便可获得相应的调用属性值。下面对事件对象做一下解释:如无特殊说明,当组件触发事件时,逻辑层绑定该事件的处理函数会收到一个事件对象。baseevent基础事件对象的属性如下表2所示。表2customevent自定义事件对象的属性(继承baseevent)如下表3所示。表3属性类型说明detailobject额外的信息touchevent触摸事件对象的属性(继承baseevent)如下表4所示。表4特殊事件:<canvas>中的触摸事件不可冒泡,所以没有currenttarget。其中,type代表事件的类型;timestamp为页面打开到触发事件所经过的毫秒数;target为触发事件的源组件,其对应的属性如下表5所示:表5currenttarget为事件绑定的当前组件,其对应的属性如下表6所示。表6其中,dataset在组件中可以定义数据,这些数据将会通过事件传递给service。书写方式是以data-开头,多个单词由连字符-链接,不能有大写(大写会自动转成小写)如data-element-type,最终在event.currenttarget.dataset中会将连字符转成驼峰elementtype。另外,touches是一个数组,每个元素为一个touch对象(canvas触摸事件中携带的touches是canvastouch数组)。表示当前停留在屏幕上的触摸点。touch对象的属性如下表7所示。表7进一步地,changedtouches数据格式同touches。表示有变化的触摸点,如从无变有(touchstart),位置变化(touchmove),从有变无(touchend、touchcancel)。步骤411:在确定变量值与触发指令所指示的第二视图容器所对应的调用属性值相同时,确定保持显示当前所被选中的项目所对应的页面。在本公开实施例中,当获取到的调用属性值等于变量值,则说明用户再次点击了已经被选中的项目,从而还是保持当前所被选中的项目所对应的页面。步骤412:在确定变量值与触发指令所指示的第二视图容器所对应的调用属性值不同时,根据触发指令所指示的第二视图容器的调用属性值,更新变量值,并显示更新后的变量值所指示的项目所对应的页面。在本公开实施例中,当获取到的调用属性值不等于变量值时,则说明用户点击了项目组中的其它项目,如点击了其它菜单项,则需要更新变量值,然后显示更新后的变量值所对应的页面。其中,显示更新后的变量值所指示的项目所对应的页面具体可通过如下步骤实现:第一步骤,确定更新后的变量值所指示的项目对应的第二视图容器;第二步骤,根据预设的第二视图容器与第五视图容器之间的对应关系,确定与第二视图容器对应的第五视图容器;第三步骤,根据预设的页面信息,对与第二视图容器对应的第五视图容器进行渲染,以生成更新后的变量值所指示的项目所对应的页面。具体的,针对上述第三步骤,可通过小程序所提供的条件对与第二视图容器对应的第五视图容器进行渲染,以生成更新后的变量值所指示的项目所对应的页面。另外,在完成页面且切换的同时,为了完成对项目的切换,图片来源信息包括:第一来源地址和第二来源地址;其中,第一来源地址用于指示出项目被选中状态时所显示的图片,第二来源地址用于指示出项目未被选中状态时所显示的图片。另外,文字信息被设置有颜色属性,颜色属性用于指示项目上的文字的颜色值,颜色值包括文字在选中状态下的颜色值(即tabbar的selectedcolor属性的值)和在未选中状态下的颜色值(即tabbar的color属性的值)。具体的,可设置被选中的项目所对应的<image>标签的src属性的值为相应的第一来源地址,其它未被选中的项目所对应的<image>标签的src属性的值为相应的第二来源地址;以及设置被选中的项目所对应的第三视图容器的style属性中的color属性的值为tabbar的selectedcolor属性的值,未被选中的项目所对应的第三视图容器的style属性中的color属性的值为color属性的值。在进行渲染时,可通过wx:for实现。在组件上使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item。渲染的部分关键代码可如下:本公开实施例通过设置回调函数、调用属性值以及变量值,从而能够在接收到用户发送的触发指令之后,根据回调函数获得用户所选中的项目所对应的调用属性值,进而能够根据该调用属性值域变量值之间的关系,进行页面控制,并在两者不等时,实现展示页面的切换以及选中态项目的切换。图5为本公开一实施例提供的页面创建装置的结构示意图,包括:第一获取单元501,用于获取第一视图视图容器和项目配置信息,所述项目配置信息中包括位于第一位置的项目组的项目数量和项目内容信息;第一设置单元502,用于根据所述项目数量,在所述第一视图容器中设置至少一个第二视图容器,其中,所述第二视图容器用于承载所述位于第一位置的项目组中的一个项目;第二获取单元503,用于获取所述第一视图容器的样式信息和每一个所述第二视图容器的样式信息;生成单元504,用于根据所述菜单项内容信息、所述第一视图容器的样式信息和每一个所述第二视图容器的样式信息,生成所述位于第一位置的项目组。关于本公开实施例中的装置,其中各个模块执行操作的具体方式已经在有关该方法的实施例中进行了详细描述,此处将不做详细阐述说明。本公开提供了一种页面创建方法、装置、电子设备和计算机可读存储介质,通过获取第一视图容器和项目配置信息,然后便可根据项目配置信息中的项目数量,在该第一视图容器中设置至少一个第二视图容器,其中,第一视图容器用于承载位于第一位置的项目组,第二视图容器用于承载位于第一位置的项目组中的一个项目,那么,基于视图容器所提供的样式属性,开发人员便可对第一视图容器的样式信息和每一个第二视图容器的样式信息进行自定义的开发和创建,这样,在获取到第一视图容器的样式信息和每一个第二视图容器的样式信息之后,结合项目配置信息中的项目内容信息,便可生成自定义样式的项目组,从而使得风格多元化,进而提高用户在使用小程序时的体验。图6为本公开另一实施例提供的页面创建装置的结构示意图,在上述实施例提供的页面创建装置的基础上,如图6所示,所述生成单元504,具体用于:根据所述项目内容信息,在每一个第二视图容器中生成与每一个第二视图容器对应的项目;根据所述第一视图容器的样式信息和每一个所述第二视图容器的样式信息,调整所述位于第一位置的项目组的样式、与每一个第二视图容器对应的项目的样式,以生成所述位于第一位置的项目组。进一步地,所述项目内容信息中包括每一个项目的图片来源信息和每一个项目的文字信息;所述生成单元504,具体用于:在每一个所述第二视图容器中设置一个图片容器和一个第三视图容器;根据与每一个所述第二视图容器对应的项目的图片来源信息,设置到与每一个所述第二视图容器对应的图片容器中,并将与每一个所述第二视图容器对应的项目的文字信息,设置到与每一个所述第二视图容器对应的第三视图容器中,以生成与每一个第二视图容器对应的项目。进一步地,所述图片来源信息包括:第一来源地址和第二来源地址;其中,所述第一来源地址用于指示出项目被选中状态时所显示的图片,所述第二来源地址用于指示出项目未被选中状态时所显示的图片。进一步地,所述文字信息被设置有颜色属性,所述颜色属性用于指示项目上的文字的颜色值,所述颜色值包括文字在选中状态下的颜色值和在未选中状态下的颜色值。进一步地,所述装置还包括:第三获取单元601和第二设置单元602;所述第三获取单元601,用于获取第四视图容器和待生成的至少一个页面的页面信息;所述第二设置单元602,用于在所述第四视图容器中设置至少一个第五视图容器,每一个所述第五视图容器用于承载一个页面的页面信息。进一步地,所述装置还包括:第三设置单元603和页面切换处理单元604;所述第三设置单元603,用于在所述生成单元504生成位于第一位置的项目组之前,为所述第一视图容器设置回调函数,其中,所述回调函数与多个调用属性值对应,每一个调用属性值与每一个第二视图容器一一对应;且所述第一视图容器配置有一个变量值,所述变量值用于指示当前被选中的项目;所述页面处理单元604,用于在所述生成单元504生成位于第一位置的项目组之后,接收用户发送的触发指令,其中,所述触发指令用于指示用户选择的项目所对应的第二视图容器;根据所述回调函数,确定所述触发指令所指示的第二视图容器所对应的调用属性值;在确定所述变量值与所述触发指令所指示的第二视图容器所对应的调用属性值相同时,确定保持显示当前所被选中的项目所对应的页面;在确定所述变量值与所述触发指令所指示的第二视图容器所对应的调用属性值不同时,根据所述触发指令所指示的第二视图容器的调用属性值,更新所述变量值,并显示更新后的变量值所指示的项目所对应的页面。进一步地,所述页面处理单元604,具体用于:确定更新后的变量值所指示的项目对应的第二视图容器;根据预设的第二视图容器与第五视图容器之间的对应关系,确定与第二视图容器对应的第五视图容器;根据预设的页面信息,对与第二视图容器对应的第五视图容器进行渲染,以生成更新后的变量值所指示的项目所对应的页面。关于本公开实施例中的装置,其中各个模块执行操作的具体方式已经在有关该方法的实施例中进行了详细描述,此处将不做详细阐述说明。需要说明的是,本公开实施例中各可实施的方式可以单独实施,也可以在不冲突的情况下以任意组合方式结合实施本公开不做限定。本公开实施例通过设置回调函数、调用属性值以及变量值,从而能够在接收到用户发送的触发指令之后,根据回调函数获得用户所选中的项目所对应的调用属性值,进而能够根据该调用属性值域变量值之间的关系,进行页面控制,并在两者不等时,实现展示页面的切换以及选中态项目的切换。图7为本公开一实施例提供的电子设备的结构示意图,包括:存储器701和处理器702;所述存储器,用于存储计算机程序;其中,所述处理器执行所述存储器中的计算机程序,以实现上述任一实施例的方法。作为一种示例性的实施例,可选地,如图8所示,为本公开实施例提供的电子设备的示例性结构示意图。该电子设备800可以包括处理装置(例如中央处理器、图形处理器等)801,其可以根据存储在只读存储器(rom)802中的程序或者从存储装置808加载到随机访问存储器(ram)803中的程序而执行各种适当的动作和处理。在ram803中,还存储有电子设备800操作所需的各种程序和数据。处理装置801、rom802以及ram803通过总线804彼此相连。输入/输出(i/o)接口805也连接至总线804。通常,以下装置可以连接至i/o接口805:包括例如触摸屏、触摸板、键盘、鼠标、摄像头、麦克风、加速度计、陀螺仪等的输入装置806;包括例如液晶显示器(lcd)、扬声器、振动器等的输出装置807;包括例如磁带、硬盘等的存储装置808;以及通信装置809。通信装置809可以允许电子设备800与其他设备进行无线或有线通信以交换数据。虽然图8示出了具有各种装置的电子设备800,但是应理解的是,并不要求实施或具备所有示出的装置。可以替代地实施或具备更多或更少的装置。特别地,根据本公开的实施例,上文参考流程图描述的过程可以被实现为计算机软件程序。例如,本公开的实施例包括一种计算机程序产品,其包括承载在计算机可读介质上的计算机程序,该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中,该计算机程序可以通过通信装置809从网络上被下载和安装,或者从存储装置808被安装,或者从rom802被安装。在该计算机程序被处理装置801执行时,执行本公开实施例的方法中限定的上述功能。需要说明的是,本公开上述的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件,或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于:具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(ram)、只读存储器(rom)、可擦式可编程只读存储器(eprom或闪存)、光纤、便携式紧凑磁盘只读存储器(cd-rom)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本公开中,计算机可读存储介质可以是任何包含或存储程序的有形介质,该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本公开中,计算机可读信号介质可以包括在基带中或者作为载波一部分传播的数据信号,其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式,包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读信号介质还可以是计算机可读存储介质以外的任何计算机可读介质,该计算机可读信号介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输,包括但不限于:电线、光缆、rf(射频)等等,或者上述的任意合适的组合。本公开又一实施例提供一种计算机可读存储介质,其上存储有计算机程序,所述计算机程序被处理器执行以实现上述任一实施例的方法。在本公开所提供的几个实施例中,应该理解到,所揭露的装置和方法,可以通过其它的方式实现。例如,以上所描述的装置实施例仅仅是示意性的,例如,所述单元的划分,仅仅为一种逻辑功能划分,实际实现时可以有另外的划分方式,例如多个单元或组件可以结合或者可以集成到另一个系统,或一些特征可以忽略,或不执行。另一点,所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口,装置或单元的间接耦合或通信连接,可以是电性,机械或其它的形式。所述作为分离部件说明的单元可以是或者也可以不是物理上分开的,作为单元显示的部件可以是或者也可以不是物理单元,即可以位于一个地方,或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本公开实施例方案的目的。另外,在本公开各个实施例中的各功能单元可以集成在一个处理单元中,也可以是各个单元单独物理存在,也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现,也可以采用硬件加软件功能单元的形式实现。上述以软件功能单元的形式实现的集成的单元,可以存储在一个计算机可读取存储介质中。上述软件功能单元存储在一个存储介质中,包括若干指令用以使得一台计算机设备(可以是个人计算机,服务器,或者网络设备等)或处理器(processor)执行本公开各个实施例所述方法的部分步骤。而前述的存储介质包括:u盘、移动硬盘、只读存储器(read-onlymemory,rom)、随机存取存储器(randomaccessmemory,ram)、磁碟或者光盘等各种可以存储程序代码的介质。本领域技术人员可以清楚地了解到,为描述的方便和简洁,仅以上述各功能模块的划分进行举例说明,实际应用中,可以根据需要而将上述功能分配由不同的功能模块完成,即将装置的内部结构划分成不同的功能模块,以完成以上描述的全部或者部分功能。上述描述的装置的具体工作过程,可以参考前述方法实施例中的对应过程,在此不再赘述。最后应说明的是:以上各实施例仅用以说明本公开的技术方案,而非对其限制;尽管参照前述各实施例对本公开进行了详细的说明,本领域的普通技术人员应当理解:其依然可以对前述各实施例所记载的技术方案进行修改,或者对其中部分或者全部技术特征进行等同替换;而这些修改或者替换,并不使相应技术方案的本质脱离本公开各实施例技术方案的范围。当前第1页12
当前第1页1 2 
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1