基于移动终端的“一键平安”小程序功能模块化的前端架构及实现方法技术

本发明专利技术公开了一种基于移动终端的“一键平安”小程序功能模块化的前端架构及实现方法，架构包括获取模块、展示模块、跳转模块、显示模块、判断模块、定制模块、触发模块、照片模块、选择模块、定位模块、一键模块和预览模块，根据预设的“一键平安”功能模块化的界面设计，对每个页面元素进行组合模块研究和处理；给出了“一键平安”模块关联设计流程和模块化跳转功能设计流程；提出了整体组合设计算法和分步组合设计算法，用来解决模块化组合图片预览的设计与最终在短信平台与微信平台上的一键发送。本发明专利技术突破微信小程序原有的版面格式比较单一、支持样式较少的局限，创新实现“一键平安”功能模块化界面的前端设计与相应功能的页面操作。

【技术实现步骤摘要】
基于移动终端的“一键平安”小程序功能模块化的前端架构及实现方法
本专利技术属于微信小程序的
，涉及一种基于移动终端的“一键平安”小程序功能模块化的前端架构及实现方法。
技术介绍
新一代的移动互联应用发展的主要方向是“微、小、轻”，腾讯公司在2017年初发布了在微信生态圈内的轻应用框架——微信小程序。微信小程序不同于微信公众号或者微信订阅号，它是一种可以直接使用的微应用。在安装下载方面突破原有APP的需要下载才能使用的局限性，微信小程序并不需要下载安装，在某种意义上讲小程序就相当于另一个APPStore。在新互联网时代的背景下，我们通过对微信小程序的界面实现技术(WXML+WXSS+JavaScript)的实现，对一键平安小程序的前端界进行模块化定义与设计，使得微信一键平安小程序在功能模块化界面中突破微信小程序原有的版面格式比较单一、支持样式较少的局限，实现一键平安地图模块化界面功能的设计。微信小程序实际上是基于XML、CSS和JavaScript的技术框架，提供相对开发者来说较为封闭的WXML、WXSS和JavaScript。不支持dom、window、jQuery等第三方JavaScript框架，与HTML5有在开发过程中具有较大差异。微信小程序只支持通过https协议调用微信API(如wx.request或wx.connectSocket)进行网络通信，其架构为Client/Server，是类似DCloud的流应用。与以轻应用为主的百度相比较，微信小程序的代码随用随下载，不仅仅在执行效率和用户体验具有较大的提升，而且可以更快地适应复杂恶劣的网络环境。而前者的代码需完整缓存到本地才能发挥功用，相对于微信小程序来说效率大大降低。现有技术中有设计并实现了基于微信小程序的互联网+教育学习平台，但是现有平台具有各功能模块化界面中突破微信小程序原有的版面格式比较单一、支持样式较少的局限。
技术实现思路
本专利技术的主要目的在于克服现有技术的缺点与不足，提供基于移动终端的“一键平安”小程序功能模块化的前端架构，使得在微信一键平安小程序中加载的功能选项以及用户想要转载的地图模块化界面等均能够按照既定的模块化显示策略进行模块化显示。本专利技术的另一目的在于，提供一种上述基于移动终端的“一键平安”小程序功能模块化的前端架构的实现方法。为了达到上述第一目的，本专利技术采用以下技术方案：本专利技术基于移动终端的“一键平安”小程序功能模块化的前端架构，包括获取模块、展示模块、跳转模块、显示模块、判断模块、定制模块、触发模块、照片模块、选择模块、定位模块、一键模块和预览模块；所述获取模块，用于获取“一键平安”小程序的展示页面的页面元素；所述展示模块，用于当用户对“一键平安”小程序某一界面选择满足要求后，进行下一模块界面的元素获取提示，并在完成提示后对进入元素的展示页面进行相关展示；所述跳转模块，用于根据预设的“一键平安”模块化功能展示界面的设计，对页面元素进行相互跳转的模块化处理；所述显示模块，用于对“一键平安”小程序在显示各功能模块设计的界面中展示；所述判断模块，用于对“一键平安”小程序某一模块选择进行判断，判断用户是否已经选择该模块内容；所述定制模块，用于用户在“一键平安”小程序功能展示页面，进行个性化的功能模块定制选择和搭配；所述触发模块，用于对“一键平安”小程序的使用者进行触发模块的功能页面设计；所述照片模块，用于用户使用“一键平安”小程序的功能界面展示平台进行个人拍照和图库选择的功能页面设计；所述选择模块，用于在“一键平安”小程序的功能界面展示平台上随意选择各个功能键的功能页面设计；所述定位模块，用于根据用户实时的GPS定位信息，反馈给用户一个基于中国地图所在省份的定位信息实时反馈界面模块；所述一键模块包括“一键平安”按扭和“微信一键”按扭，所述“一键平安”按扭把个人信息和实时定位地图发送到接收者的短信平台，所述微信一键”按扭，用于把个人头像、背景图、发送地址、所在省份的地图定位、表情和轮廓的全部组合或部分组合发送到接收者的微信平台；所述预览模块，用于为用户的多个功能选择及跳转功能模块的实现而进行的组合图片展示。作为优选的技术方案，所述获取模块中，通过下述方式实现：①通过某个微信朋友发送来的“一键平安”问候进行获取；②通过某个朋友群组中转发的“一键平安”小程序进行获取；③通过朋友圈中发布的“一键平安”小程序进行获取；④通过在微信小程序中搜索“一键平安”进行获取。作为优选的技术方案，所述“一键平安”跳转模块包括关联模块和迁移模块；所述关联模块，用于在“一键平安”获取模块中的展示页面元素，展示主界面居中布局的navbar模块化展示图标，点击不同功能模块化的图标可互相转换进入，形成关联模块；所述迁移模块，用于根据“一键平安”小程序功能模块化界面用户选择进行判断，并根据用于判断的结果进行功能模块化迁移。作为优选的技术方案，所述显示模块包括问候语显示模块、背景图片显示模块、地图显示模块、照片展示模块、表情展示模块、“微信一键”功能展示模块、“发送预览”展示模块等的功能窗口显示模块。作为优选的技术方案，所述判断模块中，用于判断用户是否直接选择“一键平安”按钮，如果没有选择任何功能界面，将随机产生定制“一键平安”的发送界面，可以一键发送出平安卡片。为了达到上述第二目的，本专利技术采用以下技术方案：基于移动终端的“一键平安”小程序功能模块化的前端架构的实现方法，包括下述步骤：用户通过移动端获取“一键平安”微信小程序的主界面，主界面是通过对“一键平安”微信小程序wxml和wxss的代码进行页面布局和设计的；在使用“一键平安”微信小程序过程中，如果前端系统检测到用户正在进行跳转模块选择内容时，则对跳转的功能选择进行相互关联，具体为：对同一个主界面下的分类功能navbar的实现，其中对选中功能键的图形进行选择颜色的变化，增强用户的交互界面的动态体验；根据每个模块化的功能，即获取模块、展示模块、跳转模块、显示模块、判断模块、定制模块、触发模块、照片模块、选择模块、定位模块、一键模块和预览模块等，在每个功能对应的位置进行模块化功能的显示，在整体布局中根据微信小程序wxml中<view>的模块化框架来设计的；在详细模块界面中，分别对5个界面：选择问候、选择背景、选择位置、选择拍照、选择表情进行不同风格的小程序片段设计，具体如下：(a)“选择问候”小程序片段，在选择问候模块中进行输入栏<input>的设置，给用户自定义选择问候语的功能，同时在输入栏下方设计分主题模块界面的单项选择框内进行问候语页面的设计；(b)“选择背景”小程序片段，在选择背景图模块界面中，采用微信小程序radio组件和JavaScript逻辑层的重构设计，突破微信小程序radio单选文本的局限性，针对背景图进行单项选择栏的设置；(c)“选择位置”小程序片段，在获取位置模块中，通过微信小程序中的map模块，对用户当前所在位置进行GPS获取，获取用户的longitude和latitude，并在地图中进行标记，然后给用户进行信息反馈，同时将位置信息进行深度加工，将位置进行文字信息的预处理，在最后的预览界面进行文字反馈界面的实现；(d)本文档来自技高网...

