weapp
v2
WeChat 미니 프로그램 구성 요소 및 기능 캡슐화, 간단한 구성 요소 프로그래밍
WeChat의 Component 커스텀 컴포넌트 캡슐화, 간단한 컴포넌트 프로그래밍을 기반으로 Component 커스텀 컴포넌트에 대한 Component API를 참조하세요.
WeChat 개발자 도구에서 ES6에서 ES5로의 변환 기능을 활성화해야 합니다. 버전 1.6.3 이상의 미니 프로그램 기본 라이브러리를 사용하고 WeChat을 최신 버전으로 업데이트하세요.
WeChat 애플릿 및 Alipay 애플릿을 개발하기 위해 코드 세트가 필요한 경우 mpapi 플러그인이 도움을 줄 수 있습니다(WeChat 애플릿 및 Alipay 애플릿 API 호환 플러그인).
WeChat 개발자 도구를 사용하여 src 디렉터리를 여세요.
├─images ---------- 公共图片
├─js -------------- 公共的JS
│ └─common ---------- 公共方法函数封装
├─components ------ 自定义组件和第三方组件
│ ├─libs ------------ 第三方库
│ └─weapp ----------- weapp组件
├─pages ----------- 页面目录
│ ├─index ----------- 首页
│ ├─libs ------------ 第三方库页面
│ └─weapp ----------- weapp组件页面
├─app.js
├─app.json
├─app.wxss
└─README.md
usingComponents 의 참조문을 구성해야 합니다. // page.json
{
"usingComponents" : {
"weapp-toast" : "/components/weapp/toast/toast" ,
"weapp-tab" : "/components/weapp/tab/tab"
}
} <!-- page.wxml-->
< weapp-toast title =" {{ toastTitle }} " bind:hide =" onToastHide " />
< weapp-tab list =" {{ list1 }} " active-index =" {{activeIndex}} " bind:change =" onTabChange " /> 다음은 Tab 컴포넌트의 간단한 사용법을 보여줍니다. 구체적인 예시는 프로젝트 내부의 pages/weapp/tab 에 있는 코드를 참고하세요. 다른 유형의 구성 요소를 사용하는 방법은 기본적으로 이 호출 방법과 유사합니다.
// tab.json
{
"navigationBarTitleText" : "Tab" ,
"usingComponents" : {
"weapp-tab" : "/components/weapp/tab/tab"
}
} <!-- tab.wxml -->
< weapp-tab list =" {{ list1 }} " active-index =" {{activeIndex}} " bind:change =" onTabChange " /> // tab.js
Page ( {
data : {
list1 : [ '选项1' , '选项2' , '选项3' ]
} ,
handlerSelect ( ) {
this . setData ( {
activeIndex : 1
} ) ;
} ,
onTabChange ( event ) {
console . log ( event . detail . activeIndex )
}
} ) 모바일 개발에 일반적으로 사용되는 Toast 구성 요소인 플로팅 프롬프트는 미니 프로그램의 showToast와 다릅니다.
title 프롬프트 정보delay 자동 종료 지연 시간(밀리초), 기본값: 1500 hide 이 닫힌 후 콜백 < weapp-toast title =" {{ toastTitle }} " bind:hide =" onToastHide " />꼬리표
list 탭 제목active-index 선택 인덱스, 기본값: 0theme 테마 스타일은 weapp-tab 또는 기타 사용자 정의 스타일로 전달될 수 있습니다. change , 매개변수 event . 여기서 event.detail.activeIndex 는 현재 선택된 인덱스입니다. < weapp-tab list =" {{ list1 }} " active-index =" {{activeIndex}} " bind:change =" onTabChange " />도시 선택
region 프롬프트 정보 change , 매개변수 event . 여기서 event.detail.region 은 선택된 지역 정보입니다. < weapp-city-picker show =" {{isCityPickerShow}} " bind:change =" onChangeCity " />추가 로드, 데이터 프롬프트 없음, 일반적으로 풀업 데이터 목록과 함께 사용됨
icon-type 애플릿 아이콘 구성 요소의 유형, 기본값: searchstatus 현재 상태, 선택 값: loading , nomore , empty , 아직 데이터 없음, 기본값: loadingempty-txt 에는 데이터 프롬프트 텍스트가 없습니다. 기본값:暂无数据loading-txt 로딩 프롬프트 텍스트, 기본값:正在加载nomore-txt 더 이상 프롬프트 텍스트가 없습니다. 기본값:没有更多数据了 < weapp-loader status =" {{status}} " /> 대부분의 시나리오를 충족하는 최대 12개의 화살표 방향이 지원되는 팝업 메뉴 
listpage-selector 전체 페이지의 가장 바깥쪽 컨테이너에 대한 CSS 선택기, 기본값은 .page 입니다.elem-id 위치하는지dir 화살표 방향, 옵션 값 tl tc tr rt rc rb bl bc br lt lc lb , 각각 위쪽, 오른쪽, 아래쪽, 왼쪽, 가운데의 12가지 결합 방향을 나타냅니다.tl top-left 에 해당합니다.tc top-center 에 해당합니다.tr top-right 에 해당합니다.rt right-top 에 해당합니다.rc right-center 에 해당합니다.rb right-bottom 에 해당합니다.bl bottom-left 에 해당합니다.bc bottom-center 에 해당합니다.br bottom-right 에 해당합니다.left-top 에 lt 합니다.lc left-center 에 해당합니다.lb left-bottom 에 해당합니다. select , 매개변수 event . 여기서 event.detail.item 은 현재 선택된 항목입니다.showhide < weapp-popover list =" {{list}} " dir =" {{dir}} " elem-id =" {{elemId}} " show =" {{show}} " bind:select =" onSelectPopover " />주요 팁
title 프롬프트 정보success , error , warn , 기본값: default type .delay 자동 종료 지연 시간(밀리초), 기본값: 1500 hide 이 닫힌 후 콜백 < weapp-toptip type =" {{ type }} " title =" {{ title }} " /> 달력 선택은 여러 달의 슬라이딩 전환 표시를 지원합니다. 월을 전환하고 오늘로 전환하려면 왼쪽과 오른쪽을 클릭하세요. 
start-dateend-datecurrent-date 기본 선택된 날짜show 할지 여부, 기본값: falsecurrent 기본적으로 첫 번째 달을 표시합니다. 기본값: 0 event 의 콜백 함수를 change . 여기서 event.detail.currentDate 는 현재 선택한 날짜입니다. < weapp-calendar-picker start-date =" 2017-07-07 " end-date =" 2018-08-08 " show =" {{ isCalendarPickerShow }} " bind:change =" onChangeDate " />페이지 전달 및 공유는 각 페이지의 복잡한 구성을 제거하여 보다 간단하고 효율적으로 사용할 수 있도록 하며 페이지 전달 매개변수 옵션을 지원합니다.
titleurl 로 전달된 페이지 주소, 기본값은 현재 페이지 주소입니다. import common from '../../assets/js/common' ;
// common.share([title], [url])
Page ( {
onShareAppMessage : common . share ( )
} ) ; 유형 판단, Number , String , Boolean , Array , Object , Function 및 기타 유형 문자열 반환
value 는 판단해야 하는 매개변수입니다. import common from '../../assets/js/common' ;
// common.type([value])
common . type ( 1 ) ; // Number
common . type ( 'abc' ) ; // String
common . type ( true ) ; // Boolean
common . type ( [ ] ) ; // Array
common . type ( { } ) ; // Object
common . type ( function ( ) { } ) ; // Function
common . type ( / d / ) ; // RegExp
common . type ( new Date ( ) ) ; // Date객체를 URL 문자열로 구문 분석
urlObject 매개변수 객체, 문자열 매개변수로 변환될 객체unEncodeURI 인코딩을 사용하지 않으며 기본적으로 encodeURIComponent 사용됩니다. import common from '../../assets/js/common' ;
// common.param([urlObject], [unEncodeURI])
let obj = {
name : 'weapp' ,
uid : 8 ,
age : 24
} ;
let params = common . param ( obj ) ;
console . log ( params ) ; // ?name=weapp&uid=8&age=24 common.param 사용하는 대신 URL 문자열을 객체로 구문 분석합니다.
urlString 주소, URL 매개변수가 있는 주소unDecodeURI 디코딩을 사용하지 않으며 기본적으로 decodeURIComponent 사용합니다. import common from '../../assets/js/common' ;
// common.unparam([urlString], [unDecodeURI])
let str = '?name=weapp&uid=8&age=24' ;
let obj = common . unparam ( str ) ;두 페이지를 열 때 빠른 클릭을 방지하도록 최적화된 페이지 점프는 각각 미니 프로그램의 wx.navigateTo, wx.redirectTo, wx.switchTab, wx.reLaunch에 해당하는 URL 매개변수를 전달하는 개체 형식을 지원합니다.
url 페이지 주소params 페이지 매개변수 객체 import common from '../../assets/js/common' ;
// common.navigateTo([url], [params])
Page ( {
onTapElem ( ) {
common . navigateTo ( '/pages/weapp/popover/popover' , {
userid : 123 ,
info : 'Hello,weapp'
} ) ;
}
} ) ; 글꼴 아이콘에는 FontAwesome을 사용하고 CSS 구성 요소 스타일에는 WeUI를 사용하세요.
MIT, 오픈소스의 즐거움을 누려보세요.
