위챗 미니프로그램 가이드 : Basic Components

유튜브 강좌 : youtu.be/nJD_rrGOJMY

 

- resource폴더 만들어 이미지 가져오기

- wxss import해서 사용하기

사용법 : @import "경로/파일.wxss";

/* common.wxss */

/* block */
.block {
  display: block;
}


/* flex */
.flex {
  display: flex;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex-1 {
	flex: 1;
}
.flex-2 {
	flex: 2;
}
.dir-col {
  flex-direction: column;
}


/* background-color */
.bg-red {
  background-color: red;
}
.bg-green {
  background-color: green;
}
.bg-blue {
  background-color: blue;
}
.bg-yellow {
  background-color: yellow;
}
.bg-gray {
  background-color: gray;
}
.bg-wheat {
  background-color: wheat;
}
.bg-whitesmoke {
  background-color: whitesmoke;
}



/* 여백 */
.margin-sm {
	margin: 20rpx;
}
.padding-10 {
	padding: 10rpx;
}
.padding-sm {
	padding: 20rpx;
}



/* section */
.section-title {
  font-size: 18px;
  font-weight: bold;
  color: white;
  background-color: black;
  padding: 5px;
}
.section {
  background-color: white;
  padding: 10px;
  margin: 3px 0;
}
.item-title {
  font-size: 16px;
  font-weight: bold;
  background-color: white;
  padding-bottom: 10px;
}

.item {
  width: 100px;
  height: 100px;
  color: black;
  display: flex;
  justify-content: center;
  align-items: center;
}

 

- Icon

type : 아이콘 유형 success , success_no_circle , info , warn , waiting , cancel , download , search, clear

size :  아이콘 사이즈

color : 아이콘 색상

  data: {
// Icons    
    iconArray: [
      { size:20, color:'red' },
      { size:30, color:'orange' },
      { size:40, color:'yellow' },
      { size:50, color:'green' },
      { size:60, color:'blue' },
      { size:70, color:'purple' },
    ],
    iconSize: [10,20,30,40,50,60],
    iconColor: ['red','orange','yellow','green','blue','purple'],
    iconType: ['success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear'],
  },

<!-- Icon -->
<view class="section-title">
  <text>Icon</text>
</view>

<view class="section">
  <view class="item-title">아이콘 크기/색</view>
  <block wx:for="{{iconArray}}" wx:key="*this">
    <icon type="success" size="{{item.size}}" color="{{item.color}}"/>
  </block>
</view>
<view class="section">
  <view class="item-title">아이콘 종류</view>
  <block wx:for="{{iconType}}" wx:key="*this">
    <icon type="{{item}}" size="35"/>
  </block>
</view>

@import "../lib/common.wxss";


page {
  background-color: ghostwhite;
  font-size: 14px;
}

 

 

- Progress

percent : 백분율 0 ~ 100

show-info : 진행률 표시 줄의 오른쪽에 백분율 표시

stroke-width : 진행률 표시 줄의 너비 (px)이며 생략시 기본값 : 6px

color : 진행률 표시 줄 색상

active : 진행률 표시 줄 애니메이션

<!-- Progress -->
<view class="section-title">
  <text>Progress</text>
</view>

<view class="section">
  <view class="item-title">Progress</view>
  <progress percent="20" show-info />
  <progress percent="40" stroke-width="12" />
  <progress percent="60" color="pink" />
  <progress percent="80" active />
</view>

progress {
  margin: 5px;
}

 

 

- Button

size : 버튼 사이즈 default , mini 이며 생략시 default

type : 버튼 스타일 primary, default, warn이며 생략시 default

plain : 버튼이 비어 있고 배경색이 투명한지 여부. 기본값 false

disabled : 비활성화 여부. 기본값 false

loading : 로드아이콘 표시 여부. 기본값 false

Page({

  data: {
// Button
    btnSize: 'default',
    disabled: false,
    plain: false,
    loading: false,
  },

  onLoad: function (options) {
  },

// Button
  setSize: function (e) {
    this.setData({
      btnSize: this.data.btnSize == 'default' ? 'mini' : 'default',
    })
  },  
  setDisabled: function (e) {
    this.setData({
      disabled: !this.data.disabled
    })
  },  
  setPlain: function (e) {
    this.setData({
      plain: !this.data.plain
    })
  },
  setLoading: function (e) {
    this.setData({
      loading: !this.data.loading
    })
  },
})

<!-- Button -->
<view class="section-title">
  <text>Button</text>
</view>

<view class="section">
  <view class="item-title">Button Type</view>
  <button type="default" size="{{btnSize}}" loading="{{loading}}" plain="{{plain}}"
          disabled="{{disabled}}"> default </button>
  <button type="primary" size="{{btnSize}}" loading="{{loading}}" plain="{{plain}}"
          disabled="{{disabled}}"> primary </button>
  <button type="warn" size="{{btnSize}}" loading="{{loading}}" plain="{{plain}}"
          disabled="{{disabled}}"> warn </button>
</view>

<view class="section">
  <view class="item-title">Change Property</view>
  <button bindtap="setSize">Size {{btnSize}}</button>
  <button bindtap="setDisabled">Disabled {{disabled}}</button>
  <button bindtap="setPlain">Plain {{plain}}</button>
  <button bindtap="setLoading">loading {{loading}}</button>
</view>

button {
  margin: 5px;
}

 

 

- CheckBox

checkbox-group

   bindchange : 변경 이벤트가 트리거됩니다.

value : 변경 이벤트가 트리거시 전달하는 값.

checked : 현재 선택되어 있는지 여부

  data: {
// CheckBox    
    checkBoxArray: [
      {name: '한국', value: 'Kor'},
      {name: '중국', value: 'Chn', checked: 'true'},
      {name: '일본', value: 'Jpn'},
    ],
    checkedValue: ['Chn'],
  },
  
  
  //checkBox  
  checkboxChange: function(e) {
    this.setData({
      checkedValue: e.detail.value,
    })
  },

<!-- CheckBox -->
<view class="section-title">
  <text>CheckBox</text>
</view>

<view class="section">
  <view class="item-title">CheckBox</view>
  <checkbox-group bindchange="checkboxChange">
    <label wx:for="{{checkBoxArray}}" wx:key="*this">
      <checkbox value="{{item.value}}" checked="{{item.checked}}"/>{{item.name}}
    </label>
  </checkbox-group>
</view>

<view class="section">
  <view class="item-title">{{checkedValue}}</view>
</view>

 

 

- Radio

radio-group

   bindchange : 변경 이벤트가 트리거됩니다.

value : 변경 이벤트가 트리거시 전달하는 값.

checked : 현재 선택되어 있는지 여부

// Radio
    radioArray: [
      {name: '한국', value: 'Kor'},
      {name: '중국', value: 'Chn', checked: 'true'},
      {name: '일본', value: 'Jpn'},
    ],
    radioValue: ['Chn'],  
    
    
    
//radio
  radioChange: function(e) {
    this.setData({
      radioValue: e.detail.value,
    })
  },    

<!-- Radio -->
<view class="section-title">
  <text>Radio</text>
</view>

<view class="section">
  <view class="item-title">Radio</view>
  <radio-group bindchange="radioChange">
    <label wx:for="{{radioArray}}" wx:key="*this">
      <radio value="{{item.value}}" checked="{{item.checked}}"/>{{item.name}}
    </label>
  </radio-group>
</view>

<view class="section">
  <view class="item-title">{{radioValue}}</view>
</view>

 

 

- Input

value : 초기 내용

auto-focus : 자동 초점

type : 입력 유형 text, number, idcard, digit 기본값은 text

placeholder : 입력 상자가 비었을 때 표시되는 내용.

maxlength : 최대 입력 길이, -1로 설정하면 최대 길이는 제한되지 않습니다.

bindinput : 사용자가 키보드를 누를 때 트리거됩니다.

password : 비밀번호 유형인지 여부.

// input
    inputValue: '',
    
    
//input
  bindKeyInput: function (e) {
    this.setData({
      inputValue: e.detail.value
    })
  },    

<!-- Input -->
<view class="section-title">
  <text>Input</text>
</view>

<view class="section">
  <view class="item-title">auto-focus</view>
  <!-- <input class="ui-input" auto-focus placeholder="Auto focus"/> -->
  <view class="item-title">maxlength="10"</view>
  <input class="ui-input" maxlength="10" placeholder="최대10자" />
  <view class="item-title">실시간 입력값 : {{inputValue}}</view>
  <input class="ui-input" maxlength="10" bindinput="bindKeyInput" placeholder="최대10자 // 실시간 입력값 처리"/>
  <view class="item-title">password type="text"</view>
  <input class="ui-input" password type="text" placeholder="password" />
  <view class="item-title">type="text"</view>
  <input class="ui-input" type="text" placeholder="문자 키보드가 나옵니다." />
  <view class="item-title">type="number"</view>
  <input class="ui-input" type="number" placeholder="숫자 키보드가 나옵니다." />
  <view class="item-title">type="digit"</view>
  <input class="ui-input" type="digit" placeholder="소수점이 있는 숫자 키보드가 나옵니다." />
</view>

.ui-input {
  background-color: #dddddd;
  height: 40px;
  margin-bottom: 15px;
}

 

 

- Label

양식의 가용성을 향상.

// Label
    labelArray: [
      {name: '한국', value: 'Kor'},
      {name: '중국', value: 'Chn', checked: 'true'},
      {name: '일본', value: 'Jpn'},
    ],
    labelValue: ['Chn'],    
    
    
    
//label
  labelChange: function (e) {
    var checked = e.detail.value
    var changed = {}
    for (var i = 0; i < this.data.labelArray.length; i++) {
      if (checked.indexOf(this.data.labelArray[i].name) !== -1) { //몇번째위치? -1:없음
        changed['labelArray[' + i + '].checked'] = true
      } else {
        changed['labelArray[' + i + '].checked'] = false
      }
    }
    this.setData(changed)
  },

<!-- Label -->
<view class="section-title">
  <text>Label : 양식의 가용성을 향상</text>
</view>

<view class="section">
  <view class="item-title">label 미사용 : checkbox만 클릭기능</view>
  <checkbox-group bindchange="labelChange">
    <view wx:for="{{labelArray}}" wx:key="*this">
      <!-- <label> -->
        <checkbox value="{{item.name}}" checked="{{item.checked}}"></checkbox>
        <text wx:if="{{item.checked}}">(====>) </text>
        <text wx:else>(>) </text>
        <text>{{item.name}}</text>
      <!-- </label> -->
    </view>
  </checkbox-group>
</view>
<view class="section">
  <view class="item-title">label 사용 : 항목전체 클릭기능</view>
  <checkbox-group bindchange="labelChange">
    <view wx:for="{{labelArray}}" wx:key="*this">
      <label>
        <checkbox value="{{item.name}}" checked="{{item.checked}}"></checkbox>
        <text wx:if="{{item.checked}}">(====>) </text>
        <text wx:else>(>) </text>
        <text>{{item.name}}</text>
      </label>
    </view>
  </checkbox-group>
</view>

 

 

- Picker

mode : 픽커유형 selector, multiSelector, time, date, region이면 기본은 selector.

bindchange : 값이 변경되면 변경 이벤트가 트리거됩니다.

    event.detail.value값 참조.

mode = multiSelector일때

    bindcolumnchange : 열이 변경되면 트리거됩니다.

    event.detail.column값 참조.   

// Picker
    onePickerIndex: 0,
    onePickerArray: ['한국', '중국', '일본'],
    multiPickerIndex: [0,0],
    multiPickerArray: [
      ['아시아', '아프리카' ,'오세아니아', '유럽', '북아메리카', '남아메리카'],
      ['한국', '중국', '일본', '기타']
    ],
    time: '12:01',
    date: '2016-09-01',
    //region: ['Guangdong Province', 'Guangzhou', 'Haizhu District'],
    region: ['上海市', '上海市', '闵行区'],
    
    
    
    
    
//picker
  bindOnePickerChange: function (e) {
    console.log('one picker : ', e.detail.value)
    this.setData({
      onePickerIndex: e.detail.value
    })
  },  
  bindMultiPickerChange: function (e) {
    console.log('multi picker : ', e.detail.value);
    this.setData({
      multiPickerIndex: e.detail.value
    })
  },
  bindMultiPickerColumnChange: function (e) {
    console.log('multi picker => column : ', e.detail.column, ',  sub : ', e.detail.value);
    var data = {
      multiPickerArray: this.data.multiPickerArray,
      multiPickerIndex: this.data.multiPickerIndex
    };
    data.multiPickerIndex[e.detail.column] = e.detail.value;
    switch (e.detail.column) {
      case 0:
        switch (data.multiPickerIndex[0]) {
          case 0:
            data.multiPickerArray[1] = ['한국', '중국', '일본', '기타'];
            break;
          case 1:
            data.multiPickerArray[1] = ['코모로', '지부티', '케냐', '기타'];
            break;
          case 2:
            data.multiPickerArray[1] = ['괌', '뉴질랜드', '피지', '기타'];
            break;
          case 3:
            data.multiPickerArray[1] = ['영국', '잉글랜드', '노르웨이', '기타'];
            break;
          case 4:
            data.multiPickerArray[1] = ['미국', '캐나다', '멕시코', '기타'];
            break;
          case 5:
            data.multiPickerArray[1] = ['가이아나', '베네수엘라', '볼리비아', '기타'];
            break;
        }
        data.multiPickerIndex[1] = 0;
        break;
    }
    this.setData(data);
  },
  bindDateChange: function(e) {
    console.log('date : ', e.detail.value)
    this.setData({
      date: e.detail.value
    })
  },
  bindTimeChange: function(e) {
    console.log('time : ', e.detail.value)
    this.setData({
      time: e.detail.value
    })
  },
  bindRegionChange: function (e) {
    console.log('region : ', e.detail.value)
    this.setData({
      region: e.detail.value
    })
  },    

<!-- Picker -->
<view class="section-title">
  <text>Picker</text>
</view>

<view class="section">
  <view class="item-title">One Picker</view>
  <picker bindchange="bindOnePickerChange" value="{{onePickerIndex}}" range="{{onePickerArray}}">
    <view>
      선택하세요 : {{onePickerArray[onePickerIndex]}}
    </view>
  </picker>
</view>

<view class="section">
  <view class="item-title">Multi Picker, mode="multiSelector"</view>
  <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiPickerIndex}}" range="{{multiPickerArray}}">
    <view>
      선택하세요 : {{multiPickerArray[0][multiPickerIndex[0]]}}，{{multiPickerArray[1][multiPickerIndex[1]]}}
    </view>
  </picker>