【技术保护点】
1.基于移动终端的“一键平安”小程序功能模块化的前端架构，其特征在于，包括获取模块、展示模块、跳转模块、显示模块、判断模块、定制模块、触发模块、照片模块、选择模块、定位模块、一键模块和预览模块；所述获取模块，用于获取“一键平安”小程序的展示页面的页面元素；所述展示模块，用于当用户对“一键平安”小程序某一界面选择满足要求后，进行下一模块界面的元素获取提示，并在完成提示后对进入元素的展示页面进行相关展示；所述跳转模块，用于根据预设的“一键平安”模块化功能展示界面的设计，对页面元素进行相互跳转的模块化处理；所述显示模块，用于对“一键平安”小程序在显示各功能模块设计的界面展示；所述判断模块，用于对“一键平安”小程序某一模块选择进行判断，判断用户是否已经选择该模块内容；所述定制模块，用于用户在“一键平安”小程序功能展示页面，进行个性化的功能模块定制选择和搭配；所述触发模块，用于对“一键平安”小程序的使用者进行触发模块的功能页面设计；所述照片模块，用于用户使用“一键平安”小程序的功能界面展示平台进行个人拍照和图库选择的功能页面设计；所述选择模块，用于在“一键平安”小程序的功能界面展示平台上随意选择各个功能键的功能页面设计；所述定位模块，用于根据用户实时的GPS定位信息，反馈给用户一个基于中国地图所在省份的定位信息实时反馈界面模块；所述一键模块，包括“一键平安”按扭和“微信一键”按扭，所述“一键平安”按扭把个人信息和实时定位地图发送到接收者的短信平台；所述微信一键”按扭，用于把个人头像、背景图、发送地址、所在省份的地图定位、表情和轮廓的全部组合或部分组合发送到接收者的微信平台；所述预览模块，用于为用户的多个功能选择及跳转功能模块的实现而进行的组合图片展示。...

