웹뷰에서 네이티브로 메시지 전달 (vue 에서 플러터로)

이전 회사에서 경험했던 문제를 다시 정리해본다.

vue 와 플러터 로 진행

문제

글로벌 함수를 만들어서 플러터에서 함수 접근이 가능하게 해야 한다.

실행

이 글로벌 함수를 통해서 플러터에서 이 함수를 vue를 통해 실행할수 있다.

1. js 파일을 만든다.

   <js파일 내부>
   window객체로 저장하기 위해 함수를 생성할때 window.함수명 = ()=>
   이렇게 화살표 함수로 만들어 준다.

2. 그리고 main.js에 js파일을 import 시켜준다.
   이렇게 하면 간단하게 window객체로 함수를 접근할수 있다.

vue에서 플러터로 메시지 전달하기

vue 단에서 소통을 하고 싶은 컴포넌트에 로직을 세워준다,

navigator.userAgent

이 명령어는 홈페이지를 접속하였을때 어떤 디바이스로 접근 , 혹은 어떤 인터넷으로 접근한지 알려준다.

이를 통해서 ios, 안드로이드 인지 판별을 한다음에 네이티브에서 활용 가능한 부분을 작성해주면 된다.

`window.플러터에서 만든 함수명.postMessage('전달하고싶은 메시지'); `

이렇게 해서 플러터에 메시지를 전달한다.

자세한 메소드에 관한 사항은

MDN에 window.postMessage()를 검색해 보면 나온다

두번째 인자로 targetOrigin을 사용하는데 보안을 위해서 꼭 사용하는것이 권장이 된다.