uniapp实现像浏览器一样前进后退的功能 uniapp在webview怎么后退返回

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

H5向应用发送消息

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

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

App 端使用 自定义组件模式 时，uni.web-view.js 的最低版为 uni.webview.1.5.2.js

 

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

 

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页面返回
可以通过 $getAppWebview()方法获取页面中的webview标签， 然后通过 WebviewObject 来控制整个webview中的各项值,具体参考: WebviewObject
通过 WebviewObject 的 evalJS 方法来操作H5页面中js 方法

在 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 的页面返回联系到一起了,有用的话点个赞哦