一种web端和iOS移动端交互方法、工具、设备及介质技术

本发明专利技术涉及一种web端和iOS移动端交互方法、工具、设备及介质，该方法包括以下步骤：步骤S1、通过原生应用程序入口获取用户操作数据；步骤S2、通过原生iOS端对WKWebview与其容器进行封装、注册、优化以及开放属性、协议与方法；步骤S3、原生iOS端采用继承或引入容器来完成web端与iOS移动端的信息交互；步骤S4、原生iOS端通过本地路径、网络路径或拦截加载离线包三种方式加载Html；步骤S5、链接手机与Mac电脑，利用后台管理与Safari开发功能进行线上实时联调。与现有技术相比，本发明专利技术无需第三方工具，可根据实际情况采用对应加载方式，所需安装包体积小；快速定位线上项目问题，缩短开发者联调时间，极大提高了开发效率。极大提高了开发效率。极大提高了开发效率。

【技术实现步骤摘要】
一种web端和iOS移动端交互方法、工具、设备及介质


[0001]本专利技术涉及移动端App开发
，尤其是涉及一种web端和iOS移动端交互方法、工具、设备及介质。

技术介绍

[0002]目前市面上的移动端APP，有3种开发方式，即WebAPP应用、原生应用、混合应用。流行的WebAPP应用虽然开发更新速度非常迅速，但整体使用表现差，页面卡顿，用户体验不佳，图片和动画的支持性不高，更适合开发一些简单的APP。而原生开发，当前流行的Flutter、React Native虽然已进一步缩短了开发成本，但依旧避免不了开发周期长，因为审核导致上线时间不确定的问题。并且上述两类在开发过程中免不了因iOS与安卓的某些特性不同，需要编写大量的if else来判断对应平台进行分类开发。所以较灵活的移动端App均采用混合开发模式，混合开发开发的优点是周期短，易更新
‑‑
可以线上更新，易维护
‑‑
H5开发的Web模块可以跨平台使用。使用混合应用开发技术，其性能介于原生开发与webAPP开发之间，但能保证较高的兼容性和稳定性，对Web应用的部分可实现iOS与安卓通用及远程热更新，节约整体时间和成本，缩短app的开发周期，用户体验较高。
[0003]但目前混合开发技术仍不够成熟，除开那些使用混合开发框架的，这些框架一般被应用于比较大型的混合开发项目，但是对于一些小型的或者需要交互功能比较少的App应用，即重要模块采用原生开发，需要及时更新的模块或者活动采用Web进行展示。市面上主流的混合开发方法是运用JSBridge等第三方框架进行混合开发，这种第三方的混合框架在实际使用中存在大量冗余代码，包含中间层，代码逻辑较为复杂，掺杂了大量的Web特性，导致APP运行速度受到影响、性能较差、安装包体积大，特别在较大型混合开发APP中尤为凸显。其次，一旦苹果公司或谷歌公司对Web底层的某些特性或方法进行了变更，这类变更将必然影响APP原生开发的部分且必须通过迭代最新版本才能解决，而采用JSBridge等第三方集成方式的用户只能静静等待框架作者针对新特性进行更新发布后才能同步更新到自己的应用，导致上线时间被拖延。同时还得祈祷这些第三方发布的框架版本没有BUG，如使用出现BUG，只能联系作者指望其修复。
[0004]另外，混合开发避免不了会遇到加载网络H5页面速度慢，短时间白屏需要进度条的情况，而H5之所以加载速度慢，是因为它做了很多事情：初始化webview
‑
>请求页面
‑
>下载数据
‑
>解析HTML
‑
>请求js/css资源
‑
>dom渲染
‑
>解析JS执行
‑
>JS请求数据
‑
>解析渲染
‑
>下载渲染图片。一般页面在dom渲染后才能展示，可以发现，H5首屏渲染慢或者白屏问题的原因关键在于，如何优化减少从请求下载页面到渲染之间这段时间的耗时。所以，如果需要进一步增加用户体验，应该减少网络请求，采用拦截加载离线资源加载方案来做优化。
[0005]本专利技术所要解决的技术问题是：如何摆脱对第三方工具的依赖，实现Web端和iOS移动端交互，从而快速定位线上项目问题，缩短开发者联调时间，极大提高了开发效率。

技术实现思路

