uniapp 如何设置页面的title
在uni-app中设置页面的标题（title）可以通过多种方式实现，这取决于你希望如何应用这些设置以及你具体的需求。
以下是几种常见的方式：
1. 使用 pages.json 配置
最直接的方法是在项目的 pages.json 文件中为每个页面指定 navigationBarTitleText 属性。
这样，当用户导航到该页面时，导航栏会显示对应的标题。
这种方式适用于静态标题设置，并且具有最低的优先级。
{
"path": "pages/my-page/my-page",
"style": {
"navigationBarTitleText": "页面标题"
}
}如果你想要统一所有页面的标题样式，可以在 globalStyle 中配置 navigationBarTitleText 属性，这样可以为整个应用程序提供一个默认的标题文本。
2. 动态设置标题
当你需要根据某些条件动态地改变页面标题时，可以使用 uni.setNavigationBarTitle() 方法。
这种方法允许你在页面加载时或任何其他时刻更新标题文本，具有最高的优先级。
export default {
onLoad() {
uni.setNavigationBarTitle({
title: '新的标题'
});
}
}此外，还可以通过路由参数传递标题信息，在页面加载时读取并设置标题。
3. 自定义导航栏和标题栏
对于更复杂的场景，比如需要自定义导航栏样式或者完全替换原生导航栏的情况，你可以选择创建一个自定义的导航栏组件。
在这种情况下，你需要在 pages.json 中将 navigationStyle 设置为 custom，然后在页面中添加自己的导航栏HTML结构和样式。
{
"path": "pages/home",
"style": {
"navigationBarTitleText": "记事本",
"navigationStyle": "custom"
}
}接下来，在你的 .vue 文件中设计自定义的导航栏，并通过 Vue 的数据绑定机制来动态更新标题内容。
4. 使用插件
另外一种方法是利用第三方插件如 vue-meta-info 来管理页面的meta信息，包括标题、描述等。
这种方法特别适合于那些需要对SEO友好的单页应用(SPA)或需要精确控制meta标签的应用。
import Vue from 'vue';
import VueMeta from 'vue-meta-info';
Vue.use(VueMeta);
export default {
name: 'MyComponent',
metaInfo() {
return {
title: '页面标题'
};
}
};5. 总结
不同的设置方式适用于不同的开发需求。静态配置适合简单的应用场景，而动态设置则提供了更大的灵活性，尤其是在需要根据不同条件展示不同标题的情况下。
自定义导航栏则为开发者提供了最大的自由度，可以创造出独特的用户体验。
至于是否使用插件，则取决于项目是否需要额外的功能支持以及对SEO的关注程度。
无论采用哪种方式，都需要确保它们与整体项目架构相匹配，并且遵循最佳实践以保证代码的质量和可维护性。
