윅스 (Wix) 코딩 - 모바일 장치에서만 실행되는 코드 작성하는 방법 (Wix Code: How to Write Code That Only Runs on Mobile Devices)

윅스 (Wix) 코딩 - 모바일 장치에서만 실행되는 코드 작성하는 방법 (Wix Code: How to Write Code That Only Runs on Mobile Devices)

 

 

 

설명)

 

경우에 따라 모바일 장치에서 사이트를 볼 때만 특정 코드가 실행되기를 원할 수도 있습니다. 이렇게하려면 아래에 설명된 대로 코드가 현재 실행중인 장치의 유형을 확인하는 자바스크립트(JavaScript) 조건문에 해당 코드를 래핑해야합니다.

 

코드 패널 (Code Panel)

모바일 에디터의 코드 패널에 작성한 코드는 모바일 장치에서 사이트를 볼 때만 실행됩니다. 그러나 모바일 에디터에서 볼 수 있는 코드 패널은 데스크톱 에디터에서 볼 수 있는 것과 동일한 코드 패널입니다. 표시되는 에디터에 관계없이 코드 패널에 작성한 코드는 사이트를 보고있는 장치 유형에 관계없이 실행됩니다.

 

속성 패널 (Properties Panel)

위에 설명된 코드 패널과 마찬가지로 모바일 에디터에 표시되는 속성 패널은 데스크톱 에디터에 표시되는 것과 동일한 속성 패널입니다. 따라서 버튼에 대한 onClick과 같은 이벤트 핸들러를 추가하면 해당 이벤트 핸들러는 사이트를 보고있는 장치 유형에 관계없이 실행됩니다.

 

모바일 코드 (Mobile Code)

위에서 언급했듯이 모바일 장치에서만 실행되는 코드를 작성하려면 코드가 현재 실행중인 장치의 유형을 확인하는 자바스크립트(JavaScript) 조건문에 해당 코드를 래핑해야합니다.

 

코드에서 현재 장치 유형을 확인하려면 먼저 wix-window API를 가져와야합니다. 가져오기 명령문은 페이지 코드의 맨 위에 있습니다.

 

 

import wixWindow from 'wix-window';

 

 

그런 다음 장치 유형을 검사하는 조건부에 코드를 래핑해야합니다.

 

if(wixWindow.formFactor === "Mobile"){
  // code that will only run on mobile
} 

 

 

예제 )

예를 들어 페이지에 이미지가 있고 숨겨진 텍스트가 있다고 가정해봅니다. 데스크톱 기기에서 볼 때 방문자가 이미지 위로 마우스를 가져가면 이미지 위에 마우스를 올려놓지 않아도 숨겨진 텍스트가 표시되기를 원합니다. 그러나 휴대기기에서는 마우스 오버링이라는 개념이 없기 때문에 방문자가 이미지를 클릭하면 다시 숨길 때 표시되는 숨겨진 텍스트를 원합니다.

 

따라서 이 예에서는 페이지에 다음과 같은 요소가 있습니다.

 

 

 

 

먼저 속성 패널을 사용하여 hiddenText 요소를 로드시 숨김으로 설정합니다.

 

 

 

속성 패널에서 수행하는 작업은 데스크톱 및 모바일 장치에서 사이트를 볼 때 어떤 일이 발생하는지에 영향을 줍니다. 이 경우 텍스트가 모든 기기에서 숨겨진 상태로 로드되기를 원하므로 더 이상 조치할 필요가 없습니다.

 

다음에는 속성 패널을 사용하여 세 개의 이벤트 핸들러를 이미지 요소에 추가합니다. onMouseIn 및 onMouseOut 이벤트는 데스크톱 장치에 사용됩니다. onClick 이벤트는 모바일 장치에 사용됩니다.

 

 

 

위에서 언급했듯이, 우리는 우선 wix-window API를 가져와야합니다.

 

import wixWindow from 'wix-window';

 

 

이제 이벤트 핸들러에 대한 코드를 작성합니다. mouseIn 이벤트 핸들러에서 숨겨진 텍스트 요소를 나타내는 코드 줄을 작성합니다. mouseOut 이벤트 핸들러에서 텍스트 요소를 숨기는 코드 행을 작성합니다.

 

export function image_mouseIn(event) {
  $w('#hiddenText').show("fade");
}

export function image_mouseOut(event) {
  $w('#hiddenText').hide("fade");
}

 

 

 

mouseIn 및 mouseOut 이벤트는 모바일 장치에서 절대 실행되지 않으므로 다른 방법으로 이러한 장치에서 텍스트를 표시하거나 숨길 수 있습니다. 그게 우리가 onClick 이벤트 핸들러를 사용하는 이유입니다.

 

onClick 이벤트 핸들러에서 텍스트 요소가 숨겨지거나 표시되는지 여부를 토글합니다. 모바일 장치에서만 이 작업을 수행하기를 원하기 때문에 장치 유형을 확인하는 조건 내에서 전환 코드를 래핑합니다. 마우스 오버링은 태블릿뿐만 아니라 휴대 전화에도 적용되지 않으므로 an 이나 (||)를 사용하여 두 경우 모두를 테스트합니다.

 

export function image_click(event) {
  if(wixWindow.formFactor === "Mobile" || wixWindow.formFactor === "Tablet"){
    if($w('#hiddenText').hidden){
      $w('#hiddenText').show("fade");
    }
    else{
      $w('#hiddenText').hide("fade");
    }
  } 
}

 

테스트 (Testing)

코드가 모바일 장치에서 작동하는 방식을 테스트하려면 사이트를 게시하고 게시된 버전을 모바일 장치 또는 모바일 장치 에뮬레이터에서 확인해야 합니다.

 

 

경고 :

사이트를 미리보면 모바일 에디터에서 미리보기를 해도 데스크톱 장치에서 보는 것처럼 항상 작동합니다.

데스크톱 컴퓨터에서 모바일 장치에서 보는 것처럼 사이트를 테스트하기 (To test your site on a desktop machine as if it is being viewed on a mobile device) :

 

1. 귀하의 사이트를 게시합니다.

2. 게시된 사이트를 봅니다.

3. 브라우저의 개발자 도구를 엽니다.

4. 브라우저의 개발자 도구를 사용하여 모바일 장치를 에뮬레이트합니다. (보통 이것은 Toggle device toolbar 또는 Responsive Design Mode와 비슷한 것으로 불려지고 이와 비슷한 

 아이콘을 사용하여 켜집니다)

5. 모바일 장치에있는 것처럼 사이트가 로드되도록 페이지를 새로고칩니다.

 

 

 

 

 

연관된 토픽)

윅스 (Wix) 코딩 - 모바일 에디터 (Wix Code: Working in the Mobile Editor)

윅스 (Wix) 코딩 예제 - 모바일에서만 요소 표시하기 (Wix Code Tutorial: Displaying Elements in Mobile Only)

 

 

윅스 홈페이지 만들기 101

윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index

윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index

 

출처 :

https://support.wix.com/en/article/wix-code-writing-code-that-only-runs-on-mobile-devices