当前位置：首页 > uni-app

uniapp页面示例

2026-03-05 04:00:22uni-app

uniapp页面结构示例

uniapp的页面结构遵循Vue单文件组件规范，通常由<template>、<script>和<style>三部分组成。以下是一个基础页面示例：

<template>
  <view class="container">
    <text>{{ message }}</text>
    <button @click="changeMessage">点击修改文本</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello uniapp!'
    }
  },
  methods: {
    changeMessage() {
      this.message = '文本已更新'
    }
  }
}
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
</style>

页面生命周期

uniapp页面支持以下生命周期函数：

uniapp页面示例

export default {
  onLoad(options) {
    // 页面创建时执行
    console.log('页面加载', options)
  },
  onShow() {
    // 页面显示时执行
    console.log('页面显示')
  },
  onReady() {
    // 页面初次渲染完成
    console.log('页面就绪')
  },
  onHide() {
    // 页面隐藏时执行
    console.log('页面隐藏')
  },
  onUnload() {
    // 页面卸载时执行
    console.log('页面卸载')
  }
}

页面路由与传参

uniapp支持路由跳转和参数传递：

// 跳转到新页面并传递参数
uni.navigateTo({
  url: '/pages/detail/detail?id=1&name=test'
})

// 接收页面参数
export default {
  onLoad(options) {
    console.log('接收到的参数:', options)
  }
}

跨端样式处理

uniapp支持条件编译处理多端样式差异：

uniapp页面示例

/* #ifdef H5 */
.h5-style {
  color: blue;
}
/* #endif */

/* #ifdef MP-WEIXIN */
.weixin-style {
  color: green;
}
/* #endif */

页面通信方式

uniapp提供多种页面间通信方法：

// 使用全局事件总线
uni.$emit('eventName', data)
uni.$on('eventName', callback)

// 使用全局变量
getApp().globalData.sharedData = 'value'

// 使用本地存储
uni.setStorageSync('key', 'value')
const data = uni.getStorageSync('key')

页面性能优化建议

合理使用组件和生命周期能提升页面性能：

export default {
  data() {
    return {
      // 避免大数据对象
      optimizedData: {}
    }
  },
  onPageScroll(e) {
    // 节流滚动事件
    console.log('滚动位置:', e.scrollTop)
  },
  onReachBottom() {
    // 触底加载更多
    this.loadMore()
  }
}