CN107479873A - 一种app页面模块化开发方法、电子设备及存储介质 - Google Patents

Abstract

本发明公开了一种APP页面模块化开发方法，包括以下步骤：初始化步骤：启动APP并初始化APP页面；数据获取步骤：向服务器发送数据请求并接收服务器返回的数据，以及对服务器返回的数据进行解析；数据封装步骤：根据服务器返回的数据的类型生成对应的模块化对象，并通过模块化对象对对应的数据进行封装；数据填充步骤：生成模块单元，并将模块化对象所封装的数据填充到对应的模块单元内；页面展示步骤：对模块单元进行组合生成页面视图并将页面视图展示给用户。本发明还提供了一种电子设备和计算机可读存储介质。本发明通过将页面模块化，从而能够实现页面的快速开发以及提高页面的样式复用率。

Description

一种APP页面模块化开发方法、电子设备及存储介质

技术领域

本发明涉及一种APP页面开发，尤其涉及一种APP页面模块化开发方法、电子设备及存储介质。

背景技术

随着Internet的不断发展，网络在人们的生活中已经占据了不可替代的地位。基于手机端的在线购物系统能够使得大众随时随地选购自己喜欢的商品，尤其Android平台以其独有的开放性被广泛应用于智能手机、平板电脑等领域，使得更多的APP开发越来越受到中重视。一般来说，对于购物的APP来说，为了鞥能够具备良好的可扩展性和可维护性，设计分为客户端和服务端两部分，同时开发过程中采用C/S架构，使用Andriod Studio、ADT(Android Development Kit)以及基于Java语言的Android SDK进行客户端的应用程序开发来实现。比如系统中的主要实现的业务需求包括用户账户注册和登录、浏览商品详情、选购商品、添加购物车、查看订单、购物车中的商品信息保存至本地数据库、用户信息修改、收货地址增加、删除、修改等。

然后，在APP开发时，会涉及到很多的页面。比如首页、商品详情页等类似于这种优先级很高的页面，布局样式不会经常改变，考虑到流畅度和用户体验，在开发时都是通过原生控件实现页面；而二级页面，即是需要经常变化的页面来说，为了能够快速开发，很多情况下都是通过H5来实现页面；这样每个页面之间的样式以及ui呈现方式都是独立的。但是，对于现有的页面开发来说存在以下缺陷：

1)对于优先级较高的页面，比如首页不够灵活和自由的运用其样式表。比如，对商城来说，其各种类型的频道页也需要使用首页的样式进行展示，现有的实现方式并不能够自由和灵活地使用这种需求；

2)商城首页的样式不能够重用，样式复用率低下。

发明内容

为了克服现有技术的不足，本发明的目的之一在于提供一种APP页面模块化开发方法，其能够解决现有技术中APP页面开发不灵活的问题。

本发明的目的之二在于提供一种电子设备，其能够解决现有技术中APP页面开发不灵活的问题。

本发明的目的之三在于提供一种计算机可读存储介质，其能够解决现有技术中APP页面开发不灵活的问题。

本发明的目的之四在于提供一种APP页面模块化开发装置，其能够解决现有技术中APP页面开发不灵活的问题。

本发明的目的之一采用如下技术方案实现：

一种APP页面模块化开发方法，包括以下步骤：

初始化步骤：启动APP并初始化APP页面；

数据获取步骤：向服务器发送数据请求并接收服务器返回的数据，以及对服务器返回的数据进行解析；

数据封装步骤：根据服务器返回的数据的类型生成对应的模块化对象，并通过模块化对象对对应的数据进行封装；

数据填充步骤：生成模块单元，并将模块化对象所封装的数据填充到对应的模块单元内；

页面展示步骤：对模块单元进行组合生成页面视图并将页面视图展示给用户。

进一步地，所述数据获取步骤之前还包括初始化本地数据步骤：初始化并加载本地数据库中的本地数据。

进一步地，所述服务器返回的数据是通过json的方式对数据进行封装的。

进一步地，所述数据请求为http请求。

本发明的目的之二采用如下技术方案实现：