【技术特征摘要】
1.基于移动终端的“一键平安”小程序功能模块化的前端架构，其特征在于，包括获取模块、展示模块、跳转模块、显示模块、判断模块、定制模块、触发模块、照片模块、选择模块、定位模块、一键模块和预览模块；所述获取模块，用于获取“一键平安”小程序的展示页面的页面元素；所述展示模块，用于当用户对“一键平安”小程序某一界面选择满足要求后，进行下一模块界面的元素获取提示，并在完成提示后对进入元素的展示页面进行相关展示；所述跳转模块，用于根据预设的“一键平安”模块化功能展示界面的设计，对页面元素进行相互跳转的模块化处理；所述显示模块，用于对“一键平安”小程序在显示各功能模块设计的界面展示；所述判断模块，用于对“一键平安”小程序某一模块选择进行判断，判断用户是否已经选择该模块内容；所述定制模块，用于用户在“一键平安”小程序功能展示页面，进行个性化的功能模块定制选择和搭配；所述触发模块，用于对“一键平安”小程序的使用者进行触发模块的功能页面设计；所述照片模块，用于用户使用“一键平安”小程序的功能界面展示平台进行个人拍照和图库选择的功能页面设计；所述选择模块，用于在“一键平安”小程序的功能界面展示平台上随意选择各个功能键的功能页面设计；所述定位模块，用于根据用户实时的GPS定位信息，反馈给用户一个基于中国地图所在省份的定位信息实时反馈界面模块；所述一键模块，包括“一键平安”按扭和“微信一键”按扭，所述“一键平安”按扭把个人信息和实时定位地图发送到接收者的短信平台；所述微信一键”按扭，用于把个人头像、背景图、发送地址、所在省份的地图定位、表情和轮廓的全部组合或部分组合发送到接收者的微信平台；所述预览模块，用于为用户的多个功能选择及跳转功能模块的实现而进行的组合图片展示。2.根据权利要求1所述基于移动终端的“一键平安”小程序功能模块化的前端架构，其特征在于，所述获取模块中，通过下述方式实现：①通过某个微信朋友发送来的“一键平安”问候进行获取；②通过某个朋友群组中转发的“一键平安”小程序进行获取；③通过朋友圈中发布的“一键平安”小程序进行获取；④通过在微信小程序中搜索“一键平安”进行获取。3.根据权利要求1所述基于移动终端的“一键平安”小程序功能模块化的前端架构，其特征在于，所述“一键平安”跳转模块包括关联模块和迁移模块；所述关联模块，用于在“一键平安”获取模块中的展示页面元素，展示主界面居中布局的navbar模块化展示图标，点击不同功能模块化的图标可互相转换进入，形成关联模块；所述迁移模块，用于根据“一键平安”小程序功能模块化界面用户选择进行判断，并根据用于判断的结果进行功能模块化迁移。4.根据权利要求1所述基于移动终端的“一键平安”小程序功能模块化的前端架构，其特征在于，所述显示模块包括问候语显示模块、背景图片显示模块、地图显示模块、照片展示模块、表情展示模块、“微信一键”功能展示模块、“发送预览”展示模块等的功能窗口显示模块。5.根据权利要求1所述基于移动终端的“一键平安”小程序功能模块化的前端架构，其特征在于，所述判断模块中，用于判断用户是否直接选择“一键平安”按钮，如果没有选择任何功能界面，将随机产生定制“一键平安”的发送界面，可以一键发送出平安卡片。6.根据权利要求1-5中任一项所述基于移动终端的“一键平安”小程序功能模块化的前端架构的实现方法，其特征在于，包括下述步骤：用户通过移动终端获取“一键平安”微信小程序的主界面，主界面是通过对“一键平安”微信小程序wxml和wxss的代码进行页面布局和设计的；在使用“一键平安”微信小程序过程中，如果前端系统检测到用户正在进行跳转模块选择内容时，则对跳转的功能选择进行相互关联，具体为：对同一个主界面下的分类功能navbar的实现，其中对选中功能键的图形进行选择颜色的变化，增强用户的交互界面的动态体验；根据每个模块化的功能，即获取模块、展示模块、跳转模块、显示模块、判断模块、定制模块、触发模块、照片模块、选择模块、定位模块、一键模块和预览模块等，在每个功能对应的位置进行模块化功能的显示，在整体布局中根据微信小程序wxml中<view>的模块化框架来设计；在详细模块界面中，分别对5个界面：选择问候、选择背景、选择位置、选择拍照、选择表情进行不同风格的小程序片段设计，具体如下：(a)“选择问候”小程序片段，在选择问候模块中进行输入栏<input>的设置，给用户自定义选择问候语的功能，同时在输入栏下方设计分主题模块界面的单项选择框内进行问候语页面的设计；(b)“选择背景”小程序片段，在选择背景图模块界面中，采用微信小程序radio组件和JavaScript逻辑层的重构设计，突破微信小程序radio单选文本的局限性，针对背景图进行单项选择栏的设置；(c)“...

【专利技术属性】
技术研发人员：庞素琳，许智超，侯鲜艳，游鸽，
申请(专利权)人：广东巴拿赫大数据科技有限公司，
类型：发明
国别省市：广东,44