一文详解如何在uniapp中优雅地使用WebView

<!-- uniapp各平台依赖 -->
<script type="text/javascript">
  var userAgent = navigator.userAgent;
  if (userAgent.indexOf('AlipayClient') > -1) {
    // 支付宝小程序的 js-SDK 防止 404 需要动态加载，如果不需要兼容支付宝小程序，则无需引用此 JS 文件。
    document.writeln('<script src="https://appx/web-view.min.js"' + '>' + '<' + '/' + 'script>');
  } else if (/QQ/i.test(userAgent) && /miniProgram/i.test(userAgent)) {
    // QQ 小程序
    document.write('<script type="text/javascript" src="Https://qqq.gtimg.cn/miniprogram/webview_jssdk/qqjssdk-1.0.0.js"><\/script>');
  } else if (/miniProgram/i.test(userAgent)) {
    // 微信小程序 JS-SDK 如果不需要兼容微信小程序，则无需引用此 JS 文件。
    document.write('<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"><\/script>');
  } else if (/toutiaomicroapp/i.test(userAgent)) {
    // 字节跳动小程序 JS-SDK 如果不需要兼容字节跳动小程序，则无需引用此 JS 文件。
    document.write('<script type="text/javascript" src="https://s3.pstatp.com/toutiao/tmajssdk/jssdk-1.0.1.js"><\/script>');
  } else if (/swan/i.test(userAgent)) {
    // 百度小程序 JS-SDK 如果不需要兼容百度小程序，则无需引用此 JS 文件。
    document.write('<script type="text/javascript" src="https://b.bdstatic.com/searchbox/icms/searchbox/js/swan-2.0.18.js"><\/script>');
  }
</script>
<!-- uni 的 SDK -->
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>

  document.addEventListener('UniAppJSBridgeReady', function() {
    uni.postMessage({
      data: {
        action: 'message'
      }
    });
 
    uni.getEnv(function(res) {
        console.log('当前环境：' + JSON.stringify(res));
    });
  });

<template lang="pug">
  view
    web-view.webview(:src="url" @message="getMessage")
</template>
 
<script>
  export default {
    data() {
      return {
        url: "https://zys201811.boringkiller.cn/shianonline/webview/vod.html?data=123",
      }
    },
    methods: {
      getMessage(event) {
        let data = event.detail.data
        console.log(data);
      }
    }
  }
</script>
 
<style lang="stylus" scoped>
$webviewHeight = 420rpx
.webview
  width 750rpx
  height $webviewHeight
</style>

<template lang="pug">
  view
    <!-- #ifdef APP-PLUS -->
    web-view.webview(:src="url")
    <!-- #endif -->
</template>
 
<script>
  export default {
    data() {
      return {
        url: "https://zys201811.boringkiller.cn/shianonline/webview/vod.html?data=123",
      }
    }
  }
</script>
 
<style lang="stylus" scoped>
$webviewHeight = 420rpx
.webview
  width 750rpx
  height $webviewHeight
</style>

let data = getQuery('data')
console.log(data);  // 获取 uni-app 传来的值
 
// 取url中的参数值
function getQuery(name) {
    // 正则：[找寻'&' + 'url参数名字' = '值' + '&']('&'可以不存在)
    let reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
    let r = window.location.search.substr(1).match(reg);
    console.log(r);
    if(r != null) {
        // 对参数值进行解码
        return decodeURIComponent(r[2]);
    }
    return null;
}

<template lang="pug">
  view
</template>
 
<script>
  export default {
    data() {
      return {
        url: "https://zys201811.boringkiller.cn/shianonline/webview/vod.html",
      }
    },
    mounted() {
      // #ifdef APP-PLUS
      var w = plus.webview.create(this.url + '?data=Good');
      w.show();
 
      setTimeout(() => {
        plus.webview.close(w);
        setTimeout(() => {
          w = plus.webview.create(this.url + '?data=123');
          w.show();
        }, 1000)
      }, 1000)
      // #endif
    }
  }
</script>

// #ifdef APP-PLUS
var w = plus.webview.open(this.url + '?data=good');
setTimeout(() => {
    w = plus.webview.open(this.url + '?data=123');
}, 1000)
// #endif

// 创建窗口
WebviewObject plus.webview.create( url, id, styles, extras );
 
// 创建并打开窗口
WebviewObject plus.webview.open( url, id, styles, aniShow, duration, showedCB );
 
// 显示窗口
void plus.webview.show( id_wvobj, aniShow, duration, showedCB, extras );
 
// 隐藏窗口
void plus.webview.hide( id_wvobj, aniHide, duration, extras );
 
// 关闭窗口
void plus.webview.close( id_wvobj, aniClose, duration, extras );

<template lang="pug">
  web-view(:src="url" ref="wb")
</template>

// #ifdef APP-PLUS
this.wb = this.$refs.wb
// #endif

// #ifdef APP-PLUS
this.wb.evalJs(`showAlert(${this.num})`)
// #endif

function showAlert(num) {
  alert(num)
}