一种电子设备，至少包括存储器、处理器以及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现如下步骤：

初始化步骤：启动APP并初始化APP页面；

数据获取步骤：向服务器发送数据请求并接收服务器返回的数据，以及对服务器返回的数据进行解析；

数据封装步骤：根据服务器返回的数据的类型生成对应的模块化对象，并通过模块化对象对对应的数据进行封装；

数据填充步骤：生成模块单元，并将模块化对象所封装的数据填充到对应的模块单元内；

页面展示步骤：对模块单元进行组合生成页面视图并将页面视图展示给用户。

进一步地，所述数据获取步骤之前还包括初始化本地数据步骤：初始化并加载本地数据库中的本地数据。

进一步地，所述服务器返回的数据是通过json的方式对数据进行封装的。

进一步地，所述数据请求为http请求。

本发明的目的之三采用如下技术方案实现：

一种计算机可读存储介质，其上存储有计算机程序，其特征在于：所述计算程序被处理器执行时实现如前所述的APP页面模块化开发方法的步骤。

本发明的目的之四采用如下技术方案实现：

一种APP页面模块化开发装置，包括：

初始化模块，用于启动APP并初始化APP页面；

数据获取模块，用于向服务器发送数据请求并接收服务器返回的数据，以及对服务器返回的数据进行解析；

数据封装模块，用于根据服务器返回的数据的类型生成对应的模块化对象，并通过模块化对象对对应的数据进行封装；

数据填充模块，用于生成模块单元，并将模块化对象所封装的数据填充到对应的模块单元内；

页面展示模块，用于对模块单元进行组合生成页面视图并将页面视图展示给用户。

相比现有技术，本发明的有益效果在于：

本发明通过将APP首页页面的数据进行模块化，从而能够灵活将首页的样式运用到其他的页面中，提高了样式的复用率。

附图说明

图1为本发明提供的方法流程图；

图2为本发明提供的装置模块图。

具体实施方式

下面，结合附图以及具体实施方式，对本发明做进一步描述，需要说明的是，在不相冲突的前提下，以下描述的各实施例之间或各技术特征之间可以任意组合形成新的实施例。

实施例

本发明为了解决现有技术中商城APP的页面开发的不灵活性，通过将商城页面数据进行模块化，根据模块化的数据，抽离出每个模块对应的ui样式，这样在客户端的任意页面，只要数据类型符合模块化的结构，就能够重用其对应的ui样式向用户呈现，并且每个模块对应的数据还能够缓存到本地，这样就解决了原有的商城类APP在开发时无法自由灵活的控制商城首页的呈现样式的问题，实现了商城首页或其他专题页的可定制化，对于APP客户端开发时样式能够进行重用、提高了样式复用率。

本发明所涉及到以下名词：

1、ui元素：也即是ui控件，其是Android移动端APP界面的基本组成单位，主要包括文本控件TextView、按钮控件Button和ImageButton、负责显示图片的控件ImageView、输入控件EditText、显示列表数据的ListView等，Andriod移动端APP主要是通过这些控件与用户进行交互的。

2、模块单元：其是Android移动端APP页面的基本组成单元，是由ui元素构成，根据服务器返回不同的数据类型，生成各种样式的模块单元，再由这些模块单元根据服务器返回的数据先后顺序，生成最终的界面呈现给用户。也即是说，将APP页面根据数据的类型进行模块化。

另外，模块单元既可以在App的首页显示，也可以在App的任意页面显示，只要服务器返回该页面的数据结构类型所对应的模块单元存在，就能够生成该模块单元并展示在相应的页面。

3、Json：Json(其全称为：JavaScript Object Notation)是一种轻量级的数据交换格式。它是基于ECMAScript规范的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。Json数据格式具有简洁和清晰的层次结构，其是一种理想的数据交换语言；便于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。其中客户端与服务器之间的数据就是以Json的方式封装后进行传输的。

4、本地数据库：比如，用户打开金币联盟App时，首先初始化本地数据库，其中本地数据库中缓存有服务端返回的数据。这样，用户在无网络或网络延迟的情况下，首先初始化本地数据库，向用户展示保存在本地数据库中缓存的数据，增强用户体验。

