一种基于移动电商APP的智能全景展示系统及其实现方法与流程

本发明涉及信息技术领域，特别涉及一种基于移动电商app的全景商品展示系统和方法。

背景技术：

移动电商app全景展示系统是在传统的平面图片展示基础上发展起来的一项面向电商app用户展示商品的技术手段，主要包括全景图片展示处理、手机重力感应获取技术、html5交互技术等。移动电商app全景展示系统具有行业通用性，不仅为电商企业提供了商品全方位展示的效果，还为海量用户提供了快捷有效的可以全面了解商品信息的方法。

目前基于平面图片展示商品信息的电商平台很多，但是能够将全景展示商品信息在移动端app上，并能够在不发布新版本的情况下快速更新迭代的方式，却是行业的瓶颈。因为平面图片的堆砌，无法给用户直观的视觉感受，只是被动的去接受平面图片里面的商品信息，并且由于app的开发特性，每次修改商品展示内容都需要重新发版本，无法适应电商的快节奏发展，所以开发适用于移动电商的智能全景展示系统一直是行业里面的急切需求。

有鉴于此，本发明提供了一种基于移动电商app特性的智能全景系统及其实现方法。采用本发明的智能全景系统，可以更全面的向用户展示商品信息，并且能够在不发布新版本的情况下实现快速发布。

技术实现要素：

本发明涉及一种基于移动电商app的智能全景展示系统及其实现方法。

一种基于移动电商app的智能全景展示系统，其特征在于，包括至少一个全景图片展示和服务器。其中，所述的全景图片展示的特征在于包含数据库模块、全景图片管理模块、app商品详情图片展示模块。所述的数据库用于存储图片相关的信息，所述的全景图片管理模块用于管理商品的全景图片，所述的app商品详情图片展示模块用于将商品全景图片通过各种方式展示给用户。

进一步的，所述的数据库用于存储图片相关的信息。具体的，图片的数据库是在数据库里新增字段，用于保护图片相关信息，具体保护的信息为：图片的url地址，所述商品的id，以及排序。

进一步的，所述的全景图片管理模块的作用在于对商品的全景图片进行管理，包括添加、修改、删除、以及对于上传的全景图片自动处理为适合各种手机屏幕大小的尺寸的功能。

所述的添加图片的具体功能的实现方式为在管理后台上传图片，上传成功后将图片文件存放至文件服务器中，同时将生成的图片url等字段信息插入数据库对应字段。

所述的修改图片的具体功能的实现方式为在管理后台重新上传一张图片，上传成功后将图片文件存放至文件服务器，并更新数据库中的对应的存放图片url信息等字段的内容。

所述的删除图片的具体功能的实现方式为在管理后台根据商品id，查找数据库里面对应的字段，将其内容删除，同时将文件服务器中保存的对应的图片文件也删除。

所述的将上传的全景图片自动处理为适合各种手机屏幕大小的尺寸的功能的实现方法为：计算上传后的图片尺寸与管理后台设定好的宽和高，如果上传后的图片尺寸大于管理后台设定好的宽和高，则以图片中心为基准，大于设定好的宽和高的部分，代码会自动将其去掉。如果上传后的图片尺寸小于等于管理后台设定好的宽和高，则代码自动将图片拉伸到设定好的尺寸。

进一步的，所述的app商品详情图片展示模块的作用在于打开商品全景图片后，用户可以通过用手指点触滑动来控制图片360度的旋转展示，也可以利用晃动手机，调整手机的摇摆角度来控制图片360度的旋转展示。

所述的app商品详情图片展示模块多角度展示的方法为：用户晃动手机，调整手机角度，此时app中的代码会调用手机陀螺仪硬件提供的api来获取用户所调整的角度，然后根据此角度，来调整图片的展示角度。

进一步的，所述的服务器中含有html。优选的，html为html5。所述的html5交互的作用在于将商品全景图片嵌入利用html5做成的商品详情页中，然后将用户点触控制或者调整手机的摇摆角度等动作传递给html5中的全景图片来完成全景图片的展示。

进一步的，用户调整手机的摇摆角度等动作是通过手机硬件(陀螺仪)提供的系统api来获取，并将获取的信息传递给html5，因为html5本身不具备获取手机硬件提供的系统api的能力。

由于html5在服务器中，所以只需要更新服务器文件即可实现智能全景系统的更新，而app无需重新发布新版本就能随时获取到最新的商品全景展示图片以及更好的视觉体验效果。

