小程序与webview数据交换的方法、装置及存储介质与流程

本申请涉及数据交换的领域，尤其是涉及一种小程序与webview数据交换的方法、装置及存储介质。

背景技术：

小程序提供了开发框架以及api，帮助开发者在微信中开发原生app。webview是承载网页的容器，可以内嵌在移动端，实现前端的混合式开发。

随着前端技术的告诉发展小程序开发者越来越多，公司产品的迭代版本繁杂，快速迭代导致小程序开发包大小与日俱增，容量超过限制，每次上线都需要微信人员审批，审批时长不可控制等问题。需要将部分功能页面切至webview中，来解决容量问题，同时也部分解决发版限制问题。相关技术中小程序界面回退至webview是不支持带入数据的，小程序页面与webview的交互通过官方给出的postmessage方法来实现。

针对上述中的相关技术，发明人认为相关技术中官方通过postmessage方法实现小程序与webview的交互时，只能满足特定时机下触发message事件才能实现通过webview传数据给小程序，但不支持小程序回传数据给webview，通信功能并不完善。

技术实现要素：

为了完善小程序与webview之间的通信系统，本申请提供一种小程序与webview数据交换的方法、装置及存储介质。

第一方面，本申请提供一种小程序与webview数据交换的方法，采用如下的技术方案：

一种小程序与webview数据交换的方法，包括以下步骤：

webview跳转至小程序界面时，在小程序页面地址传递参数上追加当前网页链接；跳转后小程序界面接收并保存传递的网页链接在内存中；

小程序页面处理完业务逻辑后返回至webview，在返回至webview时，将回传的数据和保存的网页链接一并回传至webview中；

拼接回传的数据和保存的网页链接作为新链接，将新链接作为webview中的网页链接；

获取从小程序中回传的数据；

将新链接还原为原网页链接。

通过采用上述技术方案，通过传递网页连接，小程序回传，设置网页链接，获取回传的数据和网页还原步骤，实现通过webview将数据传给小程序，同时实现小程序回传数据给webview。小程序回传时，将保存的网页链接与回传的数据拼接在一起，其中回传的数据为通过小程序而获得的画面或文字等，将回传的数据与网页链接进行拼接，进而保证小程序在回传时将新链接传给webview，完善了小程序与webview之间的通信。

可选的，小程序返回至webview时，webview中预先定义固定方法，参数为对象接收回传的数据和网页链接。

通过采用上述技术方案，预先定义的固定方法用于接收回传的数据和网页链接，进而实现小程序回传时数据和网页链接的传递。

可选的，小程序返回至webview中会触发onshow生命周期；在设置网页链接步骤中，onshow生命周期将回传的数据作为hash值，hash值与保存的网页链接拼接成新链接。

通过采用上述技术方案，在由小程序返回至webview时，onshow钩子被触发，获取回传的数据和网页链接，将回传的图片或文字作为hash值与原来保存的网页链接拼接成新链接。通过原来保存的网页链接保证跳转回webview时定位至原网页链接，提高页面回跳时的准确度。

可选的，webview中设置有hashchange事件，hashchange事件监听hash值发生改变，将新链接中的hash值取出，即获得小程序中回传的数据。

通过采用上述技术方案，hashchange事件监听hash值发生改变之后，即可将hash值取出，将由小程序回传的图片或文字显示出来。完成小程序与webview的交互。

可选的，将新链接还原为原网页链接时，执行window.histroy.go(-1)，将网页还原去除hash值。

通过采用上述技术方案，执行window.histroy.go(-1)即可将hash值删除，因为网页链接变化了一次，由于缓存中有历史数据，为了保证原网页链接正确，需要将hash值删除，防止后续出现网页打开错误的情况。

可选的，小程序页面处理完业务逻辑后小程序页面关闭，小程序页面关闭后返回至webview。

通过采用上述技术方案，执行返回webview步骤表明小程序页面已经处理完业务逻辑，即可由小程序页面返回至webview并进行后续的数据传递的操作。

可选的，小程序页面处理完业务逻辑后，用户点击小程序页面的返回按钮或用户点击小程序页面的任意位置后，小程序页面关闭。

