uniapp에서 페이지 점프 및 전송 값을 구현하는 방법

모바일 인터넷의 발전으로 APP 개발이 어느 정도 인기를 얻었습니다. APP 개발에는 기술적 어려움이 많이 있으며, 그 중 페이지 점프와 매개변수 전송은 반드시 숙지해야 할 기술 중 하나입니다. 다중 터미널 개발 프레임워크인 uniapp은 페이지 점프 및 값 전송을 더 간단하고 편리하게 구현합니다. 이번 글에서는 유니앱 페이지에서 점프하고 값을 전달하는 방법을 중점적으로 다루겠습니다.

1. 유니앱 페이지 점프

유니앱 페이지를 점프하는 방법은 두 가지가 있는데, 하나는 하단의 탭바를 통해 페이지로 점프하는 것이고, 다른 하나는 코드를 통해 페이지로 점프하는 것입니다.

1. 하단 탭바를 통한 페이지 점프 구현

유니앱 프레임워크에서는 유니앱에 내장된 하단 탭바를 통해 페이지 점프를 구현할 수 있습니다. Pages.json 파일에 하단 탭 표시줄을 구성하고 페이지 점프를 수행하기 위해 탭 표시줄에 이동할 페이지 경로를 추가합니다.

다음은 하단 탭 표시줄의 코드를 구성하는 간단한 페이지.json 파일입니다.

{
  "pages": [
    //tab栏页面
    {
      "path": "pages/index/index",
      "name": "index",
      "iconPath": "static/img/tab-home.png",
      "selectedIconPath": "static/img/tab-home-selected.png"
    },
    {
      "path": "pages/mine/mine",
      "name": "mine",
      "iconPath": "static/img/tab-mine.png",
      "selectedIconPath": "static/img/tab-mine-selected.png"
    }
  ],
  "globalStyle": {
    "navigationBarTitleText": "uni-app"
  },
  "tabBar": {
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "color": "#333",
    "selectedColor": "#007aff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "static/img/tab-home.png",
        "selectedIconPath": "static/img/tab-home-selected.png"
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "我的",
        "iconPath": "static/img/tab-mine.png",
        "selectedIconPath": "static/img/tab-mine-selected.png"
      }
    ]
  }
}

2. 코드를 통해 페이지 점프 구현

코드를 통해 페이지 점프를 구현하려면 uni.navigateTo를 사용해야 하며 uniapp 프레임워크에서 제공하는 uni.redirectTo 메소드입니다. 전자는 현재 페이지를 유지하고 애플리케이션의 특정 페이지로 이동하는 반면, 후자는 현재 페이지를 닫고 애플리케이션의 특정 페이지로 이동합니다.

다음은 페이지 점프 스루 코드의 샘플 코드입니다.

//保留当前页面，并跳转到某个页面
uni.navigateTo({
    url: 'pages/detail/detail?id=123'
});

//关闭当前页面，并跳转到某个页面
uni.redirectTo({
    url: 'pages/login/login'
});

//返回上一页面
uni.navigateBack();

2. uniapp 페이지의 값 전송

일부 시나리오에서는 한 페이지에서 다른 페이지로 데이터를 전달해야 합니다. uniapp 페이지 값 전송의 경우 프런트 엔드에서 URL 매개변수 전송과 Vuex 상태 관리라는 두 가지 일반적인 방법이 자주 사용됩니다.

1.URL 매개변수 전달

uniapp에서는 URL 매개변수 전달을 사용하는 것도 일반적입니다. 대상 페이지로 이동할 때 매개변수로 전달해야 하는 데이터를 URL 주소에 이어붙일 수 있습니다. 대상 페이지 페이지의 $Route 개체를 통해 가져옵니다.

다음은 URL 매개변수 전달을 위한 간단한 예제 코드입니다.

//대상 페이지로 이동하여 해당 ID를 매개변수로 전달합니다.
uni.navigateTo({
url: '/pages/detail/detail?id=12 '
});

//대상 페이지에서 매개변수 가져오기
export default {
data () {

return {
  id: ''
}

},
onLoad (options) {

this.id = options.id

}
}

2.Vuex状态管理

另一种方式是使用Vuex状态管理。通过Vuex将数据存储在全局store对象中，从而实现多个页面间数据的共享。

下面是一个Vuex状态管理的示例代码：

//store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    name: 'uniapp'
  },
  mutations: {
    setName (state, name) {
      state.name = name;
    }
  }
});

export default store;

//需要传递数据的页面
import { mapState } from 'vuex';

export default {
  data() {
    return {
      inputName: ''
    };
  },
  methods: {
    setName() {
      this.$store.commit('setName', this.inputName);
    }
  }
};

//需要获取数据的页面
import { mapState } from 'vuex';

export default {
  computed: mapState({
    name: state => state.name
  })
};

위 코드에서 먼저 정의 전역 저장소 객체가 생성되고 상태 변수와 돌연변이 메서드가 정의되어 상태의 데이터를 업데이트합니다. 데이터를 전송해야 하는 페이지에서 데이터를 수정해야 하는 경우 mutations 메서드를 호출하여 해당 상태의 데이터를 업데이트합니다. 데이터를 얻어야 하는 페이지에서 데이터를 얻어야 하는 경우 계산된 속성을 통해 mapState 메소드를 호출하여 해당 상태의 데이터를 얻는다.

요약:

위는 uniapp 페이지 점프 및 값 전송, URL 매개변수 전송 및 Vuex 상태 관리를 위한 두 가지 방법입니다. 애플리케이션 개발 과정에서 비즈니스 요구에 따라 페이지 점프 및 데이터 전송에 적합한 방법을 선택해야 합니다. . 효율적이고 안정적이며 유지 관리가 가능한 애플리케이션을 달성합니다.

위 내용은 uniapp에서 페이지 점프 및 전송 값을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!