uniapp 页面生成

创建页面文件

在 pages 目录下新建 .vue 文件，例如 pages/index/index.vue。文件结构遵循 Vue 单文件组件规范，包含 <template>、<script> 和 <style> 三个部分。

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

<script>
export default {
  data() {
    return {
      message: 'Hello Uniapp'
    }
  }
}
</script>

<style>
.content {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

配置页面路由

在 pages.json 中注册页面路径，设置页面样式和导航栏信息。pages 数组的第一项默认为应用启动页。

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    }
  ]
}

动态页面传参

通过 URL 参数传递数据，在目标页面的 onLoad 生命周期中接收参数。

<script>
export default {
  onLoad(options) {
    console.log('接收参数:', options.id)
  }
}
</script>

跳转时传递参数：

uni.navigateTo({
  url: '/pages/detail/detail?id=123'
})

页面生命周期

常用生命周期函数包括 onLoad、onShow、onReady、onHide 和 onUnload。这些函数需与 export default 同级。

<script>
export default {
  onLoad() {
    console.log('页面加载')
  },
  onShow() {
    console.log('页面显示')
  }
}
</script>

页面通信

使用 uni.$emit 和 uni.$on 实现跨页面事件通信。

发送页面：

uni.$emit('update', { data: '新数据' })

接收页面：

uni.$on('update', (data) => {
  console.log('接收数据:', data)
})

页面返回传值

使用 uni.navigateBack 传递数据，配合 getCurrentPages 获取页面栈。

const pages = getCurrentPages()
const prevPage = pages[pages.length - 2]
prevPage.$vm.pageData = '返回数据'
uni.navigateBack()

前页通过 onBackPress 或 onShow 接收数据：

<script>
export default {
  onShow() {
    console.log('接收返回数据:', this.pageData)
  }
}
</script>