当前位置：首页 > uni-app

uniapp全局页面

2026-02-06 00:08:47uni-app

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，这些样式会应用到所有页面：

uniapp全局页面

<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手动注册全局组件：

uniapp全局页面

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)
})

标签: 全局页面

分享给朋友：

uniapp如何写全局函数

全局函数的定义与使用在UniApp中定义全局函数可以通过挂载到Vue.prototype或使用模块化导出导入的方式实现。以下是两种常用方法：方法一：挂载到Vue.prototype 在main.…

vue 实现页面返回

监听浏览器返回事件使用 window.addEventListener 监听 popstate 事件，在 Vue 的 mounted 钩子中绑定事件，并在 beforeDestroy 钩子中移除监听…

vue实现页面切换

Vue 实现页面切换的方法 Vue 中实现页面切换通常使用 Vue Router，这是 Vue.js 官方的路由管理器。以下是几种常见的实现方式：使用 Vue Router 的基本配置安装 Vu…

vue实现页面签字

实现页面签名的Vue方案在Vue中实现页面签名功能，可以通过HTML5的Canvas元素结合手势或鼠标事件来捕获用户绘制轨迹。以下是具体实现方法：安装签名库（可选）使用现成的Vue签名…

vue实现列表页面

Vue 列表页面实现方案基础列表渲染使用 v-for 指令渲染数组数据，配合 :key 提升性能： <template> <ul> <li v-for=…

vue 实现页面缩放

Vue 实现页面缩放的方法使用 CSS transform 缩放在 Vue 组件的样式中添加 transform 属性，通过 scale 控制缩放比例。可以通过动态绑定 style 或 class…

uniapp全局页面