CN112799665B - 一种以WebUI的方式构建App功能界面的方法 - Google Patents

一种以WebUI的方式构建App功能界面的方法 Download PDF

Info

Publication number
CN112799665B
CN112799665B CN202110107873.2A CN202110107873A CN112799665B CN 112799665 B CN112799665 B CN 112799665B CN 202110107873 A CN202110107873 A CN 202110107873A CN 112799665 B CN112799665 B CN 112799665B
Authority
CN
China
Prior art keywords
interface
app
webui
web
function
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.)
Active
Application number
CN202110107873.2A
Other languages
English (en)
Other versions
CN112799665A (zh
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.)
Seerof Information Technology Shanghai Co ltd
Original Assignee
Seerof Information Technology Shanghai 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 Seerof Information Technology Shanghai Co ltd filed Critical Seerof Information Technology Shanghai Co ltd
Priority to CN202110107873.2A priority Critical patent/CN112799665B/zh
Publication of CN112799665A publication Critical patent/CN112799665A/zh
Application granted granted Critical
Publication of CN112799665B publication Critical patent/CN112799665B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/31—Programming languages or programming paradigms
    • G06F8/315—Object-oriented languages

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Computing Systems (AREA)
  • Human Computer Interaction (AREA)
  • Stored Programmes (AREA)

Abstract

本发明公开了一种以WebUI的方式构建App功能界面的方法，包括以下步骤：定制BrowserEngine内核，扩展并提供Web形式的App功能js接口；根据Web形式的App功能js接口，开发实现Web化的功能界面；将开发完成的Web化的功能界面部署到服务器上；APP基于Web化的方式，从服务器请求WebUI功能界面，并渲染显示。本发明的一种以WebUI的方式构建App功能界面的方法，将传统的通过平台Native View的方式构建App功能界面改为用Web化的方式构建App功能界面，不仅降低了功能界面的开发难度和开发门槛，还在整个App的分发部署生态层面，让新功能在开发完成后可以第一时间分发触达到用户，大大缩短了App新功能触达到用户的时间。

Description

