uni-app应用中控制webview的H5页面返回

╰半夏微凉° 2022-12-26 02:22 1106阅读 0赞

在uni-app中使用了webview之后, 由于项目完全由app内嵌h5完成, 所以无法控制app的物理返回键；
    要实现这个功能，最主要的是完成应用与H5 的通讯问题。

## 1、H5向应用发送消息 ##

*  **首先处理uni-app:** 需要在webview标签上加入接受消息的方法，通过`e.detail.data` 来获得消息中带来的信息

// 
    <web-view src="***/main/main?edition=1.0.0" @message="getH5Message"></web-view>

getH5Message(e) { 
    			console.log('来自webview的消息', e)
    			var item = e.detail.data[0]
    			switch(item.type) { 
    				case 'back':
    					this.operation()
    					break;
    				default :
    				    uni.showToast({ 
    				    	title: item.message,
    				    	duration: 2000
    				    });
    				    break;
    			}
    		},

*  **接下来处理H5页面：** 要在H5页面中加入uni的SDK，只有引入了这个SDK，才可以在uni-app的webview页面中使用uni的api方法

<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>

*  调用方法:

// 待触发 `UniAppJSBridgeReady` 事件后，即可调用 uni 的 API。如果不是一打开页面就调用 可以不用这个监听
         document.addEventListener('UniAppJSBridgeReady', function() { 
         // 使用postMessage 方法可以发送消息到应用, 消息内容需要在data 对象中,否则webview无法接收到
           uni.postMessage({ 
               data: { 
                   message: '我是来自H5的消息'
               }
           })

## 2、 应用控制H5页面返回 ##

*  可以通过 `$getAppWebview()`方法获取页面中的webview标签， 然后通过 **WebviewObject** 来控制整个webview中的各项值,具体参考: [WebviewObject][]
 *  通过 **WebviewObject** 的 `evalJS` 方法来操作H5页面中js 方法

data() { 
    	return: { 
    		webView: ''
    	}
    },
    onBackPress(e){ 
    	console.log("onBackPress e:"+JSON.stringify(e))
    	// 在这里直接默认所有的返回键操作都去执行h5的方法
    	this.webView.evalJS('window.myHistory()')
    	return true; // 返回true 表示不执行返回键默认操作
    },
    methods: { 
    	operation() { 
    		// #ifdef APP-PLUS
    		// 此对象相当于html5plus里的plus.webview.webView()。
    		// 在uni-app里vue页面直接使用plus.webview.webView()无效，
    		// 非v3编译模式使用this.$mp.page.$getAppWebview()
    		this.webView = this.$mp.page.$getAppWebview().children()[0]
    		//如果是页面初始化调用时，需要 setTimeout 延时一下
    		// #endif
    	},
    	getH5Message(e) { 
    			console.log('来自webview的消息', e)
    			var item = e.detail.data[0]
    			switch(item.type) { 
    				case 'back':
    					this.operation()
    					break;
    				case 'outApp':
    					this.back()
    					break;
    				default :
    				    uni.showToast({ 
    				    	title: item.message,
    				    	duration: 2000
    				    });
    				    break;
    			}
    		},
    		// 退出app
    		back() { 
    			uni.showModal({ 
    			    title: '提示',
    			    content: '是否退出系统？',
    			    success: function(res) { 
    				    if (res.confirm) { 
    					    // 退出当前应用，该方法只在App中生效
    					    plus.runtime.quit()
    				    } else if (res.cancel) { 
    					    console.log('用户点击取消')
    				    }
    			    }
    			})
    		},
    },

*  在 **H5** 中注册全局JS方法,

window.myHistory = () => { 
          var path = this.$route.path
          console.log(path)
          if (this.checkPath.indexOf(path) >= 0) { 
            // 到达主页面, 无法后退只能退出
            /* eslint-disable */
            uni.postMessage({ 
              data: { 
                message: '我要退出!',
                type: 'outApp'
              }
            })
          } else { 
            // window.history.go(-1)
            this.$router.go(-1)
          }
        }

#### 这样就吧app的物理返回键和h5 的页面返回联系到一起了,有用的话点个赞哦 ####

[WebviewObject]: https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewObject