세모튜브

유튜브강좌 : youtu.be/w1i2X8dDOJM github : https://github.com/semotube/korTourInfo semotube/korTourInfo Contribute to semotube/korTourInfo development by creating an account on GitHub. github.com 2가지 부분에서 처리하는 방법을 살펴보자 1. 개발툴에서 않될때 2. 테스트기기에서 않될때 개발툴에서 Ver 1.02.2 기준 저번 앱만들기 소스에서 외부 통신을 위해 wx.request() API를 이용해서 아래처럼 외부 URL를 이용했다. const url = "http://api.visitkorea.or.kr/openapi/service/rest/KorServic..

유튜브강좌 : www.youtu.be/D2y870aeOeQ github : https://github.com/semotube/korTourInfo semotube/korTourInfo Contribute to semotube/korTourInfo development by creating an account on GitHub. github.com tabBar 만들기 - 홈 : 첫페이지 - 인기 행사, 최근 행사, 최신 숙박업체를 표시. - 검색 : 서비스분류, 대분류, 중분류, 소분류등의 조건을 받아 결과를 표시 (매뉴얼 참조) - 나 : 개인정보, 분류코드 처리 - 페이지 생성 "pages":[ "pages/index/index", "pages/search/search", "pages/user/user..

유튜브강좌 : www.youtu.be/l0NP7U43meA github : https://github.com/semotube/korTourInfo semotube/korTourInfo Contribute to semotube/korTourInfo development by creating an account on GitHub. github.com - MIT라이센스 UI 라이브러리 이용하기 사이트 : https://github.com/explore 사이트로 이동후 "小程序 ColorUI"검색어를 넣고 검색한다. 오른쪽 녹색버튼을 눌러 다운로드한다. 압축을 푼다 3개의 폴더가 있는데 Colorui-UniApp : vue 예제 demo : 小程序 예제 template : 小程序 템플릿 소스 우선 샤청쉬 개발툴..

유튜브 강좌 : youtu.be/bKBYq-nXqhU - API 미니프로그램은 네트워크, 멀티미디어, 파일, 데이터 스토리지, 위치, 장치등의 API 및 인터페이스를 제공합니다. API의 처리되면 CALLBACK 함수가 호출됩니다. CALLBACK 함수 - success() : 성공에 대한 콜백 함수 - fail() : 실패에 대한 콜백 함수 - complete() : 호출 종료시 콜백 함수 (성공/실패 관계없이 실행) - System Information 시스템 정보 얻기. wx.getSystemInfo() wx.getSystemInfoSync() data: { systemInfo: null, systemInfoSync: null, }, getSystemInfo() { let that = this; c..

유튜브 강좌 : 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: g..

유튜브 강좌 : youtu.be/5JZCNbjRgIQ - View Containers view 미니프로그램의 모든 구성 요소는 view를 기반으로 합니다. view는 HTML 요소와 비슷한 속성을 가지고 있습니다. /* componets.wxss */ page { background-color: ghostwhite; font-size: 14px; } .bg-red { background-color: red; } .bg-green { background-color: green; } .bg-blue { background-color: blue; } .flex { display: flex; } .flex-1 { flex: 1; } .dir-col { flex-direction: column; } .paddin..

유튜브 강좌 : youtu.be/6h_7w3shGGs flex === flexbox (레이아웃) 위챗 미니프로그램은 flexbox 레이아웃을 이용하여 컴포넌트를 배치합니다. flexbox는 화면에 적합한 너비와 높이의 레이아웃을보다 쉽게 설정하여 사용할수 있습니다. 부모 요소를 Flex Container(플렉스 컨테이너)라고 부르고, 자식 요소들을 Flex Item(플렉스 아이템)이라고 부릅니다. container가 flex의 영향을 받는 노란색 공간이고 설정된 속성에 따라 각각의 item들이 어떤 형태로 배치되는 것입니다. Flex의 속성은 아래 2가지로 구분해서 알아보겠습니다. - 컨테이너에 적용하는 속성 - 아이템에 적용하는 속성 경계 속성 : margin, padding, border 위 이미지와..

유튜브 강좌 : youtu.be/_ktOptKv-JE - WXSS WXSS (WeiXin Style Sheets)는 WXML 구성 요소 스타일을 설명하기위한 매우 유사한 CSS 스타일 언어입니다. CSS의 기능을 대부분 갖추고 있으며, WeChat적합하도록 CSS를 확장. WXML 구성 요소를 표시하는 방법을 결정. wxss 사용법 Selector { Property:Value; Property:Value; ... } - Selector 종류 및 사용법 Selector 예시 해석 .class .my-class class="my-class"인 모든 components #id #my-id id="my-id"인 모든 components element view 모든 "view" components element..

유튜브 강좌 : youtu.be/q6p8hHEYilA - WXML 웹 개발을 하기위해서는 일반적으로 HTML을 사용하여 레이아웃을 만들고 CSS를 사용하여 스타일을 정의합니다. WeChat Mini Program은 WXML 및 WXSS을 제공합니다. WXML(WeiXin Markup Language)은 HTML과 유사한 태그언어로, 구성요소와 소스시스템을 결합하여 페이지를 빌드 할 수 있습니다. WXSS (WeiXin Style Sheets)는 WXML 구성 요소 스타일을 설명하기위한 매우 유사한 CSS 스타일 언어입니다. js소스에서 wxml에 데이타 가져오기 //wxml.js Page({ data: { message : 'Hello World', }, onLoad: function (options) ..

- Math 수학적인 상수와 함수를 위한 속성과 메서드를 가진 내장 객체. Math.E : 오일러의 상수이며 자연로그의 밑.약 2.718. Math.LN2 : 2의 자연로그.약 0.693. Math.LN10 : 10의 자연로그.약 2.303. Math.LOG2E : 밑이 2인 로그 E.약 1.443. Math.LOG10E : 밑이 10인 로그 E.약 0.434. Math.PI : 원의 둘레와 지름의 비율.약 3.14159. Math.SQRT1_2 : ½의 제곱근.약 0.707. Math.SQRT2 : 2의 제곱근.약 1.414. console.log(Math.E); //2.718281828459045 console.log(Math.LN2); //0.6931471805599453 console.log(Ma..