通过采用上述技术方案，通过用户点击小程序页面的返回按钮或任意位置。

可选的，小程序页面处理完业务逻辑后，小程序页面延时自动关闭。

通过采用上述技术方案，通过小程序页面延时自动关闭来实现关闭小程序页面，表明小程序页面已经处理完业务逻辑，可进行后续操作。

第二方面，本申请提供一种小程序与webview数据交换的装置，采用如下的技术方案：

一种小程序与webview数据交换的装置，包括存储器和处理器，所述存储器上存储有能够被处理器加载并执行如上述任一种方法的计算机程序。

通过采用上述技术方案，具有能够支持小程序回传数据给webview，实现小程序与webview之间进行通信的特点。

第三方面，本申请提供一种小程序与webview数据交换的存储介质，采用如下的技术方案：

一种小程序与webview数据交换的存储介质，存储有能够被处理器加载并执行如上述任一种方法的计算机程序。

通过采用上述技术方案，能够存储相应的程序，具有支持小程序回传数据给webview，实现小程序与webview之间进行通信的特点。

综上所述，本申请包括以下至少一种有益技术效果：

1.通过传递网页连接，小程序回传，设置网页链接，获取回传的数据和网页还原步骤，实现通过webview将数据传给小程序，同时实现小程序回传数据给webview；

2.通过执行window.histroy.go(-1)，将网页还原去除hash值，防止后续出现网页打开错误的情况。

附图说明

图1是实施例1和实施例2公开的小程序与webview数据交换的方法的结构框图。

具体实施方式

以下结合附图1对本申请作进一步详细说明。

本申请实施例公开一种小程序与webview数据交换的方法。

实施例一

参照图1，一种小程序与webview数据交换的方法，包括以下步骤：

s1、webview跳转至小程序界面时，在小程序页面地址传递参数上追加当前网页链接；跳转后小程序界面接收并保存传递的网页链接在内存中。

s2、小程序页面处理完业务逻辑后小程序页面关闭，小程序页面关闭后返回至webview，在返回至webview时，将回传的数据和保存的网页链接一并回传至webview中。

小程序页面的业务逻辑根据不同的操作需要可以为拍照或输入文字等，照片或文字作为回传的数据。

小程序页面处理完业务逻辑后，用户点击小程序页面的返回按钮或点击小程序页面的任意位置后，小程序页面关闭；或者小程序页面处理完业务逻辑后，小程序页面延时自动关闭。

webview中预先定义固定方法seth5data，参数为对象接收回传的数据和网页链接并保存至内存中。在由小程序页面返回至webview时，先调用固定方法seth5data，将回传的数据和网页链接传进固定方法seth5data中，并保存至内存中。

s3、拼接回传的数据和保存的网页链接作为新链接，将新链接作为webview中的网页链接。

小程序返回至webview中会触发onshow生命周期钩子，onshow生命周期钩子是小程序页面的api。onshow生命周期将回传的数据作为hash值，hash值与保存的网页链接拼接成新链接，新链接为原保存的网页链接+hash值，将新链接作为webview中的网页链接。

s4、获取从小程序中回传的数据。

webview中设置有hashchange事件，hashchange事件监听hash值发生改变，将新链接中的hash值取出，即获得小程序中回传的数据。

s5、将新链接还原为原网页链接。

通过执行window.histroy.go(-1)，将网页还原去除hash值，使得缓存中存储原网页链接，保证网页的地址正确。

本申请实施例还公开一种小程序与webview数据交换的装置。其包括存储器和处理器，存储器上存储有能够被处理器加载并执行如上述方法的计算机程序。

本申请实施例还公开一种小程序与webview数据交换的存储介质。其存储有能够被处理器加载并执行如上述方法中的计算机程序，所述计算机可读存储介质例如包括：u盘、移动硬盘、只读存储器(read-onlymemory，rom)、随机存取存储器(randomaccessmemory，ram)、磁碟或者光盘等各种可以存储程序代码的介质。

以上均为本申请的较佳实施例，并非依此限制本申请的保护范围，故：凡依本申请的结构、形状、原理所做的等效变化，均应涵盖于本申请的保护范围之内。