Themeablebrowser打开浏览器页面与app之间的交互,调用app的分享组件

    首先能实现这个需求还得感谢晴天巨佬关于Themeablebrowser的文章,给了很大的帮助!!!


Themeablebrowser是调用外部浏览器插件,官方文档提供了下面几个方法:

addEventListener

添加事件

removeEventListener()

删除事件

close()

关闭浏览器窗口。

show()

显示隐藏打开的浏览器窗口

hide()

隐藏当前显示的InAppBrowser窗口。

reload()

重新加载当前页面

executeScript()

将JavaScript代码注入浏览器窗口

insertCSS()

将CSS注入浏览器窗口。

InAppBrowserEvent:官方文档的介绍

type :

    loadstart: 当InAppBrowser开始加载一个URL时抛出事件.

    loadstop: 当InAppBrowser结束加载一个URL时抛出事件.

    loaderror: 当InAppBrowser加载一个URL出现错误时抛出事件.

    exit: 当InAppBrowser窗口关闭时抛出事件.

url 已加载的网址。

code 错误代码,只有在loaderror的情况下。

message string错误消息,只有在loaderror的情况下。

我的需求场景是购买商品之后在Themeablebrowser打开的页面验证支付,支付成功之后跳转到支付成功页面,运营需要在这个页面调用app的分享,将该商品分享出去!

    首先上代码 H5页面代码:

H5页面就不多说了;

Themeablebrowser打开浏览器页面与app之间的交互,调用app的分享组件

对应的js:


Themeablebrowser打开浏览器页面与app之间的交互,调用app的分享组件

下面是app对应的ts:

    ts中最大的坑就是在addEventListener 事件函数内部的this作用域指向Themeablebrowser打开的网页,而不是app当前组件,所以首先定义了let order = this; 来保存当前组件用于在Themeablebrowser内部调用插件;


Themeablebrowser打开浏览器页面与app之间的交互,调用app的分享组件