uniapp은 제목 이름을 동적으로 설정합니다.

uniapp을 사용하여 개발하다 보면 웹페이지 제목을 동적으로 설정해야 하는 상황에 자주 부딪히게 됩니다. 예를 들어, 모바일 앱을 개발할 때 페이지 제목에 현재 있는 모듈의 이름이나 현재 탐색 중인 콘텐츠의 이름을 표시해야 할 수 있습니다. 이 경우 웹 페이지를 동적으로 설정해야 합니다. 제목.

uniapp에서는 전역 구성 파일을 변경하여 페이지 제목 이름을 동적으로 설정하는 효과를 얻을 수 있습니다. 아래에서는 구현 방법을 자세히 설명하겠습니다.

1. main.js 파일에서 전역 구성을 수행합니다.

uniapp에서는 일반적으로 main.js 파일에서 전역 구성을 수행합니다. 이 파일은 전체 프로그램의 항목 파일이므로 여기에서 일부 전역 구성 작업을 수행할 수 있습니다.

웹페이지 제목 이름을 설정해야 하는 경우 main.js 파일에 다음 코드를 추가할 수 있습니다.

import Vue from 'vue';
import App from './App';

Vue.config.productionTip = false;

// 设置页面标题名称
Vue.prototype.$setTitle = function (title) {
  uni.setNavigationBarTitle({
    title: title || ''
  });
};

App.mpType = 'app';

const app = new Vue({
  ...App
});

app.$mount();

위 코드에서는 동적으로 설정하는 데 사용되는 Vue 프로토타입 메서드 $setTitle()을 정의합니다. 웹페이지 제목 이름이 작동합니다. 이 메소드는 페이지의 제목 이름을 설정할 수 있는 uni.setNavigationBarTitle() 메소드를 호출합니다.

제목 이름을 설정할 때 제목 이름 매개변수 title을 전달할 수도 있고, 매개변수를 전달할 수 없는 경우에는 제목 이름이 빈 문자열로 설정됩니다. 기본.

2. 페이지 구성 요소에서 $setTitle() 메서드를 호출하세요.

페이지 구성 요소에서 $setTitle() 메서드를 호출하여 웹 페이지 제목 이름을 동적으로 설정하세요. 샘플 코드를 사용하여 설명하겠습니다.

<template>
  <view class="index">
    <view class="content">
      <text class="title">{{ title }}</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'Index',
  data() {
    return {
      title: '首页'
    };
  },
  onReady() {
    this.$setTitle(this.title);
  },
  methods: {
    ...
  }
};
</script>

위 코드에서는 Index라는 페이지 구성 요소를 정의합니다. 여기서 초기 값이 "Home Page"인 title 속성이 data() 데이터에 정의되어 있습니다. onReady() 라이프 사이클에서는 $setTitle() 메서드를 호출하여 웹 페이지 제목을 설정합니다.

다른 페이지 구성 요소에서는 $setTitle() 메서드를 다르게 호출해야 한다는 점에 유의해야 합니다. 따라서 실제 개발 과정에서는 $setTitle() 메소드를 유연하게 사용하여 페이지 제목을 설정해야 합니다.

요약하자면 프로토타입 메소드인 $setTitle()을 Vue에 추가하고 이를 페이지 컴포넌트에서 합리적으로 호출함으로써 uniapp에서 웹페이지 제목 이름의 동적 설정을 구현할 수 있습니다.

위 내용은 uniapp은 제목 이름을 동적으로 설정합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!