- 在app项目添加webview文件夹添加gridWebview.vue文件。代码如下
<template><view><web-view :src="src" @message="getMessage" ></web-view></view>
</template><script>export default {data() {return {src: '',}},computed: {token() {return this.$store.state.login.token || ''},roles() {return this.$store.state.login.roles || ''},userInfo(){return this.$store.state.login.userInfo || ''}},onLoad(opt) {console.log(opt)//拼接所需参数this.title = opt.titlethis.src = opt.src+ (opt.src.includes('?') ? '&' : '?') + (this.token.length>0 ? 'token=' + this.token : '') + (this.userInfo.phone.length>0 ?`&phone=${this.userInfo.phone}` :'' )+ (this.userInfo.userId.length>0 ?`&userId=${this.userInfo.userId}` :'' )+ (this.userInfo.username.length>0 ?`&username=${this.userInfo.username}` :'' )+ (opt.data?`&data=${opt.data}` :'' )+ (opt.cityid?`&cityid=${opt.cityid}` :'' )},onShow() {// #ifdef APP-PLUS设置webview显示时顶部丢失问题var height = 0; //定义动态的高度变量，如高度为定值，可以直接写uni.getSystemInfo({//成功获取的回调函数，返回值为系统信息success: (sysinfo) => {height = sysinfo.windowHeight -40; //自行修改，自己需要的高度 此处如底部有其他内容，可以直接---(-50)这种，如果不减，页面会下沉，看不到底部导航栏},complete: () => {}});var currentWebview = this.$scope.$getAppWebview(); //获取当前web-viewsetTimeout(function() {var wv = currentWebview.children()[0];wv.setStyle({ //设置web-view距离顶部的距离以及自己的高度，单位为pxtop: 40, //此处是距离顶部的高度，应该是你页面的头部height: height, //webview的高度scalable: false, //webview的页面是否可以缩放，双指放大缩小,})}, 500); //如页面初始化调用需要写延迟// #endif},methods: {customBack() {// 在Webview页面中调用uni.navigateBack() uni.navigateBack();},getMessage(event) { //在H5端使用通信返回App端console.log(event, '0000000000000000000000000')if (event.detail.data[0].action == 'uni-app') {uni.navigateBack();}}},}
</script>2. app跳转H5使用如下方法：
//跳转到对应的webview页面并传入url和其他参数
uni.navigateTo({url: item.url.startsWith('http') ? `/pages/webview/gridWebview?title=${item.name}&src=${item.url}` : item.url})3.H5返回app使用如下方法：
app.vue页面需要引入uni.webview.1.5.2.js文件 （目前此方法只能在真机上返回，H5上目前点击无效）
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script> onLaunch: function() {this.initScript()console.log('App Launch')},onShow: function() {console.log('App Show')},onHide: function() {console.log('App Hide')},methods: {initScript() {var script = document.createElement('script');script.type = "text/javascript";script.async = true;script.src = "./static/js/uni.webview.1.5.2.js";document.head.appendChild(script);console.log(wx, "wx");}}在需要返回的页面添加返回方法：
goBack() {console.log('0000000', uni, )uni.webView.postMessage({data: {action: 'uni-app', //可自己随意定义，需要与app中接收通信的方法对应}});
}
