uniapp은 제목을 변경하기 위해 점프하고 매개변수를 전달합니다.

모바일 애플리케이션이 증가하고 사용자 수가 증가함에 따라 점점 더 많은 개발자가 크로스 플랫폼 개발 프레임워크로 uniapp을 사용하기로 선택하고 있습니다. 실제 개발 과정에서 우리는 페이지로 이동하여 매개변수를 전달해야 하는 경우가 종종 있으며 동시에 다른 페이지의 내용에 따라 제목도 변경해야 합니다. 그래서 이번 글에서는 uniapp에서 매개변수 점프 및 제목 변경 기능을 구현하는 방법을 소개하겠습니다.

1. uniapp의 루트 점프

uniapp은 Vue.js 기반의 프레임워크이며 루트 점프는 기본적으로 Vue.js와 동일합니다. uniapp에서는 uni.navigateTo() 메소드를 사용하여 페이지로 이동할 수 있고, uni.navigateBack() 메소드를 사용하여 이전 페이지로 돌아갈 수도 있습니다. H5측(웹페이지)에서 uni-app 시뮬레이터를 사용하는 경우 uni.navigateBack() 메소드를 사용할 수 없다는 점에 유의하시기 바랍니다.

다음은 대상 페이지로 이동하는 샘플 코드입니다.

uni.navigateTo({
  url: '/pages/targetPage/targetPage'
});

2. 매개변수 전달

실제 개발에서는 페이지 간에 데이터를 전달해야 하는 경우가 많습니다. 예를 들어 로그인 후 개인 센터 페이지에 사용자 이름과 아바타를 표시해야 합니다. uniapp에서는 매개변수 전달이 매우 간단하므로 점프 링크에 매개변수만 추가하면 됩니다.

다음은 매개변수 전달을 위한 샘플 코드입니다.

uni.navigateTo({
  url: '/pages/targetPage/targetPage?id=123&name=john'
});

대상 페이지(예: targetPage)에서 uni.getStorageSync() 메서드를 사용하여 전달된 매개변수를 가져올 수 있습니다. 다음은 매개변수를 얻기 위한 샘플 코드입니다.

onLoad: function (options) {
    console.log(options.id);    // 输出：123
    console.log(options.name);  // 输出：john
}

매개변수를 전달할 때 문자 깨짐을 방지하기 위해 인코딩에 encodeURIComponent() 메서드를 사용하는 것이 좋습니다. 대상 페이지에서 decodeURIComponent() 메서드를 사용하여 디코딩할 수 있습니다.

3. 제목 변경

유니앱에서는 페이지 제목을 설정하여 페이지 내용을 더 잘 표시할 수 있어 사용자가 현재 페이지에 표시되는 내용을 더 쉽게 이해할 수 있습니다. page.json 파일에서 "navigationBarTitleText" 속성을 설정하거나 uni.setNavigationBarTitle() 메서드를 사용할 수 있습니다.

다음은 페이지 제목 설정을 위한 샘플 코드입니다.

// 在page.json文件中设置页面标题
{
  "navigationBarTitleText": "页面标题"
}

// 使用uni.setNavigationBarTitle方法设置页面标题
uni.setNavigationBarTitle({
  title: '页面标题'
});

주의할 점:

1. page.json 파일에서 탐색 모음 제목을 설정하면 js 파일에서 해당 제목을 덮어쓰게 됩니다. uni.setNavigationBarTitle() 메소드를 통해 제목을 설정합니다.
2. 현재 페이지에만 적용됩니다. 새 페이지에 들어갈 때마다 제목을 재설정해야 합니다.

4. 점프 매개변수 구현 및 제목 변경

페이지로 이동할 때 매개변수를 전달하고 제목을 변경해야 하는 경우 다음과 같은 방법으로 이를 달성할 수 있습니다.

uni.navigateTo({
  url: '/pages/targetPage/targetPage?id=123&name=john',
  success: function () {
    uni.setNavigationBarTitle({
      title: '目标页面标题'
    });
  }
});

점프는 다음과 같이 수행되어야 합니다. 성공하십시오. 콜백 함수에서 대상 페이지의 제목을 설정하십시오. 그렇지 않으면 제목이 성공적으로 수정되지 않을 수 있습니다.

5. 요약

본 글에서는 유니앱에서 페이지 점프, 매개변수 전달, 제목 변경 등의 기본 동작을 구현하는 방법을 소개합니다. 개발자는 실제 프로젝트에서 필요에 따라 코드를 추가로 사용자 정의할 수 있습니다. 개발 중에 요구 사항이 무엇이든 uniapp에서 구현할 수 있는 방법을 찾을 수 있습니다.

위 내용은 uniapp은 제목을 변경하기 위해 점프하고 매개변수를 전달합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!