[0006]本专利技术的目的就是为了克服上述现有技术存在的缺陷而提供一种web端和iOS移动端交互方法、工具、设备及介质，该方法无需第三方工具，可根据实际情况采用对应加载方式，所需安装包体积小；快速定位线上项目问题，缩短开发者联调时间，极大提高了开发效率。
[0007]本专利技术的目的可以通过以下技术方案来实现：
[0008]根据本专利技术的第一方面，提供了一种web端和iOS移动端交互方法，该方法包括以下步骤：
[0009]步骤S1、通过原生应用程序入口获取用户操作数据；
[0010]步骤S2、通过原生iOS端对WKWebview与其容器进行封装、注册、优化，并开放属性、协议与方法；
[0011]步骤S3、原生iOS端采用继承或引入容器来完成web端与iOS移动端的信息交互；
[0012]步骤S4、原生iOS端通过本地路径、网络路径或拦截加载离线包三种方式加载Html；
[0013]步骤S5、链接手机与Mac电脑，利用后台管理与Safari开发功能进行线上实时联调。
[0014]优选地，所述步骤S1具体为：
[0015]步骤S1.1、对所述用户操作数据进行逻辑跳转处理，获得逻辑跳转处理结果；
[0016]步骤S1.2、基于所述逻辑跳转处理结果拼装完整统一资源定位符URL链接，该URL链接为本地文件路径或网络IP地址，并将所述URL链接作为初始化结果。
[0017]优选地，所述步骤S2具体为：
[0018]步骤S2.1、定义一个继承于WKWebview的自定义类，并在其中自定义添加需要的基本设置；
[0019]步骤S2.2、引入并遵循WKScriptMessageHandler协议，实现回调方法，定义传参格式；
[0020]步骤S2.3、进行调用函数的统一监听和处理，以及功能响应后的反馈函数处理，增加本地、网络切换模块，定义并开放属性、协议与方法；
[0021]步骤S2.4、定义一个WKURLSchemeHandler的自定义类，用于拦截加载离线资源，实现协议与方法；
[0022]步骤S2.5、定义一个控制器的自定义容器，引入已封装的WKWebview自定义类并创建实例，遵循并实现相关代理方法；
[0023]步骤S2.6、对自定义容器进行调用函数的统一监听和处理，定义并开放属性、协议，以及加载本地、网络、拦截离线包的方法。
[0024]优选地，所述步骤S3具体为：
[0025]步骤S3a：通过iOS端控制器引入已封装的WKWebview容器，以该类提供的属性、方法、协议作为中间过渡，完成web端与iOS移动端的信息交互；
[0026]步骤S3b：通过iOS端控制器继承已封装的WKWebview容器，以该类提供的属性、方法、协议作为中间过渡，完成web端与iOS移动端的信息交互。
[0027]优选地，所述步骤S3a具体操作为：
[0028]步骤S3a.1、引入已封装的WKWebview容器；
[0029]步骤S3a.2、创建自定义WKWebview容器的实例；
[0030]步骤S3a.3、根据和web端页面的约定函数，在WKWebview中间件中注册处理函数名，并且映射处理文件，在处理文件中，进行函数的分发和处理，完成调用函数的统一监听和处理；
[0031]步骤S3a.4、处理结束后，调用JS传递过来的callback根据实际情况进行本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种web端和iOS移动端交互方法，其特征在于，该方法包括以下步骤：步骤S1、通过原生应用程序入口获取用户操作数据；步骤S2、通过原生iOS端对WKWebview与其容器进行封装、注册、优化，并开放属性、协议与方法；步骤S3、原生iOS端采用继承或引入容器来完成web端与iOS移动端的信息交互；步骤S4、原生iOS端通过本地路径、网络路径或拦截加载离线包三种方式加载Html；步骤S5、链接手机与Mac电脑，利用后台管理与Safari开发功能进行线上实时联调。2.根据权利要求1所述的一种web端和iOS移动端交互方法，其特征在于，所述步骤S1具体为：步骤S1.1、对所述用户操作数据进行逻辑跳转处理，获得逻辑跳转处理结果；步骤S1.2、基于所述逻辑跳转处理结果拼装完整统一资源定位符URL链接，该URL链接为本地文件路径或网络IP地址，并将所述URL链接作为初始化结果。3.根据权利要求1所述的一种web端和iOS移动端交互方法，其特征在于，所述步骤S2具体为：步骤S2.1、定义一个继承于WKWebview的自定义类，并在其中自定义添加需要的基本设置；步骤S2.2、引入并遵循WKScriptMessageHandler协议，实现回调方法，定义传参格式；步骤S2.3、进行调用函数的统一监听和处理，以及功能响应后的反馈函数处理，增加本地、网络切换模块，定义并开放属性、协议与方法；步骤S2.4、定义一个WKURLSchemeHandler的自定义类，用于拦截加载离线资源，实现协议与方法；步骤S2.5、定义一个控制器的自定义容器，引入已封装的WKWebview自定义类并创建实例，遵循并实现相关代理方法；步骤S2.6、对自定义容器进行调用函数的统一监听和处理，定义并开放属性、协议，以及加载本地、网络、拦截离线包的方法。4.根据权利要求1所述的一种web端和iOS移动端交互方法，其特征在于，所述步骤S3具体为：步骤S3a：通过iOS端控制器引入已封装的WKWebview容器，以该类提供的属性、方法、协议作为中间过渡，完成web端与iOS移动端的信息交互；步骤S3b：通过iOS端控制器继承已封装的WKWebview容器，以该类提供的属性、方法、协议作为中间过渡，完成web端与iOS移动端的信息交互。5.根据权利要求4所述的一种web端和iOS移动端交互方法，其特征在于，所述步骤S3a具体操作为：步骤S3a.1、引入已封装的WKWebview容器；步骤S3a.2、创建自定义WKWebview容器的实例；步骤S3a.3、根据和web端页面的约定函数，在WKWebview中间件中注册处理函数名，并且映射处理文件，在处理文件中，进行函数的分发和处理，完成调用函数的统一监听和处理；步骤S3a.4、处理结束后，调用JS传递过来的callback根据实际情况进行回调函数调
用。6.根据权利要求4所述的一种web端和iOS移动端交互方法，其特征在于，所述步骤S3b具体操作为：步骤S3b.1、定义一个UIViewControl控制器，继承已封装的WKWebview容器；步骤S3b.2、实现自定义WKWebview容器的代理方法；步骤S3b.3、根据和web端页面的约定函数，在WKWebview中间件中注册处理函数名，并且映射处理文件，在处理文件中，进行函数的分发和处理，完成调用函数的统一监听和处理；步骤S3b.4、处理结束后，调用JS传递过来的...

【专利技术属性】
技术研发人员：潘弘，邵华，张奔，冉宇晖，陶毅，郑美娟，林丽清，徐航，吴小龙，刘晓玉，何艳，
申请(专利权)人：江苏安科瑞电器制造有限公司，
类型：发明
国别省市：