uniapp全局页面
uniapp全局页面配置方法
在uniapp中，可以通过修改pages.json文件来配置全局页面属性，包括页面样式、导航栏、标题等。以下是一些常见的全局配置方法：
配置导航栏样式
在pages.json的globalStyle中设置导航栏背景色、标题颜色等：
"globalStyle": {
"navigationBarTextStyle": "white",
"navigationBarTitleText": "全局标题",
"navigationBarBackgroundColor": "#007AFF"
}配置页面路径
在pages数组中注册所有页面路径，确保每个页面都能被正确访问：
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页"
}
}
]配置底部选项卡
通过tabBar设置全局底部导航栏：
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "首页"
}
]
}全局样式与脚本注入
全局CSS样式
在App.vue中通过style标签定义全局CSS，这些样式会应用到所有页面：
<style>
page {
background-color: #f5f5f5;
}
</style>全局JavaScript逻辑
在App.vue的script中定义全局方法或混入（mixin）：
<script>
export default {
onLaunch: function() {
console.log('App Launch')
}
}
</script>全局组件注册
自动注册组件
在components目录下的组件，可以通过easycom自动注册为全局组件。无需手动导入，直接在页面中使用：
// pages.json
"easycom": {
"autoscan": true,
"custom": {
"your-component": "@/components/your-component.vue"
}
}手动注册组件
在main.js中通过Vue.component手动注册全局组件：
import YourComponent from '@/components/your-component.vue'
Vue.component('your-component', YourComponent)全局状态管理
使用Vuex
通过Vuex管理全局状态，在store目录下创建模块化store：
// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
count: 0
}
})
export default store使用uni-app的globalData
在App.vue中定义globalData，所有页面可通过getApp()访问：
<script>
export default {
globalData: {
userInfo: null
}
}
</script>
// 页面中使用
const app = getApp()
console.log(app.globalData.userInfo)全局生命周期监听
应用生命周期
在App.vue中监听应用启动、显示、隐藏等事件：
export default {
onLaunch(options) {},
onShow(options) {},
onHide() {}
}页面生命周期
通过uni.$on和uni.$emit实现全局事件监听：
// 发送事件
uni.$emit('update', {data: 'value'})
// 接收事件
uni.$on('update', function(data) {
console.log(data)
})