</view>

<view class="section">
  <view class="item-title">Picker, mode="time"</view>
  <picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
    <view>
      선택하세요 : {{time}}
    </view>
  </picker>
</view>

<view class="section">
  <view class="item-title">Picker, mode="date"</view>
  <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
    <view>
      선택하세요 :  {{date}}
    </view>
  </picker>
</view>

<view class="section">
  <view class="item-title">Picker, mode="region"</view>
  <picker mode="region" bindchange="bindRegionChange" value="{{region}}" custom-item="{{customItem}}">
    <view>
      선택하세요 : {{region[0]}}, {{region[1]}}, {{region[2]}}
    </view>
  </picker>
</view>

 

 

- Slider

step : 단계 크기. 기본값은 1.

show-value : 현재 값 표시 여부

min : 최소값

max : 최대값

<!-- Slider -->
<view class="section-title">
  <text>Slider</text>
</view>

<view class="section">
  <view class="item-title">step="10"</view>
  <slider step="10"/>
</view>

<view class="section">
  <view class="item-title">show-value</view>
  <slider show-value/>
</view>

<view class="section">
  <view class="item-title">min="50" max="200"</view>
  <slider min="50" max="200" show-value/>
</view>

 

 

- Switch

checked : 선택 여부 기본값은 false.

