基于HTML5的Web App的购物网站设计分析

第39卷 第4期

数字技术与应用

第 39 卷 数字技术与应用

2021年 4月

Digital Technology &Application

Vol.39 No.4

April 2021

设计开发

DOI:10.19695/12-1369.2021.04.56

基于HTML5的Web App的购物网站设计分析

曹艳琴

(武汉晴川学院计算机学院,湖北武汉 430000)

摘要:购物网站开放平台的使用率持续上升,人们对购物网站的关注度大大增加。特别是,不是单纯化的购物网站,而是对

与现实世界相似的固定密度购物网站的关注度大幅增加。因此,本文提出了利用HTML 5/WebGL的下一代网络标准技术的新

购物网站开放平台的设计和实现方法,不使用插件,而是以快速的性能服务购物网站。基于HTML 5/WebGL的下一代购物网站

开放平台可以在Windows、Linux、Mac等不同操作系统和IE、Chrome、Firefox、Safari等跨浏览器和移动平台上进行操作。

关键词:HTML5；Web App；购物网站；设计分析

中图分类号:TP31文献标识码:A文章编号:1007-9416(2021)04-0170-03

0 引言

为了满足购物网站的需求,企业开发了多种购物网站

平台,提供服务。但是,大部分购物网站开放平台为了提

供快速的渲染性能,在安装过程中存在困难、无法支持跨

平台、保安弱化等许多问题,不得不使用插件模块。再加

上,最近在网络浏览器上宣布中断支持插件模块动作的

NPAPI服务,导致基于现有插件的购物网站开放平台的操

作出现了大问题。

的限制,网络上的安全变得脆弱的问题。再加上最近在谷

歌等网络浏览器上,宣布中断对支持Plug-in动作的

NPAPI(Netscape Plug-in Application Programing Interface)

的支援,以Plug-in模块为基础操作的现有的第三次远程

购物服务将出现大问题。因此,本研究首先针对以Plug-in

为基础操作,以Plug-in方式,提出能够有效提供下一代购

物平台的设计和实施方法。具体适用于HTML 5/WebGL

的下一代网络标准技术,可以在Windows、Linux、Mac等多

种跨操作系统和IE、Chrome、Firefox、Safari等多种浏览器

环境中提供购物服务,如图1所示

[1]

。

1 HTML5的Web App的购物网站重要性

自2005年Google Map服务启动以来,随着GeoWeb服

务在全球范围内的扩散,购物网站的应用急剧增加。但

是,到目前为止开发的大部分服务系统都是以Desktop为

基础的应用软件操作,或者在网络上操作时,需要另外设

置Plug-in模块,采用下一代网络标准HTML 5/WebGL技

术时,在多个固定的信息处理中具有性能上的界限。特别

是,使用Plug-in方式的情况是,Plug-in安装时频繁发生

错误的问题,不能支持cross Web浏览器和cross运营体制

2 基于HTML5的Web App的购物网站设计分析

2.1 基于WebGL的购物平台要求事项

采用HTML 5/WebGL技术,将当前提供的多种类型

的购物在跨平台/跨浏览器环境中进行综合管理和呈现

的下一代购物以开放平台的设计和实现为目的。综上所

述,不使用Plug-in模块,包括服务器所拥有的POI(Point

Of Interest)、室内购物,目的是通过Open API融合用户所

图1 开发流程

Fig.1 Development Process

收稿日期:2021-03-01

作者简介:曹艳琴(1981—),女,湖北襄阳人,硕士,副教授,研究方向:计算机专业网络。

170

曹艳琴:基于HTML5的Web App的购物网站设计分析

2021年第 4 期

拥有的多种空间内容,进行服务的系统设计和实现。在本

研究中,针对基于WebGL的购物平台设计,提出用户和系

统要求事项、核心组件配置以及包含在各个组件中的渲

染相关的主要类的图表。购物平台是为了提供高水平的

服务,对3DS形式的室内购物进行下载,并将这些信息整

合起来进行渲染。另外,通过Mash Up,定义了能够融合

用户提供的SHP、KML、GPX等向量形式和PNG、JPG等图

像形式的空间内容。最后,画面上由用户产生的放大、缩

小、移动、选择等多种导航定义处理风险。为了弥补

WebGL缓慢的渲染速度问题,将提供信息的等级与现有

的相同,设定在等级15以上

[2]

。

2.2 数据显示模块设计

POI信息也考虑到性能效率性,与三维地形及建筑物

只是,增加了LayerInformationPOI、POIParser、POIRender

POI信息分层。利用这些类的POI信息渲染的序列图,在用

户2D向量客体显示模块设计,除了在服务器上提供的各

种三维购物之外,还应提供用户所拥有的多种形式的二

维客体在网络上融合表现的功能,以支持SHP、KML、GPX

形式的二维客体的融合渲染，如图2所示。

从构成来看,主要等级大致由SHP、KML、GPX数据的

储存管理的Content Class和为了破解的Parser类构成。可

知渲染序列简单地由二维客体模型生成、数据请求、拼接

和WebGL渲染顺序构成。在这里,信息通过与数据的线性

信息进行整合后,会进行渲染,因此存在需要很多时间的

问题。因此,为了支持大容量第二次远程购物的快速渲

染,提出的平台在进行渲染时,以模型为基准,在5以下,

10以下,以11以上的3个阶段为基准,设计一个系统,使精

密度逐渐降低的用户向量信息进行渲染。也就是说,根据

三种LOD标准,分别划分为具有不同精密度的三个,提前

进行存储管理,在进行实际渲染时,可以选择不同的精密