一种以WebUI的方式构建App功能界面的方法
技术领域
本发明涉及浏览器领域，尤其涉及以WebUI的方式构建App功能界面的方法。
背景技术
不管是传统的浏览器还是市面上常见的混合应用(Hybrid App)，根据渲染方式的不同，主要分为如下两大区域：
显示区域一：Web页面渲染显示区域：这部分区域是app的业务界面，主要是通过各OS平台提供的用于渲染显示网页embed view来实现，比如android的WebView，ios的WKWebView/UIWebView)；
显示区域二：平台原生Native页面显示区域：这部分区域是app的功能界面，主要是通过各平台提供的GUI View接口实现的。
然后将这两部分区域一起打包生成平台特定的安装包格式，提供给用户安装到平台设备中去。
由于显示区域二的app功能界面，目前主要是通过平台GUI View接口实现，并打包成平台App安装包的，与平台强相关，这就导致了这部分功能界面区域后续在功能界面迭代更新，app升级等方面不具有灵活性，总结起来有如下几个弊端：
1、当App版本升级，区域二功能界面需要迭代更新时，开发者需要基于平台GUIView接口重新设计编写界面功能code；
2、界面功能code编写完成并且测试完成后，还需要重新编译打包成平台安装包，并重新上架到平台app market中去；
3、对于App用户而言，必须升级App才能享受到新版本的特性。
综上，基于现有架构的app版本升级方式，对于App开发者而言需要二次编写界面code，二次编译app包，二次上架到App market；对于App用户而言，需要升级App。这中间的漫长复杂过程，会大大增加App的新功能从设计开发实现到新功能最终触达到用户的时间。
发明内容
有鉴于现有技术的上述缺陷，本发明所要解决的技术问题是现有浏览器的APP功能界面在后续的升级、功能界面迭代更时不灵活，功能界面需要重新设计编写，并且重新编译打包上架到平台中，APP需要升级后才能享受新版本的特性，这之间的过程漫长且繁杂，大大延迟了APP的新功能从设计开发到实现新功能最终触达用户的时间。本发明提供了一种以WebUI的方式构建App功能界面的方法，将传统的通过平台Native View的方式构建App功能界面改为用Web化的方式构建App功能界面，不仅降低了功能界面的开发难度和开发门槛，还在整个App的分发部署生态层面，让新功能在开发完成后可以第一时间分发触达到用户，大大缩短了App新功能触达到用户的时间。
为实现上述目的，本发明提供了一种以WebUI的方式构建App功能界面的方法，包括以下步骤：
定制BrowserEngine内核，扩展并提供Web形式的App功能js接口；
根据Web形式的App功能js接口，开发实现Web化的功能界面；
将开发完成的Web化的功能界面部署到服务器上；
APP基于Web化的方式，从服务器请求WebUI功能界面，并渲染显示。
进一步地，定制BrowserEngine内核，扩展并提供Web形式的App功能js接口，具体包括以下步骤：
将APP界面功能依赖的Native接口进行CMD定义并定义JSON化传输；
在页面创建js context上下文时，根据google V8 JS Engine中的对象模板创建JS根对象，并根据google V8 JS Engine中的函数模板创建并绑定JS根对象下的JS方法；
将JSON化后的CMD命令调用传递到扩展的JS根对象下的JS方法的内部；
在扩展的JS根对象内部实现中，对传过来的JSON化的CMD命令调用解析，并逐个桥接调用到平台接口实现。
进一步地，根据Web形式的App功能js接口，开发实现Web化的功能界面，具体包括：
基于传统的html+CSS+JS开发功能界面，并调用S1提供的Web化的js接口，完成WebUI功能界面的开发。
进一步地，根据Web形式的App功能js接口，开发实现Web化的功能界面，还可以包括借助web框架开发功能界面，并调用S1提供的Web化的js接口，完成WebUI功能界面的开发。
进一步地，服务器设置为对外的服务器。
进一步地，APP基于Web化的方式，从服务器请求WebUI功能界面，并渲染显示，具体包括：基于平台提供的用于渲染显示网页embed view来请求加载WebUI功能界面，并利用embed view进行渲染显示。
进一步地，创建并绑定JS根对象root和JS根对象下的JS方法sendCmdSync(jsonCmd),sendCmdAsync(jsonCmd)，在页面中通过sendCmdSync(jsonCmd)或root.sendCmdAsync(jsonCmd)调用并传递json化的CMD命令。
进一步地，将JSON化后的CMD命令调用传递到扩展的JS根对象下的JS方法的内部，具体包括：
将json化的CMD命令传递到JS root根对象的sendCmdSync(jsonCmd)或sendCmdAsync(jsonCmd)方法内部。
进一步地，在扩展的JS根对象内部实现中，对传过来的JSON化的CMD命令调用解析，并逐个桥接调用到平台接口实现，具体包括：
在JS根对象的sendCmdSync(jsonCmd)或sendCmdAsync(jsonCmd)方法内部，解析传递过来的WebUI json数据，并在其内部实现中桥接调用到平台接口。
技术效果
1、本发明的一种以WebUI的方式构建App功能界面的方法将功能界面Web化，由于Web开发的门槛比平台原生Native开发的门槛低，在一定程度上也会加快Web化功能界面的开发和部署；
2、通过将APP功能界面Web化，将功能界面的web code部署到Server上APP只需从server上请求功能界面code到本地渲染显示；
3、后续App功能界面版本升级时，只需要修改Server上的功能界面Code完成后再次部署到Server后，App用户可以在无感知的情况下，第一时间Get到新版本功能界面，大大缩短了APP新版本触达到用户的时间。
以下将结合附图对本发明的构思、具体结构及产生的技术效果作进一步说明，以充分地了解本发明的目的、特征和效果。
附图说明
图1是本发明的一个较佳实施例的一种以WebUI的方式构建App功能界面的方法的流程示意图；
图2是本发明的一个较佳实施例的一种以WebUI的方式构建App功能界面的方法的子流程示意图。
具体实施方式
为了使本发明所要解决的技术问题、技术方案及有益效果更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。
以下描述中，为了说明而不是为了限定，提出了诸如特定内部程序、技术之类的具体细节，以便透彻理解本发明实施例。然而，本领域的技术人员应当清楚，在没有这些具体细节的其它实施例中也可以实现本发明。在其它情况中，省略对众所周知的系统、装置、电路以及方法的详细说明，以免不必要的细节妨碍本发明的描述。
如图1所示，一种以WebUI的方式构建App功能界面的方法，包括以下步骤：
步骤100，定制BrowserEngine内核，扩展并提供Web形式的App功能js接口；
步骤200，根据Web形式的App功能js接口，开发实现Web化的功能界面；
步骤300，将开发完成的Web化的功能界面部署到服务器上；
步骤400，APP基于Web化的方式，从服务器请求WebUI功能界面，并渲染显示。
其中，步骤100，定制BrowserEngine内核，扩展并提供Web形式的App功能js接口，是整个实施的核心，需要在google V8 JS Engine的基础上，通过V8 template借助googleextension机制，将App功能界面依赖的接口封装扩展成Web化的JS接口。目的是为了WebUI功能界面在调用WebUI JS接口时，可以调用到平台Native的实现。
具体包括以下步骤，如图2所示：
步骤101，将APP界面功能依赖的Native接口进行CMD定义并定义JSON化传输；此步骤将native接口进行CMD定义并JSON化传输，有利于后续扩展新的js api。
大致代码如下：
Figure GDA0003808481300000041
另外，本发明实施例是采用JOSN化来传输，也可以使用其它的结构化传输比如XML的结构化传输。这一部分只要两边协商好传输各字段的含义，在解析CMD具体含义和数据时，根据协商好的传输方式解析即可。
步骤102，在页面创建js context上下文时，根据google V8 JS Engine中的对象模板创建JS根对象，并根据google V8 JS Engine中的函数模板创建并绑定JS根对象下的JS方法；本子步骤主要是在页面创建ScriptContext时机。
通过V8对象模板ObjectTemplate和V8函数模板FunctionTemplate，创建js根对象(比如叫root)和js根对象下的方法sendCmdSync(jsonCmd),sendCmdAsync(jsonCmd).后续就可以在页面中通过root.sendCmdSync(jsonCmd)，或root.sendCmdAsync(jsonCmd)调用并传递json化的CMD命令了，代码如下：
Figure GDA0003808481300000042
Figure GDA0003808481300000051
这一步骤中，本发明实施例没有将所有的native方法都扩展一个对应的js方法，而是仅仅扩展了两个用法发送json结构化后的cmd数据的通用的同步和异步方法，sendCmdSync，sendCmdAsync。这样做的好处是，通过CMD结构化的传输方式减少了js内部方法的数量，也为后续增加js接口增加了灵活性。
步骤103，将JSON化后的CMD命令调用传递到扩展的JS根对象下的JS方法的内部；此步骤就是将json化的WebUI CMD命令传递到JS root根对象的sendSync或sendAsync方法内部。
步骤104，在扩展的JS根对象内部实现中，对传过来的JSON化的CMD命令调用解析，并逐个桥接调用到平台接口实现。此步骤主要是在JS root根对象的sendSync或sendAsync方法内部，解析传递过来的WebUI json数据，并在其内部实现中桥接调用到平台接口。
步骤200，根据Web形式的App功能js接口，开发实现Web化的功能界面，具体包括：基于传统的html+CSS+JS开发功能界面，并调用S1提供的Web化的js接口，完成WebUI功能界面的开发。也可以包括借助web框架开发功能界面，并调用S1提供的Web化的js接口，完成WebUI功能界面的开发。
步骤300，将开发完成的Web化的功能界面部署到服务器上，其中，服务器设置为对外的服务器。一般公司都有自己的Web服务器，部署到公司对外的Web服务器即可。
步骤400，APP基于Web化的方式，从服务器请求WebUI功能界面，并渲染显示，具体包括：基于平台提供的用于渲染显示网页embed view来请求加载WebUI功能界面，并利用embed view进行渲染显示。该步骤中平台有用于渲染显示网页的embed view，包括android平台但并不仅限于android平台，比如还包括Ios平台的WKWebView/UIWebView，或者CEF框架的embed view。本实施例中是在android平台上试验的，因此，在本实施例中，这里的平台是指android平台。
本实施例还包括以下步骤：
步骤500，将改进后的App重新打包成平台安装包，上架到App market。
本发明实施例的一种以WebUI的方式构建App功能界面的方法，将功能界面Web化，由于Web开发的门槛比平台原生Native开发的门槛低，在一定程度上也会加快Web化功能界面的开发和部署；通过将APP功能界面Web化，使用了统一的Web Engine来渲染界面，解决了原先依赖平台GUI Native View渲染导致的平台GUI渲染效果不一致的问题。达到app在多终端跨平台的展示渲染效果在风格上的一致性；可以在多平台(android/ios)APP版本中复用同一套Web化的功能界面code，减小了开发维护成本，增加收益；后续App功能界面版本升级时，只需要修改Server上的功能界面Code完成后再次部署到Server后，App用户可以在无感知的情况下，第一时间Get到新版本功能界面，大大缩短了APP新版本触达到用户的时间。
最后，由于本发明实施例采取了web化的方式构建App功能界面，使得app可以通过内部埋点等手段与业内譬如大数据等技术结合起来，分析用户使用app的习惯，最终分析用户行为，得到每个用户的画像。进一步app开发者可以通过汇总分析这些海量的用户画像，用户行为数据，制定更加有针对性的，迎合用户的版本功能升级点，最终增加用户粘性，增加app的用户量。
以上详细描述了本发明的较佳具体实施例。应当理解，本领域的普通技术人员无需创造性劳动就可以根据本发明的构思作出诸多修改和变化。因此，凡本技术领域中技术人员依本发明的构思在现有技术的基础上通过逻辑分析、推理或者有限的实验可以得到的技术方案，皆应在由权利要求书所确定的保护范围内。

