一种移动端内微应用的开发及测试系统
技术领域
本发明涉及移动应用开发技术领域,特别涉及一种移动端内微应用开发及测试系统。
背景技术
在移动应用开发中,基于系统(Android/iOS)开发商指定语言框架开发的应用被称为原生应用。
随着自身业务的发展,越来越需要出现跨平台方案,也就是一套代码可以在多个不同操作系统中使用。而且针对已发布的应用出现的问题能得到及时的修复,对于新增的需求或更改的需求可以得到及时的解决而不用等待移动应用重新发布版本,从而可以减轻开发时间成本和应用程序发布审核的时间成本。
针对已有的解决方案(如React Native,Flutter,Weex等),虽然一定程度上可以有效缓解跨平台的问题,但针对应用程序的更新及问题修复并没有从根本上解决。
另一种方案,也是应用最普遍使用最早的 Hybrid 方案-HTML可以完全解决以上所有问题,但是纯粹的HTML的方式加载也带来了其他的问题,诸如:页面加载慢,页面渲染时不够友好,页面滑动流畅性等。
同时,web页面在移动端直接调试困难,bug追踪及调试等操作只能借助电脑才可以完成。
因此,急需一种体验接近原生,跨平台且具有灵活发布的方案来解决以上问题。
发明内容
针对上述现有技术中存在的不足,本发明所要解决的技术问题是提供一种移动端内微应用开发及测试系统,有效的节省了人力及开发时间的成本,提高了需求发布的灵活性,解决了现有技术中原生开发热更新不便及原生加载网页慢,用户体验差的问题,需要多端(Android/iOS)开发及适配的问题,同时也解决了开发人员在移动端调试困难的问题,大幅度提升了移动应用的开发及测试效率,在提高资源加载速度及提升用户使用体验的同时也方便开发者进行开发调试和bug的追踪解决。
为了解决上述技术问题,本发明采用的技术方案为:
一种移动端内微应用的开发及测试系统,包括微应用、调试助手、web容器、原生模块、浏览器内核;
微应用是以HTML、JavaScript、CSS技术为基础开发的离线资源集合,独立存在,不依赖移动端App运行;
调试助手用于在移动端直接调试微应用/web页面,定位问题,调试性能;
浏览器内核,是Android端及iOS端底层承载渲染内核,iOS端使用系统自带的webKit内核,Android端使用私有内核进行替代系统自带的浏览器内核;
web容器基于浏览器内核设计,实现微应用加载渲染及与原生模块通信;微应用/web页面根据已定义好的路由方案跳转至原生页面或web页面/微应用;原生页面根据定义好的路由方案跳转至微应用/web页面。
进一步的,开发人员通过调试助手直接在移动端查看加载的微应用页面/web页面的信息,包括加载资源所需时长、HTTP/HTTPS请求和响应展示、调试信息的打印、断点调试、错误或警告信息,进行查看页面加载的详情、评估页面加载性能与时长、bug追踪调试、检查页面元素状态、显示本地存储、展示Cookie信息。
进一步的,微应用加载渲染及与原生通信基于web容器中的JavaScript组件,通过已有Javascript规则调用Javascript函数实现相应功能。
进一步的,微应用加载渲染为开发人员基于已有JavaScript规则定义好要打开的微应用页面的统一资源定位符,移动端在监听到有微应用页面打开的时候,根据规则进行判断打开的是否是微应用页面,如果是微应用页面则使用容器在本地微应用包中找到相应页面进行加载,如果非微应用则使用浏览器规则进行加载。
进一步的,原生模块包括系统硬件、网络请求接口、数据统计模块、通讯录模块;系统硬件包括系统相机、系统相册、系统定位功能、系统的生物识别模块。
进一步的,系统还包括微应用通过web容器已有规则调用系统相机进行拍照、调用系统相册进行照片选取、调用系统定位功能、调用系统的生物识别模块、调用微应用页面统计模块、调用通讯录模块。
进一步的,微应用通过web容器已有规则调用微应用页面统计模块为在移动端甄别打开的是微应用的时候,则开始加载微应用统计模块,针对要打开的微应用页面通过已定制的规则通过接口的形式转发给后台,由后台开发人员针对微应用页面频度进行数据采集及分析。
有益效果:与现有技术相比,本发明具有以下技术优势:
1)本发明解决了现有技术中原生开发热更新不便及原生加载网页慢,用户体验差的问题,需要多端(Android/iOS)开发及适配的问题,同时也解决了开发人员在移动端调试困难的问题;
2)基于JavaScript已有规则,原生页面可以打开微应用首页甚至是微应用其他层级的页面,微应用也能在原生页面及模块间进行调用及切换;
3)微应用网络请求通过调用原生网络请求方法与后台交互,这样网络方面通过移动端发出可以更安全,相对于js方式要更加快速;
4)本发明有效的节省了人力以及开发时间上的成本,提升了用户体验,提高了需求发布的灵活性,大幅度提升了移动应用的开发效率,在提高资源加载速度及提升用户使用体验的同时也方便开发者进行开发调试和bug的追踪解决。
附图说明
图1为本发明实施例公开的一种移动端内微应用的开发及测试系统图;
图2为本发明实施例公开的一种移动端内微应用的开发及测试系统的框架流程图;
图3为本发明实施例公开的一种移动端内微应用的开发及测试系统的模块调用流程图。
具体实施方式
下面结合具体实施例进一步说明本发明,但这些实施例并不用来限制本发明。
实施例1
一种移动端内微应用的开发及测试系统,如图1所示,该系统包括微应用11、调试助手12、web容器13、原生模块14、浏览器内核15;
微应用11,被浏览器内核15渲染,可以与web容器12通信以调用原生模块14。
微应用是以HTML、JavaScript,CSS等技术为基础开发的离线资源集合,在本发明中微应用可以独立存在,不依赖移动端App运行,解决了原生App无法热更新的问题,远程资源加载慢的问题,提高了远程资源加载速度问题并提升了用户使用体验。
浏览器内核,是Android端及iOS端底层承载渲染内核,iOS端使用的是系统自带的webKit内核,但Android因为是开源的,市面上大多手机厂商都对Android系统自带内核进行了改造,这样造成了同一个网页在不同手机上可能会有不同的表现,一般都是需要Android开发人员或者前端开发人员去单独适配,但这样的工作量是很大的,基于这种问题找到的解决方案就是,Android浏览器内核不使用系统自带的,使用私有内核进行替代。
调试助手是一个集微应用调试和web页面调试于一身的工具。可以在移动端直接调试微应用,以帮助开发人员调试微应用性能及解决bug等。开发人员可直接在移动设备上查看当前加载的微应用页面/web页面的信息,包括但不仅限于加载资源所需时长、HTTP/HTTPS请求和响应展示、调试信息的打印、断点调试、错误或警告信息等的展示等等,开发人员可以通过调试助手进行查看页面加载的详情,评估页面加载性能及时长,还可以进行bug追踪调试,检查页面元素状态、显示本地存储、展示Cookie信息等等,从而使开发人员调试移动端web页面/微应用页面更方便。
web容器是基于浏览器内核的二次开发,实现微应用加载渲染及与原生通信。包含了原生与微应用/web页面间互相跳转,微应用/web页面与原生页面/系统的互相调用。
微应用加载渲染及与原生通信基于web容器中的JavaScript组件,通过已有Javascript规则调用Javascript函数实现相应功能。
微应用加载渲染为开发人员基于已有JavaScript规则定义好要打开的微应用页面的统一资源定位符,移动端在监听到有微应用页面打开的时候,根据规则进行判断打开的是否是微应用页面,如果是微应用页面则使用容器在本地微应用包中找到相应页面进行加载,如果非微应用则使用浏览器规则进行加载。
微应用与原生通信为微应用/web页面根据已定义好的路由方案跳转至原生页面或web页面/微应用;原生页面根据定义好的路由方案跳转至微应用/web页面。
图2为上述移动端内微应用的开发及测试系统的框架流程图,具体的,微应用100由业务模块110及业务模块111等组成,底层实现技术依托于HTML/JavaScript/CSS等,用于向用户展示及供操作。
非微应用页面(HTTP/HTTPS等)120主要是通过HTTP等协议从非微应用的地址加载的网页。
web容器220承担着承载微应用及微应用与原生的之间的交互作用。
浏览器引擎(Android使用私有引擎,iOS使用WebKit)200,由于Android 浏览器内核的碎片化严重,所以这里使用了私有内核作为替代,私有内核更加安全,兼容性更强,可定制型强等特点。
原生300包括:系统硬件(相机、相册、定位功能、生物识别等)、网络请求接口、数据统计模块301、通讯录模块302;这些模块主要是通过使用系统提供商推荐语言(iOS 使用Swift/Objective-C,安卓使用Java或Kotlin)进行开发或直接使用系统自带硬件。
调试助手303用于微应用及web页面的调试,开发人员可以用此定位问题,查看页面缓存,查看性能等等。
微应用业务模块110可通过web容器220已有规则调用网络请求接口,这样网络方面通过移动端发出可以更安全,相对于js方式要更加快速。
通过原生页面与微应用页面可以无缝路由切换,基于JavaScript已有规则,原生页面可以打开微应用首页甚至是微应用其他层级的页面,微应用也能在原生页面及模块间进行调用及切换。
微应用通过web容器已有规则可以调用系统硬件模块,例如:业务模块110可通过web容器220调用系统硬件(相机、相册、定位功能、生物识别等),以满足产品需求或提升用户体验。可以调用手机上的相机进行拍照,可以调用系统相册进行照片的选取,可以调用定位功能还可以调用系统的生物识别模块等等。
微应用通过web容器已有规则还可以调用原生业务中的通讯录模块,以进行人员的选择等操作。
本发明进一步公开了一种微应用页面统计的系统,为了提高用户体验以及优化后台开发负责均衡配置,针对微应用页面频度进行了数据采集及分析,以获取常用微应用及频度高的微应用页面。
例如:业务模块110可通过web容器220调用数据统计模块301,在移动端甄别打开的是微应用的时候,则开始加载微应用统计模块,针对要打开的微应用页面通过已定制的规则通过接口的形式转发给后台,由后台开发人员进行数据分析。
调用流程如图3,包括:
步骤S11:微应用资源在web容器中被加载并渲染;
步骤S12:微应用调用web容器中的方法;
步骤S13:通过web容器调用统计模块或原生通讯录模块等;
步骤S14:在移动端App内调试微应用页面;
本发明通过web容器使微应用与原生相互调用,且可在移动端App内对微应用或web页面直接进行调试,极大的满足了日常业务开发需求。
需要注意的是,以上列举的仅是本发明的一部分具体实施例,而不是全部的实施例。以上实施例的说明只是用于帮助理解本发明的方法及其核心思想,因此,对于本领域的一般技术人员,依据本发明的思想,在具体实施方式及应用范围上均会有改变之处,综上所述,本说明书内容不应理解为对本发明的限制。基于本发明中的实施例,本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例,都属于本发明保护的范围。