위챗 미니프로그램 : Hello World 심플하게 바꾸기

유튜브 강좌 : youtu.be/GM9STmB-ddc

 

- 심플한 Hello World 만들기

최소한 소스를 이용해 ‘Hello World’를 출력해보자

소스 트리구조에서 오른쪽버튼을 이용해 삭제 정리하면서 따라해보자

프로젝트 루트 디렉토리에 App등록을 위한 최소한의 파일이 필요하다.

-> (1) app.json에 사용할 페이지를 등록해야한다.

-> (2) app.js에는 기본 App 생성자.

-> (3) index.js에는 Page 생성자.

-> (4) index.wxml에는 Page 템플릿. 

여기까지만 하면 시뮬레이터에 ‘Hello World’가 출력된다.

- Hello World 글자 스타일 바꾸어 보기

Hello World 글자 스타일을 바꾸기 위해서는 wxss(스타일시트)가 필요하다.

먼저 index폴더 -> 오른쪽버튼 -> New WXSS -> index.wxss생성.

index.wxss 아래 소스 삽입

.mystyle {
  color: red;
  font-size: 25px;
}

index.wxml 소스 수정

<text class="mystyle">Hello World</text>

=> 컴파일 실행

 

- 상단 네이게이션 바 추가해보기

네이게이션 바를 바꾸기 위해서는 app.json에 다음코드를 추가하자.

{
  "pages": [
    "pages/index/index"
  ],
  "window": {   
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#00f",
    "navigationBarTitleText": "My App",
    "navigationBarTextStyle": "white"
  }
}

=> 컴파일 실행

 

- 하단 탭바 추가해보기

app.json의 “pages” 2번째 탭에 연결시킬 페이지를 추가하면 자동으로 4개의 페이지 파일이 생성되므로 확인해 주세요.

{
  "pages": [
    "pages/index/index",
    "pages/myinfo/myinfo"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#00f",
    "navigationBarTitleText": "My App",
    "navigationBarTextStyle": "white"
  },
  "tabBar": {
    "list": [{
        "pagePath": "pages/index/index",
        "text": "Hello World"
      },{
        "pagePath": "pages/myinfo/myinfo",
        "text": "나의정보"
      }]
  }
}

myinfo.wxml 소스 수정

<text>나의정보</text>

=> 컴파일 실행

아래에 탭바가 추가되어 나온다.

 

- 위챗 Components를 사용해 나의정보 가져오기

Components를 이용해 나의정보를 가져오려면 Button의 open-type / getUserInfo를 이용해보자.

myinfo.js파일을 필요없는 부분은 모두 정리하고 아래 코드로 수정한다.

Page({
  data: {
    hasUserInfo : false,
    buttonText: "가져오기",
    userInfo: null
  },
  bindGetUserInfo: function (e) {
    this.setData({
      hasUserInfo: true,
      buttonText: "클리어",
      userInfo: e.detail.userInfo
    })
  },
  bindClearUserInfo: function(e) {
    this.setData({
      hasUserInfo: false,
      buttonText: "가져오기",
      userInfo: null
    })
  }
})

myinfo.wxml파일도 아래와 같이 수정하자

<text>나의정보</text>
<button wx:if="{{!hasUserInfo}}" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo"> {{buttonText}} </button>
<button wx:else bindtap="bindClearUserInfo"> {{buttonText}} </button>
<view>nickName : {{userInfo.nickName}}</view>
<view>gender : {{userInfo.gender}}</view>
<view>language : {{userInfo.language}}</view>
<view>city : {{userInfo.city}}</view>
<view>province : {{userInfo.province}}</view>

=> 컴파일 실행

- 마무리

간단한 소스에 필요한 부분을 추가하며 소스 구조에 대해 살펴 보았다.

삭제한 소스부분은 추후에 필요하지만 소스구조를 이해하기 위해서이다.