0


uni-app嵌套webview监听事件

uniapp-主页面

  1. <template>
  2. <view class="content">
  3. <image class="logo" src="@/static/logo.png"></image>
  4. <view class="text-area">
  5. <text class="title">Hello RuoYi</text>
  6. <button @tap="navGen"> 跳转页面</button>
  7. </view>
  8. </view>
  9. </template>
  10. <script>
  11. export default {
  12. data(){
  13. return{
  14. codeUrl:'1',
  15. }
  16. },
  17. onLoad: function() {
  18. },
  19. methods:{
  20. navGen(){
  21. uni.navigateTo({
  22. url: '/pages/webview/webview?url=' + encodeURIComponent('http://www.baidu.com')
  23. });
  24. }
  25. }
  26. }
  27. </script>
  28. <style>
  29. </style>

uni-app跳转页面

  1. <template>
  2. <web-view :src="url" @message="onMessage"></web-view>
  3. </template>
  4. <script>
  5. // webview.vue
  6. export default {
  7. onLoad(option) {
  8. // 获取传递过来的URL参数
  9. if (option.url) {
  10. this.url = decodeURIComponent(option.url);
  11. }
  12. },
  13. data() {
  14. return {
  15. url: ''
  16. };
  17. },
  18. methods:{
  19. onMessage(e) {
  20. // 接收webview发送的消息
  21. console.log('收到消息',e);
  22. if (e.detail.data[0].action == 'success') {
  23. uni.reLaunch({
  24. url:'/pages/report/index'
  25. })
  26. }
  27. }
  28. }
  29. }
  30. </script>
  31. <style>
  32. </style>

外部页面

引入因为vue页面无法使用uniapp事件

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

具体页面

  1. //判断uni是否已经加载完成,不然在这之前调用是无效的
  2. var timer = setInterval(function(){
  3. if(window.uni){
  4. clearInterval(timer);
  5. uni.postMessage({ data: { action: 'success' } });
  6. }
  7. },1000)
标签: uni-app webview vue

本文转载自: https://blog.csdn.net/xinzaiz/article/details/137462467
版权归原作者 Hou° 所有, 如有侵权,请联系我们删除。

“uni-app嵌套webview监听事件”的评论:

还没有评论