CN110737858A - 一种跨平台页面显示方法 - Google Patents

一种跨平台页面显示方法 Download PDF

Info

Publication number
CN110737858A
CN110737858A CN201910971980.2A CN201910971980A CN110737858A CN 110737858 A CN110737858 A CN 110737858A CN 201910971980 A CN201910971980 A CN 201910971980A CN 110737858 A CN110737858 A CN 110737858A
Authority
CN
China
Prior art keywords
page
platform
client
cross
box
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN201910971980.2A
Other languages
English (en)
Inventor
王秀艳
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Unicloud Technology Co Ltd
Original Assignee
Unicloud Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Unicloud Technology Co Ltd filed Critical Unicloud Technology Co Ltd
Priority to CN201910971980.2A priority Critical patent/CN110737858A/zh
Publication of CN110737858A publication Critical patent/CN110737858A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/957—Browsing optimisation, e.g. caching or content distillation
    • G06F16/9574—Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Software Systems (AREA)
  • Data Mining & Analysis (AREA)
  • Human Computer Interaction (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

本发明提供了一种跨平台页面显示方法，包括：S1、用户访问页面时，通过公共方法库向客户端提供方法，客户端通过浏览器对象判断平台类型；S2、当客户端判断平台类型不是移动端页面时向用户显示web端视图；S3、当客户端判断平台类型是移动端页面时向用户显示移动端视图；S4、通过公共方法库向客户端提供方法，根据用于操作弹出提示框或作出不同反应；S5、当客户端判断平台类型不是移动端页面时调用web端弹框或做出适合web端的反应。本发明所述的一种跨平台页面显示方法支持复杂页面的跨平台，在页面中调取统一的公共方法，逻辑清晰、易维护、节省开发成本，同时可实现快速开发降低开发难度。

Description

一种跨平台页面显示方法
技术领域
本发明属于页面显示领域，尤其是涉及一种跨平台页面显示方法。
背景技术
随着科技的进步和网络的发展，人们使用手机、pad、电脑浏览网页的现象越来越多，而客户端适配可以提供友好的用户体验，是在网站开发中不可忽视的一项技术。目前可以解决页面跨平台显示的技术方案主要有两个，响应式和路由跳转。
响应式即设计的页面会根据用户的行为以及设备的环境(***平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整，但是这种方案比较有局限性，只能适应一些简单的网站，比如商城类型的网站就不适合了，内容太多，太复杂。对于响应式的页面，很多人都以为是一种网站跨平台的解决方案。但是对于绝大部分的网站来说，其实就是一种排版技巧。而目前的前端开发中，为了实现快速开发，会用到实用的前端框架，但是这些框架基本不支持跨平台，所以实现响应式要避开这些框架，大大增加了开发成本。
页面跳转，即web端、移动端分别开发一套页面，每一套代码都只适配对应平台，发布到两个站点，在访问页面的时候根据设备进行路由跳转，而这种方案开发成本高，尽管页面逻辑类似，还是需要分别开发一套，维护也很困难。
发明内容
有鉴于此，本发明旨在提出一种跨平台页面显示方法，开发了这个跨平台页面显示方法，即视图使用两套代码，业务逻辑和数据交互实现代码复用，视图根据功能不同可分为数据显示、公共消息提示框两大部分。消息提示框需要在逻辑代码中调用。
为达到上述目的，本发明的技术方案是这样实现的：
一种跨平台页面显示方法，包括：
S1、用户访问页面时，通过公共方法库向客户端提供方法，客户端通过浏览器对象判断平台类型；
S2、当客户端判断平台类型不是移动端页面时向用户显示web端视图；
S3、当客户端判断平台类型是移动端页面时向用户显示移动端视图；
S4、通过公共方法库向客户端提供方法，根据用于操作弹出提示框或作出不同反应；
S5、当客户端判断平台类型不是移动端页面时调用web端弹框或做出适合web端的反应；
S6、当客户端判断平台类型是移动端页面时调用移动端弹框或做出适合移动端的反应。
进一步的，S1所述的公共方法库向客户端提供方法的方式为通过浏览器对象userAgent属性实现的，所述userAgent在页面加载前调用，并将平台类型存储以供视图显示和方法库中的其他方法使用。
进一步的，S5通过使用elementUI的Message组件调用web端弹框，调用方式为this.$message()。
进一步的，S6通过使用Vant的Toast组件调用移动端弹框，调用方法为this.$toast()。
相对于现有技术，本发明所述的一种跨平台页面显示方法具有以下优势：
本发明所述的一种跨平台页面显示方法支持复杂页面的跨平台，在页面中调取统一的公共方法，逻辑清晰、易维护、节省开发成本，同时可实现快速开发降低开发难度。
附图说明
构成本发明的一部分的附图用来提供对本发明的进一步理解，本发明的示意性实施例及其说明用于解释本发明，并不构成对本发明的不当限定。在附图中：
图1为本发明实施例所述的实现跨平台页面展示流程图示意图；
图2为本发明实施例所述的跨平台方法模块图示意图；
图3为本发明实施例所述的前端开发模块图示意图。
具体实施方式
需要说明的是，在不冲突的情况下，本发明中的实施例及实施例中的特征可以相互组合。
在本发明的描述中，需要理解的是，术语“中心”、“纵向”、“横向”、“上”、“下”、“前”、“后”、“左”、“右”、“竖直”、“水平”、“顶”、“底”、“内”、“外”等指示的方位或位置关系为基于附图所示的方位或位置关系，仅是为了便于描述本发明和简化描述，而不是指示或暗示所指的装置或元件必须具有特定的方位、以特定的方位构造和操作，因此不能理解为对本发明的限制。此外，术语“第一”、“第二”等仅用于描述目的，而不能理解为指示或暗示相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”等的特征可以明示或者隐含地包括一个或者更多个该特征。在本发明的描述中，除非另有说明，“多个”的含义是两个或两个以上。
在本发明的描述中，需要说明的是，除非另有明确的规定和限定，术语“安装”、“相连”、“连接”应做广义理解，例如，可以是固定连接，也可以是可拆卸连接，或一体地连接；可以是机械连接，也可以是电连接；可以是直接相连，也可以通过中间媒介间接相连，可以是两个元件内部的连通。对于本领域的普通技术人员而言，可以通过具体情况理解上述术语在本发明中的具体含义。
下面将参考附图并结合实施例来详细说明本发明。
一种跨平台页面显示方法，包括：S1、用户访问页面时，通过公共方法库向客户端提供方法，客户端通过浏览器对象判断平台类型；S2、当客户端判断平台类型不是移动端页面时向用户显示web端视图；S3、当客户端判断平台类型是移动端页面时向用户显示移动端视图；S4、通过公共方法库向客户端提供方法，根据用于操作弹出提示框或作出不同反应；S5、当客户端判断平台类型不是移动端页面时调用web端弹框或做出适合web端的反应；S6、当客户端判断平台类型是移动端页面时调用移动端弹框或做出适合移动端的反应。
S1所述的公共方法库向客户端提供方法的方式为通过浏览器对象userAgent属性实现的，所述userAgent在页面加载前调用，并将平台类型存储以供视图显示和方法库中的其他方法使用。
S5通过使用elementUI的Message组件调用web端弹框，调用方式为this.$message()。
S6通过使用Vant的Toast组件调用移动端弹框，调用方法为this.$toast()。
目前有很多成熟的前端框架，如elementUI、Vant等，而且比较成熟的开发团队也会有自己的前端框架，所以实现简单的视图显示是整个网站开发中最为简单快捷的一步，所以即使html针对不同平台写两套代码，也能很快实现。这种方法可以最大程度复用公共代码，只在最简单的内容显示这一步分别开发一套视图，同时可以解决复杂页面实现跨平台显示的问题。
首先，需要提供并维护一个公共方法库，这个方法库的主要作用是为整个项目提供通用方法，也是本设计的核心内容，下面介绍几个常用方：判断设备类型方法：这是方法库中最重要的一个方法，也是核心方法，此方法是通过浏览器对象userAgent属性实现的，这个方法在页面加载前调用，并将平台类型存储，供视图显示和方法库中的其他方法使用；调用提示框方法：比如调用成功提示框、失败提示框、确认框等。维护这些方法的原因是，跨平台页面逻辑虽然一致，但是由于平台不同导致每次进行页面提示等操作时需要调用不同的提示框，一般在移动端提示框比较小、简单，在web端较大，而且可能会有标题等，样式也相对复杂。针对平台开发提示框视图，并且为了兼容基于前端框架的开发模式，要考虑调用提示框方式不同的问题，比如web端使用elementUI的Message组件时，调用方式为this.$message()，移动端使用Vant的Toast组件时调用方法为this.$toast()。
所以，为了实现逻辑代码复用，就需要一个适用各种平台的调用提示框的方法。这个方法内部会根据平台来选择调用哪一个提示框视图。比如在组件库中添加一个确认提示框方法，命名为confirmMessage，现在用户进行一个删除操作，需要提示‘此操作将永久删除该订单，是否继续？’，只需要调用这个公共确认提示方法confirmMessage即可，这个方法会根据平台类型自己选择合适的展示形式，可以极大程度地节省开发成本。而开发者在调用方法的时候可以不用考虑平台，不需要了解公共方法的逻辑，一句代码就可以实现。这样也能保证js代码一致，可以最大程度地实现代码共用。
除判断设备类型这个核心方法外，库中维护的每一个方法，都是根据不同平台做出不同反应的方法，在每个方法中，都会利用存储的平台类型进行平台判断，并显示适合当前平台的视图组件，或做出适合当前平台的动作，这些组件可以自己开发封装，也可以借用现有前端框架里的组件或方法。
以上这些方法在网页开发过程中是必须的，且通用的。
然后是开发视图，这种跨平台显示方法需要提供关两套视图代码，即两套html+css，比如一套用于移动端，基于移动端框架开发，另一套用于web端，基于web前端框架开发，可以根据自己的项目情况选择现有的前端框架，实现快速开发。
最后就是业务逻辑和数据数据交互，在此共用一套代码。如果业务逻辑中需要有提示窗等，就调用公共方法库中的方法。这个方法库可根据项目需求一步步扩展。
在进行页面访问时，首先调用判断平台类型的方法，得到平台类型，通过保存的平台类型来判断加载适合当前设备的视图，实现视图上的跨平台显示。
以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (4)

1.一种跨平台页面显示方法，其特征在于，包括：
S1、用户访问页面时，通过公共方法库向客户端提供方法，客户端通过浏览器对象判断平台类型；
S2、当客户端判断平台类型不是移动端页面时向用户显示web端视图；
S3、当客户端判断平台类型是移动端页面时向用户显示移动端视图；
S4、通过公共方法库向客户端提供方法，根据用于操作弹出提示框或作出不同反应；
S5、当客户端判断平台类型不是移动端页面时调用web端弹框或做出适合web端的反应；
S6、当客户端判断平台类型是移动端页面时调用移动端弹框或做出适合移动端的反应。
2.根据权利要求1所述的一种跨平台页面显示方法，其特征在于：S1所述的公共方法库向客户端提供方法的方式为通过浏览器对象userAgent属性实现的，所述userAgent在页面加载前调用，并将平台类型存储以供视图显示和方法库中的其他方法使用。
3.根据权利要求1所述的一种跨平台页面显示方法，其特征在于：S5通过使用elementUI的Message组件调用web端弹框，调用方式为this.$message()。
4.根据权利要求1所述的一种跨平台页面显示方法，其特征在于：S6通过使用Vant的Toast组件调用移动端弹框，调用方法为this.$toast()。
CN201910971980.2A 2019-10-16 2019-10-16 一种跨平台页面显示方法 Pending CN110737858A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201910971980.2A CN110737858A (zh) 2019-10-16 2019-10-16 一种跨平台页面显示方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201910971980.2A CN110737858A (zh) 2019-10-16 2019-10-16 一种跨平台页面显示方法

Publications (1)

Publication Number Publication Date
CN110737858A true CN110737858A (zh) 2020-01-31

Family

ID=69270020

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201910971980.2A Pending CN110737858A (zh) 2019-10-16 2019-10-16 一种跨平台页面显示方法

Country Status (1)

Country Link
CN (1) CN110737858A (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112148450A (zh) * 2020-09-25 2020-12-29 北京聪明核桃教育科技有限公司 数据处理方法、装置、设备和存储介质

Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20120220263A1 (en) * 2011-02-28 2012-08-30 Unwired Nation, Inc. Mobile application system
CN106990966A (zh) * 2017-03-31 2017-07-28 中国科学技术大学苏州研究院 基于前端框架的移动端跨平台应用开发框架及开发方法
CN107329997A (zh) * 2017-06-08 2017-11-07 腾讯科技（深圳）有限公司 页面显示方法及装置、客户端、存储介质
CN109144567A (zh) * 2018-08-03 2019-01-04 苏州麦迪斯顿医疗科技股份有限公司 跨平台的网页渲染方法、装置、服务器及存储介质
CN109426492A (zh) * 2017-07-13 2019-03-05 北京微影时代科技有限公司 一种客户端软件开发方法及装置
CN109683892A (zh) * 2018-12-11 2019-04-26 北京城市网邻信息技术有限公司 页面展示方法、装置、计算机设备及存储介质

Patent Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20120220263A1 (en) * 2011-02-28 2012-08-30 Unwired Nation, Inc. Mobile application system
CN106990966A (zh) * 2017-03-31 2017-07-28 中国科学技术大学苏州研究院 基于前端框架的移动端跨平台应用开发框架及开发方法
CN107329997A (zh) * 2017-06-08 2017-11-07 腾讯科技（深圳）有限公司 页面显示方法及装置、客户端、存储介质
CN109426492A (zh) * 2017-07-13 2019-03-05 北京微影时代科技有限公司 一种客户端软件开发方法及装置
CN109144567A (zh) * 2018-08-03 2019-01-04 苏州麦迪斯顿医疗科技股份有限公司 跨平台的网页渲染方法、装置、服务器及存储介质
CN109683892A (zh) * 2018-12-11 2019-04-26 北京城市网邻信息技术有限公司 页面展示方法、装置、计算机设备及存储介质

Non-Patent Citations (2)

* Cited by examiner, † Cited by third party
Title
小猪八Q: ""Element-UI消息提示组件Message在Vuex中的调用实现"", 《CSDN》 *
那抹蓝亦如初见: ""want ui库toast的使用及封装"", 《稀土掘金》 *

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112148450A (zh) * 2020-09-25 2020-12-29 北京聪明核桃教育科技有限公司 数据处理方法、装置、设备和存储介质

Similar Documents

Publication Publication Date Title
CN103678343B (zh) 提示网页加载进度的方法和装置
US9571556B2 (en) Browser kernel adaptation method and browser therefor
CN104217037B (zh) 一种在移动终端中显示网页的方法及装置
US20140325323A1 (en) Online video playing method and apparatus and computer readable medium
CN102663126A (zh) 一种在移动终端中显示网页的方法及装置
CN103473082A (zh) 一种启动WebApp的方法及装置
CN106339414A (zh) 网页渲染方法及装置
CN114138372B (zh) 前端组件加载方法及装置
US20230334113A1 (en) Image processing method and apparatus, and computer readable storage medium
CN104123362A (zh) 一种面向多终端设备的网页适应性布局方法
WO2022252882A1 (zh) 浏览器网页防劫持的方法、装置、电子设备及存储介质
CN110516218A (zh) 表格的生成方法、终端和计算机可读存储介质
CN107688529A (zh) 组件调试方法和装置
CN103176834A (zh) 一种调用扩展接口的方法及装置
CN106293738A (zh) 一种表情图像的更新方法及装置
CN112100543A (zh) 渲染网页的方法、装置、存储介质及电子设备和服务器
CN106960062A (zh) 网页截图方法及***
CN110737858A (zh) 一种跨平台页面显示方法
US20140092084A1 (en) Webpage display method and apparatus
US10523718B2 (en) Video playing method and device
CN102253986A (zh) 提高多终端网页显示效果的方法和装置
CN104899212A (zh) 网页展示方法、服务器及***
CN105988814A (zh) 界面生成方法及装置
CN106919371A (zh) 响应式页面创建方法、***、以及服务器
CN108108367A (zh) 一种网页显示方法和装置

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
RJ01 Rejection of invention patent application after publication

Application publication date: 20200131

RJ01 Rejection of invention patent application after publication