封装好了WebView,下面来使用它。Nav里面每个图标点击会跳转到H5的页面。
跳转需要用到Navigator来push一个页面。然后里面使用MaterialPageRoute,
9-10【H5混合实战】基于自定义WebView实现H5混合开发-3 随笔 第1张
导入WebVIew这个widget
9-10【H5混合实战】基于自定义WebView实现H5混合开发-3 随笔 第2张

9-10【H5混合实战】基于自定义WebView实现H5混合开发-3 随笔 第3张

运行测试

点击
9-10【H5混合实战】基于自定义WebView实现H5混合开发-3 随笔 第4张

9-10【H5混合实战】基于自定义WebView实现H5混合开发-3 随笔 第5张
点击左侧的按钮可以返回。
9-10【H5混合实战】基于自定义WebView实现H5混合开发-3 随笔 第6张
点击返回,并没有返回到我们的首页,而是打开了另外一个H5页面
9-10【H5混合实战】基于自定义WebView实现H5混合开发-3 随笔 第7张

这个H5页面是携程的首页
9-10【H5混合实战】基于自定义WebView实现H5混合开发-3 随笔 第8张
怎么规避这个问题呢?接下俩就需要扩展我们的WebView来和H5之间进行一个混合。
在我们webView页面加载指定的url的时候。native做一些操作来规避让它不加载这个url。
当url发生变化的时候,在OnStateChanged会收到监听。
9-10【H5混合实战】基于自定义WebView实现H5混合开发-3 随笔 第9张
判断如果是跳转写成的首页或者是其他的H5页面,就不让他跳转,而是返回到我们的首页。

在顶部配置一些白名单。包含了携程可能出现的一些域名。
9-10【H5混合实战】基于自定义WebView实现H5混合开发-3 随笔 第10张
9-10【H5混合实战】基于自定义WebView实现H5混合开发-3 随笔 第11张

SRE实战 互联网时代守护先锋,助力企业售后服务体系运筹帷幄!一键直达领取阿里云限量特价优惠。

提供一个方法来判断

在dart里面判断一个object存不存在的方法。问号+点:?.
当我们的url存在的时候,才调用endsWith否则走的是false
9-10【H5混合实战】基于自定义WebView实现H5混合开发-3 随笔 第12张
如果是false或者不存在的情况下,直接设置为false
9-10【H5混合实战】基于自定义WebView实现H5混合开发-3 随笔 第13张

9-10【H5混合实战】基于自定义WebView实现H5混合开发-3 随笔 第14张


9-10【H5混合实战】基于自定义WebView实现H5混合开发-3 随笔 第15张

9-10【H5混合实战】基于自定义WebView实现H5混合开发-3 随笔 第16张
flutter里面返回到上一页 通过pop方法。
9-10【H5混合实战】基于自定义WebView实现H5混合开发-3 随笔 第17张

加一个是否返回的状态。默认是没有返回的
9-10【H5混合实战】基于自定义WebView实现H5混合开发-3 随笔 第18张
返回到首页后,就设置为true
9-10【H5混合实战】基于自定义WebView实现H5混合开发-3 随笔 第19张
让Navigator不重复返回。
9-10【H5混合实战】基于自定义WebView实现H5混合开发-3 随笔 第20张

运行测试

点击返回并没有返回到我们的首页。
9-10【H5混合实战】基于自定义WebView实现H5混合开发-3 随笔 第21张
代码报错
9-10【H5混合实战】基于自定义WebView实现H5混合开发-3 随笔 第22张

9-10【H5混合实战】基于自定义WebView实现H5混合开发-3 随笔 第23张


9-10【H5混合实战】基于自定义WebView实现H5混合开发-3 随笔 第24张
成功返回
9-10【H5混合实战】基于自定义WebView实现H5混合开发-3 随笔 第25张

总结

如果禁制返回,就是不允许webview打开其他页面,只允许打开它自身。

9-10【H5混合实战】基于自定义WebView实现H5混合开发-3 随笔 第26张

结束

 

扫码关注我们
微信号:SRE实战
拒绝背锅 运筹帷幄