一种基于移动电商app的智能全景展示系统的实现方法的特征在于包含如下步骤：

s1，商品全景图片上传至服务器。

s2，用户打开app，然后打开商品详情。

s3，用户点击全景图片调整角度查看商品或者晃动手机自动调整全

景图片角度查看商品。

s4，如需更新全景图片等信息以及布局样式等，在管理系统更改即

可，app无需发布新版

附图说明

图1为移动电商app的智能全景展示系统的结构示意图。

图2为移动电商app的智能全景展示系统的实现方法的步骤。

以下将结合附图对本发明的构思、具体结构及产生的技术效果作进一步说明，以充分地了解本发明的目的、特征和效果。

具体实施案例：

如图1所示，为本发明的移动电商app的智能全景展示系统的结构示意图。

一种基于移动电商app的智能全景展示系统，其特征在于，包括至少一个全景图片展示和服务器。其中，所述的全景图片展示的特征在于包含数据库模块、全景图片管理模块、app商品详情图片展示模块。所述的数据库用于存储图片相关的信息，所述的全景图片管理模块用于管理商品的全景图片，所述的app商品详情图片展示模块用于将商品全景图片通过各种方式展示给用户。

进一步的，所述的数据库用于存储图片相关的信息。具体的，图片的数据库是在数据库里新增字段，用于保护图片相关信息，具体保护的信息为：图片的url地址，所述商品的id，以及排序。

进一步的，所述的全景图片管理模块的作用在于对商品的全景图片进行管理，包括添加、修改、删除、以及对于上传的全景图片自动处理为适合各种手机屏幕大小的尺寸的功能。

所述的添加图片的具体功能的实现方式为在管理后台上传图片，上传成功后将图片文件存放至文件服务器中，同时将生成的图片url等字段信息插入数据库对应字段。

所述的修改图片的具体功能的实现方式为在管理后台重新上传一张图片，上传成功后将图片文件存放至文件服务器，并更新数据库中的对应的存放图片url信息等字段的内容。

所述的删除图片的具体功能的实现方式为在管理后台根据商品id，查找数据库里面对应的字段，将其内容删除，同时将文件服务器中保存的对应的图片文件也删除。

所述的将上传的全景图片自动处理为适合各种手机屏幕大小的尺寸的功能的实现方法为：计算上传后的图片尺寸与管理后台设定好的宽和高，如果上传后的图片尺寸大于管理后台设定好的宽和高，则以图片中心为基准，大于设定好的宽和高的部分，代码会自动将其去掉。如果上传后的图片尺寸小于等于管理后台设定好的宽和高，则代码自动将图片拉伸到设定好的尺寸。

进一步的，所述的app商品详情图片展示模块的作用在于打开商品全景图片后，用户可以通过用手指点触滑动来控制图片360度的旋转展示，也可以利用晃动手机，调整手机的摇摆角度来控制图片360度的旋转展示。

所述的app商品详情图片展示模块多角度展示的方法为：用户晃动手机，调整手机角度，此时app中的代码会调用手机陀螺仪硬件提供的api来获取用户所调整的角度，然后根据此角度，来调整图片的展示角度。

进一步的，所述的服务器中含有html。优选的，html为html5。所述的html5交互的作用在于将商品全景图片嵌入利用html5做成的商品详情页中，然后将用户点触控制或者调整手机的摇摆角度等动作传递给html5中的全景图片来完成全景图片的展示。

进一步的，用户调整手机的摇摆角度等动作是通过手机硬件(陀螺仪)提供的系统api来获取，并将获取的信息传递给html5，因为html5本身不具备获取手机硬件提供的系统api的能力。

由于html5在服务器中，所以只需要更新服务器文件即可实现智能全景系统的更新，而app无需重新发布新版本就能随时获取到最新的商品全景展示图片以及更好的视觉体验效果。

一种基于移动电商app的智能全景展示系统的实现方法的特征在于包含如下步骤：

s1，商品全景图片上传至服务器。

s2，用户打开app，然后打开商品详情。

s3，用户点击全景图片调整角度查看商品或者晃动手机自动调整全景图片角度查看商品。

s4，如需更新全景图片等信息以及布局样式等，在管理系统更改即可，app无需发布新版。

以上所述实施例，其描述较为具体和详细，但并不能因此而理解为对本发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干变形和改进，这些都属于本发明的保护范围。因此，本发明专利的保护范围应以所附权利要求为准。