위 챗 애플 릿 페이지 점프, 팝 업 상자

페이지 이동
페이지 점프 는 위 챗 애플 릿 에서 비교적 자주 사용 되 고 중요 한 기능 중 하나 로 페이지 점프 는 보통 버튼 이나 텍스트 영역 을 클릭 한 후에 해 야 할 작업 입 니 다.
페이지 점프 에서 주의해 야 할 점 이 많 습 니 다. 제 가 프로젝트 를 작성 하 는 과정 에서 만난 상황 에서 의 점프 방식 을 소개 하 겠 습 니 다.
1. 일반적인 상황
일반적으로 버튼 이나 텍스트 를 클릭 한 후 다른 페이지 로 이동 합 니 다.

.wxml

setting

hello    

간단 합 니 다. wxml 에 bidtap 속성 을 추가 한 다음 js 에 해당 하 는 함 수 를 추가 합 니 다.

.js

te(event){
   wx.navigateTo({
       url:'',
   })
},

bu(event){
   wx.navigateTo({
       url:'',
   })
},

함수 에 서 는 자체 테이프 의 navigateTo 방법 만 사용 하면 지정 한 페이지 로 이동 할 수 있 습 니 다.url 에서 대상 페이지 의 경 로 를 입력 하 십시오.
2，switchTab
프로젝트 를 작성 하 는 과정 에서 나 는 navigateTo 가 tabBar 에 속 하 는 대상 페이지 로 이동 할 수 없다 는 것 을 알 게 되 었 다.tabBar 는 app. json 에 만 존재 합 니 다.이 럴 때 는 스위치 탭 이 등장 해 야 한다.
switch Tab 은 tabBar 를 위 한 페이지 전환 방법 입 니 다.

.js

bu(event){
  wx.switchTab({
    url:''
  })
},

navigateTo 를 switchTab 로 변경 하면 됩 니 다.
3, bindtap 와 catchtap
항목 을 쓸 때 다단 계 클릭 이벤트 가 자주 발생 하 므 로 bindtap 과 catchtap 을 명확 하 게 구분 해 야 합 니 다.
페이지 를 뛰 어 넘 는 단추 나 텍스트 는 상위 레이아웃 에 도 이벤트 클릭 이 있 을 수 있 습 니 다.

.wxml


    hello
    setting

이런 경우 가 자주 발생 하 는데, 이때 단 추 를 누 르 면 sum 함수 가 다시 한 번 실 행 된 것 을 발견 할 수 있다.bu 함수 만 실행 하 겠 다 는 뜻 입 니 다.이것 은 bindtap 가 부모 급 클릭 이 벤트 를 촉발 하기 때문에 catchtap 과 bindtap 는 완전히 다 릅 니 다.
catchtap 은 부모 클릭 이 벤트 를 촉발 하지 않 고 현재 클릭 이벤트 만 촉발 합 니 다.

.wxml 
   hello
   setting

내부 의 bindtap 를 cathtap 으로 바 꾸 면 부모 sum 클릭 이벤트 가 발생 하지 않 습 니 다.
4, 패스 점프
페이지 가 이동 할 때 데이터 전달 이 필요 할 때 이 기 교 를 습득 하 는 것 이 매우 중요 하 다.

  
.js
wx.navigateTo({
  url:'pages/my?name='+it+'&pass='+pa;
})

url 에서 전달 할 id 와 대응 하 는 값 을 연결 합 니 다.
수신 시 onLoad 함수 에서 직접 수신

  
onLoad: function (options) {  
    var name = options.name; 
    var pass = options.pass; 
 }

이렇게 하면 데이터 가 페이지 에서 전달 되 는 것 을 완성 할 수 있다.
2. 팝 업 상자
1，showToast
안 드 로 이 드 에는 toast 팝 업 상자 가 있 고 위 챗 애플 릿 에 도 해당 하 는 쇼 Toast 방법 이 있 습 니 다.
쇼 Toast 는 프로젝트 실천 에서 도 매우 빈번 한 방법 을 사용한다.

.js

wx.showToast({
   title: '  ', 
   icon: 'success',   
   image：''
   duration: 2000   //    
   mask：true //      
})

icon 은 현재 success 와 loading 두 가지 만 지원 합 니 다.
다른 팝 업 내용 을 구현 하기 위해 그림 을 추가 할 수도 있 습 니 다.
2，showLoading
showLoading 방법 은 불 러 오 는 메시지 알림 상 자 를 표시 하 는 데 사 용 됩 니 다.
인자 가 두 개 밖 에 없어 요.

.js

wx.showLoading({
   title:'   ',
   mask:true
})

showLoading () 의 닫 기 는 hideLoading () 방법 을 사용 해 야 합 니 다.
3，Vant Weapp
위 챗 은 상기 두 가지 팝 업 상자 만 제공 합 니 다. 이것 은 많은 애플 릿 의 수 요 를 만족 시 키 기 어렵 습 니 다. UI 구성 요소 라 이브 러 리 를 추천 합 니 다. 그 안에 아름 답 고 기능 이 강 한 구성 요소 가 있 습 니 다.여러 가지 아름 다운 팝 업 상자 가 있 습 니 다. 조작 이 간단 하고 흰 둥 이 에 게 적합 하 며 필요 한 것 이 있 으 면 가 볼 수 있 습 니 다.https://youzan.github.io/vant-weapp/#/intro