Claims (8)

1.一种以WebUI的方式构建App功能界面的方法，其特征在于，包括以下步骤：
S1，定制BrowserEngine内核，扩展并提供Web形式的App功能js接口；具体包括以下步骤：
将APP界面功能依赖的Native接口进行CMD定义并定义JSON化传输；
在页面创建js context上下文时，根据google V8 JS Engine中的对象模板创建JS根对象，并根据google V8 JS Engine中的函数模板创建并绑定JS根对象下的JS方法；
将JSON化后的CMD命令调用传递到扩展的所述JS根对象下的所述JS方法的内部；
在扩展的JS根对象内部实现中，对传过来的JSON化的CMD命令调用解析，并逐个桥接调用到平台接口实现；
S2，根据Web形式的App功能js接口，开发实现Web化的功能界面；
S3，将开发完成的所述Web化的功能界面部署到服务器上；
S4，APP基于Web化的方式，从所述服务器请求WebUI功能界面，并渲染显示。
2.如权利要求1所述的一种以WebUI的方式构建App功能界面的方法，其特征在于，根据Web形式的App功能js接口，开发实现Web化的功能界面，具体包括：
基于传统的html+CSS+JS开发功能界面，并调用S1提供的Web化的js接口，完成WebUI功能界面的开发。
3.如权利要求1所述的一种以WebUI的方式构建App功能界面的方法，其特征在于，根据Web形式的App功能js 接口，开发实现Web化的功能界面，借助web框架开发功能界面，并调用S1提供的Web化的js接口，完成WebUI功能界面的开发。
4.如权利要求1所述的一种以WebUI的方式构建App功能界面的方法，其特征在于，所述服务器设置为对外的服务器。
5.如权利要求1所述的一种以WebUI的方式构建App功能界面的方法，其特征在于，APP基于Web化的方式，从所述服务器请求WebUI功能界面，并渲染显示，具体包括：基于平台提供的用于渲染显示网页embed view来请求加载WebUI功能界面，并利用embed view进行渲染显示。
6.如权利要求1所述的一种以WebUI的方式构建App功能界面的方法，其特征在于，创建并绑定JS根对象root和JS根对象下的JS方法sendCmdSync(jsonCmd), sendCmdAsync(jsonCmd)，在页面中通过sendCmdSync(jsonCmd)或root.sendCmdAsync(jsonCmd) 调用并传递json化的CMD命令。
7.如权利要求6所述的一种以WebUI的方式构建App功能界面的方法，其特征在于，将JSON化后的CMD命令调用传递到扩展的所述JS根对象下的所述JS方法的内部，具体包括：
将json化的CMD命令传递到JS root根对象的sendCmdSync(jsonCmd)或sendCmdAsync(jsonCmd)方法内部。
8.如权利要求7所述的一种以WebUI的方式构建App功能界面的方法，其特征在于，在扩展的JS根对象内部实现中，对传过来的JSON化的CMD命令进行解析，并逐个桥接调用到平台接口实现，具体包括：
在JS根对象的sendCmdSync(jsonCmd)或sendCmdAsync(jsonCmd)方法内部，解析传递过来的WebUI json数据，并在其内部实现中桥接调用到平台接口。
CN202110107873.2A 2021-01-27 2021-01-27 一种以WebUI的方式构建App功能界面的方法 Active CN112799665B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202110107873.2A CN112799665B (zh) 2021-01-27 2021-01-27 一种以WebUI的方式构建App功能界面的方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202110107873.2A CN112799665B (zh) 2021-01-27 2021-01-27 一种以WebUI的方式构建App功能界面的方法