5、不同的页面的数据也是不同的，大致可归纳为模块单元数据、用户数据、订单数据、商品数据、省市区数据等。服务端返回的数据主要包括用户信息，例如：用户id、用户手机号码、用户名、用户昵称等；商品信息，例如：商品id、商品名称、商品描述、商品图片url等；订单信息，例如：订单id、订单状态、订单收货地址、订单生成时间等。

6、另外，本发明中的模块单元之间的组合是通过服务端返回指定的一个字段来进行组合的。页面中数据的类型不同，其所划分的模块单元也不同。

7、App向服务端发送http请求获取到模块单元的数据(数据格式为json)之后，是在App内部对json进行解析，并生成对应的模块单元，然后将模块单元包含的数据通过Android中的ui元素来进行展示，例如商品名称通过TextView来进行展示，商品图片通过ImageView进行展示，渲染在手机屏幕上。这个过程是在App端完成的，并不需要再次向服务器发送请求。

如图1所示，一种APP页面模块化开发方法，其包括以下步骤：

S1、启动APP并初始化APP页面。用户在使用时，首先需要启动APP并初始化APP页面。

另外，为了增加用户体验，在启动打开APP页面时，首先初始化本地数据库，本地数据库中所存储的数据为从服务器所缓存下来的数据，这样可以通过访问本地数据库中已经缓存的数据来生成对应的页面。比如，在客户端未联网或网络延迟的情况下，可增加用户的体验。

S2、向服务器发送数据请求，该数据请求用于向服务器请求生成页面所需要的数据。另外，该数据请求包含了各种参数，比如该页面为首页页面，还是其他页面等参数。优选地，该数据请求为http请求，也即是用户初始化APP页面后，向服务器发送http请求来请求服务器上的数据。

S3、接收服务器返回的数据并解析，然后根据服务器返回数据的类型生成对应的模块化对象，并通过模块化对象对对应的数据进行封装。

本发明中服务器返回的数据通过采用json的格式对数据进行封装，然后返回到客户端，客户端对服务器返回的数据进行解析。

因为不同页面的数据是不同，比如上述提到的模块单元数据、用户数据、订单数据等等，其不同类型的数据所对应的模块化对象也不同，因此，首先根据服务器返回的数据的类型生成对应的模块化对象，然后在通过模块化对象对对应的数据进行封装。

S4、生成模块单元，并将模块化对象所封装的数据填充到对应的模块单元内。

比如创建视图工具RecycleView来实现模块化页面中的数据展示，然后通过通过RecyclerView.Adapter来对数据进行填充。例如文字类信息通过TextView进行显示，图片信息通过ImageView进行显示等。

S5、对模块单元进行组合生成页面视图并将页面视图呈现给用户。

由于将APP页面进行模块化，因此，当每个模块化均生成后，对其进行组合，然后生成最终的页面视图呈现给用户，从而完成页面视图的快速开发。

另外，对于服务器返回的数据其具有先后顺序，可通过数据中的一个字符来表示，这样，就可以对模块单元进行区分。

比如，根据模块单元的类型创建模块单元的视图，再由RecyclerView.Adapter对象交给视图组件RecyclerView绘制并且呈现给用户。

其中，RecyclerView是Android中的新控件，是一个强大的可滑动组件，与经典的控件ListView相比，其拥有回收复用的功能，复用的逻辑被封装，使用起来更加简单。

另外，本发明提供的开发方法不仅应用于金币联盟APP的首页开发，而且还可以在APP的任意页面进行开发，只要服务器返回的该页面的数据结构类型所对应的模块单元存在，就能够生成该模块单元并展示在相应的页面。

本发明还提供了一种电子设备，其至少包括存储器、处理器以及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现如下步骤：

初始化步骤：启动APP并初始化APP页面；

数据获取步骤：向服务器发送数据请求并接收服务器返回的数据，以及对服务器返回的数据进行解析；

