유니앱과 웹뷰 간의 상호 값 전달 실현

1.uni-app은 어떻게 H5로 데이터를 전송합니까?사실 매우 연결된다. 웹-view에서 URL을 통해서만 H5에 전참할 수 있다. 예를 들어 uni-app에서:

<template>
  <view class="advertisement" style="width: 100%;">
    <web-view :src="url" @message="message"></web-view>
  </view>
</template>
 
<script>
export default {
  data() {
    return {
      url:'/hybrid/html/local.html?data='
    };
  },
  onLoad(data) {<br>　　　　　　　　　　// webview encodeURIComponent 
    this.url+=encodeURIComponent(data.data)
  },
  mounted() {},
  methods: {
    message(event){
      console.log(event.detail.data);
    }
  }
};
</script>
 
<style scoped="scoped" lang="scss">
@import './advertisement.scss';
</style>

그렇다면 H5에서는 어떻게 받을 가치가 있을까요?

console.log(getQuery('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;
      }

2.webview 유니앱에 값 전달

<script>
  document.addEventListener('UniAppJSBridgeReady', function() {
    // uniapp 
    uni.postMessage({
      data: {
        action: 'message'
      }
    });
    uni.getEnv(function(res) {
      console.log(' ：' + JSON.stringify(res));
    });
  });
</script>  

유니앱 수락

//message 

<template>
  <view class="advertisement" style="width: 100%;">
    <web-view :src="url" @message="message"></web-view>
  </view>
</template>

유니앱과 웹뷰 간의 상호전가의 실현에 관한 이 글은 여기까지 소개합니다. 더 많은 유니앱과 웹뷰의 상호전가 내용은 저희 이전의 글을 검색하거나 아래의 관련 글을 계속 훑어보시기 바랍니다. 앞으로 많은 응원 부탁드립니다!