type : switch ,checkbox이며 기본값은 switch.

<!-- Switch -->
<view class="section-title">
  <text>Switch</text>
</view>

<view class="section">
  <view class="item-title">default</view>
  <switch checked="{{true}}"/>
</view>

<view class="section">
  <view class="item-title">type="checkbox"</view>
  <switch type="checkbox" checked="{{false}}"/>
</view>

 

 

- TextArea

auto-height : 높이가 자동으로 증가. 기본값은 false.

<!-- TextArea -->
<view class="section-title">
  <text>TextArea</text>
</view>

<view class="section">
  <view class="item-title">auto-height</view>
  <textarea class="ui-textarea" auto-height />
</view>

<view class="section">
  <view class="item-title">fixed-height</view>
  <textarea class="ui-textarea-fixed-height" />
</view>

.ui-textarea {
  background-color: #dddddd;
  padding: 5px;
}

.ui-textarea-fixed-height {
  height: 100px;
  background-color: #dddddd;
  padding: 5px;
}

 

 

- Image

src : 이미지 리소스 주소

mode : 이미지 자르기 및 확대 / 축소.

  scaleToFill : 너비와 높이가 요소를 채우도록 완전히 늘어납니다.

  aspectFit : 긴면을 완전히 표시하며 화면비를 유지. 즉, 사진을 완전히 표시 할 수 있습니다.

  aspectFill : 짧은면을 완전히 표시하며 화면 비율을 유지하기때문에 다른 방향은 짤립니다.

  widthFix : 너비는 변경되지 않고 높이는 자동으로 변경되며 종횡비는 변경되지 않습니다.

  top, bottom, center, left, right, top left, top right,bottom left,bottom right : 확대하지않고 각방향을 출력