数据封装步骤：根据服务器返回的数据的类型生成对应的模块化对象，并通过模块化对象对对应的数据进行封装；

数据填充步骤：生成模块单元，并将模块化对象所封装的数据填充到对应的模块单元内；

页面展示步骤：对模块单元进行组合生成页面视图并将页面视图展示给用户。

优选地，所述数据获取步骤之前还包括初始化本地数据步骤：初始化并加载本地数据句中的本地数据。

本发明还提供了一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现如前所述的APP页面模块化开发方法的步骤。

一种APP页面模块化开发装置，如图2所示，其包括：

初始化模块，用于启动APP并初始化APP页面；

数据获取模块，用于向服务器发送数据请求并接收服务器返回的数据，以及对服务器返回的数据进行解析；

数据封装模块，用于根据服务器返回的数据的类型生成对应的模块化对象，并通过模块化对象对对应的数据进行封装；

数据填充模块，用于生成模块单元，并将模块化对象所封装的数据填充到对应的模块单元内；

页面展示模块，用于对模块单元进行组合生成页面视图并将页面视图展示给用户。

上述实施方式仅为本发明的优选实施方式，不能以此来限定本发明保护的范围，本领域的技术人员在本发明的基础上所做的任何非实质性的变化及替换均属于本发明所要求保护的范围。

Claims (10)

1.一种APP页面模块化开发方法，其特征在于包括以下步骤：

初始化步骤：启动APP并初始化APP页面；

数据获取步骤：向服务器发送数据请求并接收服务器返回的数据，以及对服务器返回的数据进行解析；

数据封装步骤：根据服务器返回的数据的类型生成对应的模块化对象，并通过模块化对象对对应的数据进行封装；

数据填充步骤：生成模块单元，并将模块化对象所封装的数据填充到对应的模块单元内；

页面展示步骤：对模块单元进行组合生成页面视图并将页面视图展示给用户。

2.如权利要求1所述的方法，其特征在于：所述数据获取步骤之前还包括初始化本地数据步骤：初始化并加载本地数据库中的本地数据。

3.如权利要求1所述的方法，其特征在于：所述服务器返回的数据是通过json的方式对数据进行封装的。

4.如权利要求1所述的方法，其特征在于：所述数据请求为http请求。

5.一种电子设备，至少包括存储器、处理器以及存储在存储器上并可在处理器上运行的计算机程序，其特征在于：所述处理器执行所述程序时实现如下步骤：

初始化步骤：启动APP并初始化APP页面；

数据获取步骤：向服务器发送数据请求并接收服务器返回的数据，以及对服务器返回的数据进行解析；

数据封装步骤：根据服务器返回的数据的类型生成对应的模块化对象，并通过模块化对象对对应的数据进行封装；

数据填充步骤：生成模块单元，并将模块化对象所封装的数据填充到对应的模块单元内；

页面展示步骤：对模块单元进行组合生成页面视图并将页面视图展示给用户。

6.如权利要求5所述的电子设备，其特征在于：所述数据获取步骤之前还包括初始化本地数据步骤：初始化并加载本地数据库中的本地数据。

7.如权利要求5所述的电子设备，其特征在于：所述服务器返回的数据是通过json的方式对数据进行封装的。

8.如权利要求5所述的电子设备，其特征在于：所述数据请求为http请求。

9.一种计算机可读存储介质，其上存储有计算机程序，其特征在于：所述计算程序被处理器执行时实现如权利要求1-4任意一项所述的APP页面模块化开发方法的步骤。

10.一种APP页面模块化开发装置，其特征在于包括：

初始化模块，用于启动APP并初始化APP页面；

数据获取模块，用于向服务器发送数据请求并接收服务器返回的数据，以及对服务器返回的数据进行解析；

数据封装模块，用于根据服务器返回的数据的类型生成对应的模块化对象，并通过模块化对象对对应的数据进行封装；

数据填充模块，用于生成模块单元，并将模块化对象所封装的数据填充到对应的模块单元内；

页面展示模块，用于对模块单元进行组合生成页面视图并将页面视图展示给用户。