세모튜브

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

유튜브 강좌 : youtu.be/qbncWPR8yMQ ECMAScript는 자바 스크립트를 이루는 코어(Core) 스크립트 언어. ECMAScript를 ES라 줄여 부르고 버전에 따라서 ES뒤에 숫자가 붙는데 아직까지도 가장 많이 쓰이는 ES5는 2009년에 만들어졌고 ES6은 2015년에 만들어져 널리 사용중이다. - 함수 function 어떠한 작업을 할 수 있도록 설계된 블록. 함수의 형태 : 일반함수, ES5, ES6 일반함수 function myFunc1(param1, param2) { // 일반함수 return param1 + param2; }; ES5 var myFunc2 = function (param1, param2) { // ES5 return param1 + param2; }; ES6..

유튜브 강좌 : youtu.be/qbncWPR8yMQ - 연산자 산술 연산자 + : 덧셈 - : 뺄셈 * : 곱셈 ** : 지수연산(ES2016) / : 나눗셈 % : 나머지 ++ : 증가 -- : 감소 피연산자 뒤에 붙여(예: x++) 접미사로 사용한 경우 증가하기 전의 값을 반환합니다. var x = 3; var y = x++; // y = 3, x = 4 console.log(y); console.log(x); 피연산자 앞에 붙여(예: ++x) 접두사로 사용한 경우 증가한 후의 값을 반환합니다. var a = 2; var b = ++a; // a = 3, b = 3 console.log(a); console.log(b); 할당 연산자 = : x = y : x = y += : x += y : x = ..

유튜브 강좌 : youtu.be/-bBsnpC3Gtk - 주석처리 주석 2가지 방식 한줄씩 처리 => // 사용 문단 처리 => /* ...문단내용 ... */ 단축키 Alt + c //한줄 주석처리 /* 여기서부터 문단 주석이 시작됩니다. 가자 어디로 들로 산으로 여기가 문단 주석의 끝입니다. */ - 콘솔명령 console.log("콘솔에 log를 출력합니다."); console.info('콘솔에 info를 출력합니다.'); console.warn("콘솔에 warnning을 출력합니다."); console.error("콘솔에 error를 출력합니다."); - 변수(variable) 변수 선언 규칙 숫자로 시작할수 없습니다. 특수문자를 사용할수 없습니다.(단, $,_는 가능) 대소문자 구분합니다. (A..

유튜브 강좌 : youtu.be/FGnI5kezdO0 - 위챗 미니프로그램 프로젝트는 Applet과 여러 Pages로 구성되어진다. Applet의 주요 구성은 3개의 파일로 구성되며 프로젝트의 루트 디렉토리에 존재해야 합니다. Applet 필수여부 app.js 예 Applet 자바스크립트 app.json 예 미니프로그램 공통 설정 app.wxss 아니오 미니프로그램 공통 스타일 시트 Page의 주요 구성은 4개의 파일로 구성되며 사용자 정의에 따라 디렉토리에 존재한다. Page 필수여부 페이지명.js 예 Page 자바스크립트 페이지명.json 아니오 Page 설정 페이지명.wxml 예 Page 뷰 페이지명.wxss 아니오 Page 스타일 시트 - 위챗 미니프로그램 프로젝트의 LifeCycle은 다음과 같..

유튜브 강좌 : 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(스타일시트)가 필요하다. 먼저 in..

유튜브 강좌 : youtu.be/GM9STmB-ddc - 미니프로그램 디렉토리 구조 -> (3) 파일관리자 열기 선택하면 디렉토리 구조를 확인할수 있다. 기본적으로 루트 디렉토리에 배치하는 프로젝트 파일과 - app.js : 미니프로그램 로직 스크립트 - app.json : 미니프로그램의 구성에 사용되며 페이지 경로, 인터페이스 동작, 네트워크 시간 초과 및 상단/하단 설정등을 설정. - app.wxss : 미니프로그램 공통 스타일 시트 (웹페이지의 CSS의 역활) - project.config.json : 경로설정, 컴파일타입, lib버젼, appid, 패키지 구성 옵션, 디버깅 옵션등 프로젝트의 다양한 구성을 설정. 여러개의 페이지를 구성하는 4개의 파일이 각 페이지 폴더안에 구성되어 있다. - pa..

유튜브 강좌 : youtu.be/W7h0_6ms_do - 위챗 미니프로그램 개발툴 인터페이스 관리창에는 4가지 프로젝트 개발환경을 선택할수있다. -> (1) 미니 프로그램을 선택 하고 -> (2) 추가를 선택 ( 프로젝트를 New 또는 Import 할수 있다. ) -> (3) New 선택 또는 다른 프로젝트를 Import 할수 있다. 프로젝트명과 경로는 필요에 따라 변경하면된다. -> AppID는 (4) Test Account를 사용하자 (정식 출시를 위해서는 AppID가 반드시 필요. 추후 다시 설명) -> (5) 미니프로그램 선택 -> (6) 자바스크립트 선택 -> (7) 생성 개발툴 메인 인터페이스 (8) 메뉴 표시 줄 - 설명은 생략. (9) 도구 모음 (10) 시뮬레이터 (11) 편집기 (12)..

유튜브 강좌 : youtu.be/hvO17kpdny8 - 위챗 미니프로그램 개발툴 설치 개발자 사이트 : developers.weixin.qq.com에 접속 -> (0) 文档(문서) 선택 交流专区 (커뮤니티) : 미니프로그램 교류, 미니게임 교류, 위챗결제, 기업위챗 服务平台 (서비스센터) : 각종플랫폼서비스, 비용, 기술지원, 지원Tool 등을 소개. 微信学院 (아카데미) : 제품분석, 코딩기술, 운영, 마케팅,해외지원등을 지원. 文档 (문서) : - 小程序 (미니프로그램) (4) 안정화 버전 및 OS선택 -> 다운로드 후 설치 -> 개발툴 실행 -> 로그인 ( 위챗앱으로 QR코드 스캔 ) 처음 실행시 QR 코드가 나온다. 먼저 위챗을 열고 "QR 코드 스캔"을 이용해 스캔한뒤 (5) 确认登录(로그인확..