uni-app App web-view与应用间交互

        在使用uni-app打包app的过程中使用到一个h5的页面，项目中使用了web-view来进行加载，但是在web-view中链接有重定向，导致了返回的时候第一次返回了一个空白页面，第二次才能返回到app列表页面，看到网上很多这种问题，官方没有给到解决办法。

        后面看到web-view可以跟应用进行交互，于是想到从这里入手应该可以解决。

前提条件：

        如果网页想与app进行交互必须在网页项目中加载uni-app的sdk，如果允许访问外网可以直接使用script标签加载在线js也可以将js文件下载到项目中进行引入根据实际情况而定，两者皆可。

我这里是由于是内网部署，所以我将js下载到了本地，在web-view页面项目中加载sdk

<script src="js/uni.webview.js"></script>

在入口的html页面加载js

在需要交互的时候使用

uni.postMessage({
          data: {
              action: status
          }
      });

action中就是需要给app发送的值，这里根据实际情况自行定，我这个status是定义了一个变量，根据不同的变量跳转到不同的页面去

beforeRouteLeave(to, from, next) {
    const status = this.formData?.act?.status
    console.log('状态', status);
    uni.postMessage({
        data: {
            action: status
        }
    });
    next()
  },

在vue的生命周期beforeRouteLeave里面给app发送消息，在app里面的web-view标签绑定事件接收消息，这个消息是实时的。

<web-view :src="src" :update-title="false" :webview-styles="webviewStyles" id='myWebView' @message="getMessage"></web-view>

methods: {
			    getMessage(e) {
				const action = e.detail.data[0].action;
				let obj = {
					click: '/pages/file/file',
					handle_todo: '/pages/file/file',
					read_todo: '/pages/file/file',
					grade_affair: '/pages/fileQuery/fileQuery',
					100: '/pages/login/login'
				}
				if (action == 100) {
					uni.reLaunch({
						url: '/pages/login/login'
					})
				} else {
					uni.setStorage({
						key: 'tabType',
						data: action == 'read_todo' ? 1 : 0,
						success: function () {
							uni.switchTab({
								url:obj[action]
							});
						}
					});
				}
			}
		}

根据不同的参数跳转到不同的app内部页面即可