// Image
    // imageUrl: 'https://img.hankyung.com/photo/201909/AKR20190908061100007_01_i.jpg',
    imageUrl_w: '/resource/image/4.png',
    imageUrl_h: '/resource/image/fit.png',
    imageArray: [{
      mode: 'scaleToFill',
      text: '너비와 높이가 채우도록 늘어납니다'
    }, {
      mode: 'aspectFit',
      text: '긴면을 완전히 표시.'
    }, {
      mode: 'aspectFill',
      text: '짧은면을 완전히 표시.'
    }, {
      mode: 'widthFix',
      text: '너비에 맞추며 높이는 자동 변경.'
    }, {
      mode: 'top',
      text: '확대하지 말고 상단 표시'
    }, {
      mode: 'bottom',
      text: '확대하지 말고 아래쪽 표시'
    }, {
      mode: 'center',
      text: '확대하지 말고 중간 표시'
    }, {
      mode: 'left',
      text: '확대하지 말고 왼쪽 표시'
    }, {
      mode: 'right',
      text: '확대하지 말고 오른쪽 표시'
    }, {
      mode: 'top left',
      text: '확대하지 말고 왼쪽 상단 표시'
    }, {
      mode: 'top right',
      text: '확대하지 말고 오른쪽 상단 표시'
    }, {
      mode: 'bottom left',
      text: '확대하지 말고 왼쪽 하단 표시'
    }, {
      mode: 'bottom right',
      text: '확대하지 말고 오른쪽 하단 표시'
    }],

<!-- Image -->
<view class="section-title">
  <text>Image</text>
</view>

<block wx:for-items="{{imageArray}}" wx:key="*this">
  <view class="section">
    <view class="item-title">{{item.mode + ' : ' + item.text}}</view>
      <view class="flex">
        <image class="flex-1 padding-10 bg-green" mode="{{item.mode}}" src="{{imageUrl_w}}"></image>
        <image class="flex-1 padding-10 bg-blue" mode="{{item.mode}}" src="{{imageUrl_h}}"></image>
      </view>
  </view>
</block>