Publications (2)

Publication Number Publication Date
CN112799665A CN112799665A (zh) 2021-05-14
CN112799665B true CN112799665B (zh) 2022-12-13

Family

ID=75811953

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202110107873.2A Active CN112799665B (zh) 2021-01-27 2021-01-27 一种以WebUI的方式构建App功能界面的方法

Country Status (1)

Country Link
CN (1) CN112799665B (zh)

Families Citing this family (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114036049A (zh) * 2021-11-10 2022-02-11 四川启睿克科技有限公司 一种基于跨端的ui自动化测试方法

Family Cites Families (16)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103179166A (zh) * 2011-12-23 2013-06-26 腾讯科技（深圳）有限公司 在客户端中提供服务的方法和客户端
US8887182B2 (en) * 2012-10-16 2014-11-11 Yahoo! Inc. Hybrid applications
CN103902293B (zh) * 2014-03-28 2017-02-01 上海下一代广播电视网应用实验室有限公司 基于android广电网络浏览器中间件系统构建方法
US20170078452A1 (en) * 2014-05-07 2017-03-16 Optum, Inc. Web native bridge
CN104714830B (zh) * 2015-04-03 2018-03-30 普元信息技术股份有限公司 基于原生开发语言实现跨平台应用开发的系统及方法
CN105933766B (zh) * 2016-01-21 2019-01-15 东方明珠新媒体股份有限公司 基于机顶盒的WebOS系统及机顶盒
CN107092473B (zh) * 2016-10-31 2020-12-08 北京星选科技有限公司 桌面应用开发方法及设备
CN107229480A (zh) * 2017-06-19 2017-10-03 郑州云海信息技术有限公司 一种基于web技术的桌面应用构建方法及装置
CN107562478A (zh) * 2017-09-01 2018-01-09 成都市九阵科技有限公司 一种基于Web技术的移动软件开发系统及方法
CN108228155A (zh) * 2017-12-26 2018-06-29 江苏润和软件股份有限公司 EasyApp移动开发平台和开发方法
CN110275700A (zh) * 2019-06-17 2019-09-24 河南大学 一种基于electron的跨平台桌面应用程序开发框架及方法
CN110908656B (zh) * 2019-11-08 2022-08-23 福州汇思博信息技术有限公司 一种Android用户界面生成方法及系统
CN111045668B (zh) * 2019-12-03 2023-06-06 安徽航天信息科技有限公司 一种跨平台的移动端系统开发方法及装置
CN110908712A (zh) * 2019-12-04 2020-03-24 北京中启智源数字信息技术有限责任公司 移动端跨平台的数据处理方法和设备
CN111414158A (zh) * 2020-03-15 2020-07-14 杭州卓健信息科技有限公司 跨平台开发方法、跨平台开发系统及电子设备
CN111966354A (zh) * 2020-08-17 2020-11-20 Oppo（重庆）智能科技有限公司 一种页面显示方法、装置及计算机可读存储介质

Also Published As

Publication number Publication date
CN112799665A (zh) 2021-05-14

Similar Documents

Publication Publication Date Title
US9372680B2 (en) Methods and systems for producing, evaluating and simulating executable applications
CN111639287A (zh) 一种页面处理方法、装置、终端设备及可读存储介质
Perchat et al. Component based framework to create mobile cross-platform applications
CN107870821A (zh) 应用程序的跨平台调用方法及系统
US9703533B2 (en) Application platform for designing and executing applications
KR101416104B1 (ko) 하이브리드 웹 어플리케이션의 네이티브 기능을 수행하는 자바스크립트 코드의 동적 로딩 장치와 방법
CN101930366A (zh) 一种基于浏览器的手机中间件
CN107357607B (zh) 文件数据的读取方法及装置
CN108614767A (zh) 一种远程调试方法及装置
CN112256296A (zh) 基于Weex的快递服务APP更新方法、装置、设备及存储介质
CN110959165A (zh) 用于自动验证云服务代理系统中的要约的功能的技术
CN110895471A (zh) 安装包生成方法、装置、介质及电子设备
CN111740948A (zh) 数据包发布方法、动态更新方法、装置、设备及介质
CN108733370B (zh) 原生app的样式化显示方法、装置、终端及存储介质
CN112799665B (zh) 一种以WebUI的方式构建App功能界面的方法
CN104391700A (zh) 应用程序功能扩展方法和装置
CN113127361A (zh) 应用程序的开发方法、装置、电子设备和存储介质
CN113778393A (zh) 组件生成方法、装置、计算机系统和计算机可读存储介质
CN106919375B (zh) 一种移动终端设备上的屏幕自适应方法及系统
AU2019222873B2 (en) Method and system for providing content
Scacchi et al. Processes in securing open architecture software systems
CN106951288B (zh) 一种热更资源的开发、应用方法及装置
CN109684192A (zh) 基于数据处理的本地测试方法、设备、存储介质及装置
KR20140021088A (ko) 하이브리드 웹 어플리케이션 개발을 위한 호환성 높은 플러그인 시스템
CN104123168B (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
GR01 Patent grant
GR01 Patent grant