웹뷰 위젯 분석

오늘은 어제 썼던 웹뷰 코드에 대해 분석하는 시간을 갖고자 한다,

해당 코드는 왜 사용했는지, 무슨 의미를 지니고 있는지 알면서 사용해야 좋은 개발자가 되지 않을까 싶어서다

WebView(

    initialUrl: 'https://m.sports.naver.com/wfootball/record/index',

    javascriptMode: JavascriptMode.unrestricted,

    onWebViewCreated: (WebViewController webViewController) {

      webViewController.evaluateJavascript('''

        // JavaScript 코드를 여기에 작성

        // rank_list2 클래스의 li 태그 값을 가져오는 스크립트 작성

        var rankList = document.querySelectorAll('.rank_list2 li');

        var rankListValues = [];

        for (var i = 0; i < rankList.length; i++) {

          rankListValues.push(rankList[i].innerText);

        }

        rankListValues.join('|');

        ''');

    },

    javascriptChannels: <JavascriptChannel>[

      JavascriptChannel(

        name: 'ReceiveRankList',

        onMessageReceived: (JavascriptMessage message) {

          final rankListValues = message.message;

          print('Rank List Values: $rankListValues');

        },

      ),

    ].toSet(),

    onPageFinished: (String url) {

      // 페이지가 로드된 후 JavaScript 코드 실행

      if (url == 'https://m.sports.naver.com/wfootball/record/index') {

        webViewController.evaluateJavascript('window.ReceiveRankList(rankListValues);');

      }

    },

  ),

코드는 위의 코드이다,

이제 하나씩 뜯어볼 때다.

 

initialUrl : 웹뷰와 연결할 url

 

javascriptMode : 자바스크립트의 활성화 유무로 아래의 항목 중에 선택하여 사용한다

   - JavascriptMode.disabled(비활성화)

   - JavascriptMode.unrestricted(활성화)

   - JavascriptMode.disabledButAllowingScripts(<script>태그만 활성화, 나머지는 비활성화)

 

onWebViewCreated : 웹뷰가 생성될 때 호출되는 콜백 메서드

 

webViewController : 웹뷰의 컨트롤러로 밖에 컨트롤러 변수를 만들어서 저장하여 사용

 

evaluateJavascript : 자바스크립트 코드를 실행하고 결과를 받을 수 있게 해주는 메서드

   * webViewController.evaluateJavascrip('자바스크립트 태그').then((String result){ '$result' } <- 이와 같이 사용 가능하            다, 이렇게 사용할 경우 result에 해당 태그의 값이 들어가있다      하지만 내 코드를 살펴보면 ''' '''라는 식으로 따옴표가 3개씩 들어가있는데 이것은 여러 줄의 자바스크립트 코드를 사      용하기 위함이라고 한다, 즉 내가 원하는 데이터는 배열로, 정제가 필요하기에 코드가 더 필요하니까 ''' '''를 이용하여          여러 줄로 사용한 것이다.

 

javascriptChannels : 앱과 웹 간에 양방향 통신으로 name의 값으로 트리거명을 지정, onMessageReceived를 이용하여 플러터에 직접적으로 값을 가져올 수 있게된다.

 

onPageFinished : 웹뷰 페이지 로딩이 끝날 때 호출되는 콜백 메서드최하단의 코드는 자바스크립트로 ReceiveRankList이름의 채널로 rankListValues의 값을 보낸다는 의미로,채널에서는 해당 메세지를 받고 message를 이용하여 값을 전달해주는 역할을 한다.

 

한 번 어렴풋이만 알면서 사용한 함수들을 정리해봤는데 웹뷰에 훨씬 가까워진 느낌이 든다.앞으로도 여럿 해볼만한 컨텐츠같다