세모튜브

유튜브 강좌 : youtu.be/UIUgCOm75TA 우선 detailImage 오퍼레이션의 매뉴얼을 확인해봐야 한다. 기본적으로 요청 파라메터는 아래와 같다. 단, 음식점 타입일경우 컨텐츠 이미지 받은 다음 음식 이미지를 더 요구하자. 소스처리 onLoad: function (options) { console.log("options : ", options); this.detailCommon(options.contentid, options.contenttypeid); this.detailIntro(options.contentid, options.contenttypeid); this.detailImage(options.contentid, options.contenttypeid); }, . . . //이미지..

유튜브 강좌 : youtu.be/y0hXsEM2Zp8 우선 detailIntro 오퍼레이션의 매뉴얼을 확인해봐야 한다. 기본적으로 요청 파라메터는 특별한것은 없고 contentId, contentTypeId를 둘다 보내야 한다. 단, 아래 처럼 응답에 대해서는 contentTypeId 에 따라서 항목이 달라진다. 이부분을 을 이용해서 레이아웃을 다르게 표현해야 한다. contentTypeId = 12 : 관광지 contentTypeId = 14 : 문화시설 contentTypeId = 15 : 행사/공연/축제 contentTypeId = 25 : 여행코스 contentTypeId = 28 : 레포츠 contentTypeId = 32 : 숙박 contentTypeId = 38 : 쇼핑 contentType..

유튜브 강좌 : youtu.be/lZIDBWwUl2E 리스트에서 항목을 선택하면 세부정보를 보여주는 페이지를 구현해 보자 기본적으로 아래와 같이 처리하는것으로 하자. 별표아이콘 : 나의 즐겨찾기 on/off 공통정보 : detailCommon 오퍼레이션 이용 소개정보 : detailIntro 오퍼레이션 이용 추가이미지 : detailImage 오퍼레이션 이용 메뉴얼 참조 페이지 생성 "pages/search/detail/detail" 3가지 Tab처리 - 공통정보, 소개정보, 추가이미지 소스처리 // pages/search/detail/detail.js const api = require("../../../utils/api.js"); const util = require("../../../utils/ut..

유튜브 강좌 : youtu.be/MJYEUrchRsQ 서버에서 오는 항목에는 아래 이미지 처럼 html 데이터들도 존재한다. wxParse 미니프로그램에서 html를 출력하기 위해서 지원하는 parse가 있다. 다운로드 및 사용법 : https://github.com/icindy/wxParse 적용하기 우선 다운받은 소스를 아래 이미지 처럼 루트에 복사를 하자. 소스처리 detail 페이지 생성 : "pages/search/detail/detail" 상단에 WxParse를 선언해주고 본문에 WxParse.wxParse(변수명, 타입, html 데이타, this 또는 that, 이미지padding) 호출해서 html 데이타를 변환해서 변수에 저장한다. - imagePadding은 화면width값과 조절에서..

유튜브 강좌 : youtu.be/injntWItruQ WXS (WeiXin Script) : WXML와 함께 사용되는 스크립트 언어이다. 기본사용법은 아래 사이트를 참고. 참고사이트 : https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxs/ 날짜부분을 바꾸는데 활용해보자 우선 검색페이지(search.js)에서 서버에서 보내온 item을 보면 아래와 같다. 소스코드에 console.log("searchKeyword() item : ",item) 를 추가해서 콘솔에서 확인해 보면 createdtime: 20160429103816 => 생성날짜와시간인데 우린 이부분을 년월일만 사용하도록하자. 현재 아래 이미지 처럼 나온다. 아래 이미지 처럼 ..

유튜브 강좌 : youtu.be/3atwE76ax3g 조건식을 만들어 서버에 요청하기 - 첫화면 onShow()에서 "통합검색" "request" 처리하기 onShow() { let needSearch = false; if(this.data.tabArray[0].categoryArray[0].length === 0 || this.data.tabArray[0].areaArray[0].length === 0) { //재확인 this.initData(); //배열 초기화 후 다시 한번 확인. if(this.data.tabArray[0].categoryArray[0].length || this.data.tabArray[0].areaArray[0].length) needSearch = true; else retu..

유튜브강좌 : youtu.be/4AOaL0HnD48 기본 레이아웃 조건버튼 클릭시 Tab 정의 기본 변수 선언 - Tab의 정의 : class Tab {...} - 통합검색 : tabArray: [0] - 행사검색 : tabArray: [1] - 숙박검색 : tabArray: [2] //search.js const api = require("../../utils/api.js"); const def = require("../../utils/def.js"); const util = require("../../utils/util.js"); const code = require("../../utils/code.js"); const app = getApp() class Tab { constructor(name) ..

유튜브강좌 : youtu.be/cmjkpETaLmw 우선 관광정보API 가이드 파일내에 한국관광공사_서비스분류코드_vx.x.xlsx파일을 참조한다. 참조) 한국관광공사_서비스분류코드_v3.2_160623.xlsx 코드종류 - 관광타입 코드 : 전체, 관광지, 문화시설, 행사/공연/축제, 여행코스, 레포츠, 숙박, 쇼핑, 음식점 - 분류 코드 : 대분류, 중분류, 소분류로 나누어진다. - 지역 코드 : 지역, 시군구로 나누어 진다. - 정렬 코드 : 제목순, 인기순, 최근수정순, 등록순, 제목순(이미지), 인기순(이미지), 최근수정순(이미지), 등록순(이미지) 관광타입 코드와 정렬코드는 메뉴얼상에 제공되고 있으며... 분류코드와 지역코드는..

유튜브강좌 : youtu.be/tNzxbFqEoZE 로그인/아웃 처리하기 원래 로그인/아웃을 처리하기 위해서 wx.login() API를 이용해서 openid 및 session_key를 포함하여 사용자의 자격 증명을 획득한후 로그인 상태 정보를 앱의 서버에 전달해서 로그인/아웃 처리를 해야 한다. 하지만 서버가 없는 상황이니...... 컴포넌트의 open-type="getUserInfo"를 이용하여 간단하게 로그인/아웃을 처리하자. {{userInfo.nickName}} 버튼을 클릭하면 open-type="getUserInfo"로 인해 logIn(e)로 유저정보가전달된다. 유저정보를 전달받으면 로그인 처리 wx.setStorageSync()를 이용해 유저정보를 스토레이지에 저장한다. 반대로 로그아웃시 w..

유튜브강좌 : youtu.be/XaRgqyD7qO4 먼저 아래와 같이 "나" 페이지를 만들어 보자 주요 로직은 다음과 같다. - 로그인/아웃 - 즐겨찾기 페이지 - 코드관리 페이지 - 앱소개 페이지 util.js 우선 wx.showToast()를 처리하기 위해 이미지를 다운받자. 저번시간에 사용했던 사이트 https://www.flaticon.com/ 를 이용해서 아래 2가지 적당한 아이콘이미지를 준비하면 된다. - error.png, success.png 2개의 파일을 준비하자 다음은 utils/util.js에 wx.showToast()를 처리하는 소스를 추가하자 const showToast = (msg, image="SUCCESS") => { wx.showToast({ title: msg, image..