度数据。利用HTML 5/WebGL技术实现,通过Windows、

Unix、Linux、Mac等跨操作系统的环境和IE、Chrome、

Firefox、Safari等跨浏览器环境和Android、iOS等移动环境

中也有可以使用的优点。这样的下一代跨平台可以改善

只有Windows环境的Plug-in模块才能操作的现有购物平

台的缺点。同时,通过对购物平台的Open API的追加开发

和多样的示范运营,验证是否可以用作平台服务。购物平

台可以支持的多种购物和收集方式(类型图、档案、网络)、

渲染和网络服务的开放平台的引擎部分,以及概念上可

以在跨操作系统和浏览器中操作。正在进行渲染,平台展

示了以3DS形式构成的地铁历史的个别渲染示例。POI数

据渲染模块体现在V世界,POI数据也被存储为多等级的

染功能

[3]

。附加提出的平台可以通过POI层管理,用户选择

的更新预制。除此之外,还实现了多种用户活动处理的模

块。最后,平台采用HTML 5/WebGL技术,实现了DDS、

JPG、BIL、XDO、3DS、Shape、KML、GPX等多种形式的信息

的融合渲染模块,以No Plug-in方式,跨浏览器和跨操作

系统购物服务具有可能的优势。特别是,更容易地整合目

渲染方式相同,构成了类似的基于扇区进行管理的类图。瓷砖集合结构,所提出的平台体现了这种POI数据整合渲

的等级,以处理POI信息分层管理、POI信息存储和管理、性地设置POI层的激活和非活动。用户所拥有的KML数据

图3 用户页面

Fig.3 User page

图2 代码生成

Fig.2 Code generation

171

第 39 卷 数字技术与应用

前不同的数据形式和储存结构构成的信息的渲染功能,

实现了渲染模块,预计以后实现Seamless的综合购物服

务，如图3所示

[4]

。

2.3 上下文感知

互联网上充斥着各种各样的信息,包括即时新闻、音

乐、广告等,然而,用户会被一下子呈现在网页上的太多

信息所淹没。本文提出了一个上下文感知的移动网页浏

览系统,以减少用户分心,最终提高用户体验

[5]

。首先,我

们通过嵌入在手机中的传感器捕捉用户上下文,例如时

间和位置信息。第二,我们推荐相关信息,并根据用户配

置文件和当前上下文调整网页。我们利用HTML5实现了

一个上下文感知的web信息访问原型。通过结合上下文信

息来分析用户反馈后,做出用户喜好预测,将可能受喜爱

的信息或实体推荐给用户。使用推荐系统一方面帮助用

户快速找到商品,改善了用户购物体验同时提升了用户

忠诚度;另一方面也提高了卖家的交叉销售能力和成交

转化率。第一,针对智能购物中心的应用场景,抽取购物

记录等隐式用户反馈,并将其映射为用户喜好,在应用传

统相似度算法的基础之上,提高了推荐准确率。第二,通

[6]

发生的安装错误问题,为了解决跨浏览器/操作系统支持

不可能的问题,以及安全侵害问题等,提出了以下一代网

络标准备受瞩目的基于HTML 5/WebGL的下一代购物

平台软件的设计和实施事项。特别是,体现了目前使用的

多种形式的实际购物的融合渲染功能,在实验室水平上

可以确认,以现有插件为基础的服务可以以网络标准代

替,提出购物平台的渲染相关的多种功能测试。

参考文献

[1] 周宇轩,朱科旭,杨知涵,等.基于HTML5的"慢游"旅游Web App

设计与实现[J].电脑与信息技术,2020,28(2):47-50.

[2] 王亚东.对基于HTML5的移动Web App开发分析[J].数字化用

户,2018,24(2):95.

[3] 郭梦玲,王艳辉,刘畅,等.浅谈基于HTML5的Web前端APP开发

[J].电脑迷,2017(9):34.

[4] 施明毅,宋岚,李卓阳,等.基于HTML5下的Web App党校课程信

息化平台建设[J].教育现代化,2018,5(35):149-150+202.

[5] 陈珍英.基于轻应用平台和HTML5的Web APP游戏开发的探讨

[J].数字技术与应用,2019,37(6):174+176.

[6] 曾婷,凌财进.基于HTML5的计算机一级考试模拟 Web APP的

设计与实现[J].办公自动化,2019,24(15):60-62.

[7] 陈忠彬.水文遥测站维护“指南者”:基于HTML5的Web APP

设计与实现[C].//广西水利学会.广西水利学会2015学术年会暨水

文水资源学术研讨会论文集,2016.

过使用人口统计学特征与决策树算法,系统能够较好地

处理历史记录较少或缺失的用户喜好提取问题。

[7]

3 结语

在本文中,以现有的插件方式操作的购物平台服务中

Design and Analysis of Shopping Website Based on HTML5 Web App

CAO Yan-qin

(School of Computer, Wuhan Qingchuan University, Wuhan Hubei 430000)

Abstract:The utilization rate of the open platform of shopping websites continues to rise, and people's attention to shopping

websites has greatly increased. In particular, it is not a simplistic shopping site, but a fixed-density shopping site that is similar to the

real world, and the attention has been greatly increased. Therefore, this article proposes the design and implementation method of a

new shopping website open platform using HTML 5/WebGL's next-generation network standard technology. It does not use

plug-ins, but serves the shopping website with fast performance. The next-generation shopping website open platform based on

HTML 5/WebGL can be operated on different operating systems such as Windows, Linux, Mac, and cross-browser and mobile

platforms such as IE, Chrome, Firefox, and Safari.

Key words:HTML5; Web APP; Shopping website; Design analysis

172