작은 프로그램의 페이지 이동 방식 총결산

3651 단어
1. 기본 점프

1. 구성 요소 라벨을 사용하여 실현한다.


특징: 누르면 누르는 효과
    


2. 페이지 레이아웃에 감청 시간bindtap 이벤트를 추가합니다.그리고 방법 안에 있어요.wx를 통해.navigatorTo가 점프를 실현합니다.


특징: 누르지 않는 효과.
gotoPage: function () { 
     wx.navigateTo({ 
         url: '../list/list', 
         success: function (res) { 
                 // success 
         }, 
         fail: function () { 
               // fail 
         }, 
         complete: function () { 
             // complete 
         } 
   }) 
}, 

3. wx를 통해.redirectTo는 점프를 실현합니다.


특징: 현재 페이지를 닫고 응용 프로그램의 페이지로 이동
toList: function (event) { 
     var provinceName = event.currentTarget.id; 
     wx.redirectTo({ 
     url: '../city/city?province='+provinceName, 
     success: function (res) { 
         // success 
     }, 
     fail: function () { 
         // fail 
      }, 
      complete: function () { 
         // complete 
       } 
   }) 
 } 

4. wx.navigateBack 방법


현재 페이지를 닫습니다.이전 페이지 또는 다중 레벨 페이지로 돌아가기
wx.navigateBack({ 
    delta: 1, //   delta( 1)   
    success: function (res) { 
        // success 
    }, 
    fail: function () { 
      // fail 
    }, 
    complete: function () { 
        // complete 
      } 
 }) 

이전 페이지에 값 지정
var pages = getCurrentPages(); 
var prevPage = pages[pages.length - 2];// 。 
prevPage.setData({ 
     bank_cn: bank_cn, 
     bank: bank 
}) 

중점: tabBar에서는 일반적으로 네 개의 메인 화면이 있는데 이런 메인 화면 사이의 전환은tab 전환과 같다. 이 몇 개의 페이지는 tabBar에서 따로 설정해야 한다. 일반 페이지가 이 네 개의 메인 화면으로 전환할 때 사용할 수 없다navigator, 사용해야 한다switchTab.
실례: 첫 페이지에서tabBar 페이지로 이동하고 파라미터를 가져가야 합니다.우선 나는 이렇게 했다.
인덱스에서js:
toCategory:function(event){
    var cate_id = event.currentTarget.dataset.cate_id;
    wx.switchTab({
      url: '../category/category?cate_id='+cate_id,
    });
  }, 

위에 적힌 대로category에 있습니다.js에서 데이터를 얻지 못함;
onLoad:function(options){

console.log(options);

}

그리고 공식 문서를 살펴봤습니다.

wx.switchTab(OBJECT)


tabBar 페이지로 이동하고 다른 모든 비tabBar 페이지를 닫습니다
OBJECT 매개변수 설명:
매개 변수
유형
필수
설명
url
String
예.
점프가 필요한tabBar 페이지의 경로 (app.json의tabBar 필드에 정의된 페이지) 는 경로 뒤에 파라미터가 있을 수 없습니다
success
Function
아니오
인터페이스 호출 성공 리셋 함수
fail
Function
아니오
인터페이스 호출 실패한 리셋 함수
complete
Function
아니오
인터페이스 호출이 끝난 리셋 함수 (호출 성공, 실패 모두 실행)
URL 경로를 볼 수 있고 매개 변수를 가져올 수 없습니다.이제 어색해.나는 반드시 파라미터를 가지고 가야 업무의 수요를 만족시킬 수 있기 때문이다.지름길을 걸었다.사고방식: 점프할 때 전역 변수에 변수cate_ 설정id,category로 이동합니다.js 중후.전역 변수의cate_ 가져오기id, 다 쓴 후에 변수를 제거합니다.구현은 다음과 같습니다.
홈페이지 index.js:
toCategory:function(event){
    var cate_id = event.currentTarget.dataset.cate_id;
    app.globalData.cate_id=cate_id;// (app  var app=getApp())
    wx.switchTab({
      url: '../category/category'
    });
  }, 

분류 페이지 카테고리.js:
onLoad:function(options){
    var that = this
    var cate_id=app.globalData.cate_id
    wx.request({
      url: app.globalData.httpsurl +'public/index.php?s=product/index',
      data:{
        cate_id:cate_id,
      },
      success:function(res){
        // cate_id
        app.globalData.cate_id=""
        that.setData({
          alldata:res.data,
        })
      }
    })
  }, 

위의 전환은 업무 논리의 수요를 완성할 수 있다.

좋은 웹페이지 즐겨찾기