Uniapp添加页面页面详解

在 Uniapp 中添加新页面是一个非常简单的过程，只需按照以下步骤即可：

1. 打开 HBuilderX，新建一个 Uniapp 项目。

2. 在项目中，右键单击要添加页面的文件夹，然后选择“新建”>“页面”。

3. 在弹出的“新建页面”对话框中，输入新页面的名称，然后选择要使用的模板。

4. 单击“确定”按钮，新页面就会被创建。

5. 在 HBuilderX 中，双击新创建的页面文件，即可开始编辑页面代码。

6. 在页面代码中，可以使用 Vue.js 的语法来构建页面内容。

7. 在 pages.json 文件中，注册新创建的页面。

8. 在需要跳转到新页面的地方，使用 Vue.js 的 router.push() 方法进行跳转。

9. 运行项目，即可看到新添加的页面。

以下是详细介绍：

在 HBuilderX 中新建页面

在 HBuilderX 中，新建一个页面的步骤如下：

1. 可直接从项目上右键或者从某个文件夹上面右键，选择“新建”>“页面”。

2. 输入项目名称和项目使用的模板。

3. 选择是否在 pages.json 中进行注册，注意：所有需要单独编译的页面都需要在 pages.json 中进行注册。

4. 单击“确定”按钮，新页面就会被创建。

在 pages.json 中注册页面

在 pages.json 文件中，注册新创建的页面。pages.json 文件位于项目根目录下，它是一个 JSON 文件，用于配置项目中的页面。

在 pages.json 文件中，添加如下代码：

{
  "pages": [
    "pages/index/index",
    "pages/new-page/new-page"
  ]
}

其中，pages/new-page/new-page 表示新创建的页面。

使用路由在不同页面之间跳转

在需要跳转到新页面的地方，使用 Vue.js 的 router.push() 方法进行跳转。例如，在 index.vue 文件中，添加如下代码：

<template>
  <div>
    <button @click="goToNewPage">跳转到新页面</button>
  </div>
</template>

<script>
export default {
  methods: {
    goToNewPage() {
      this.$router.push('/new-page')
    }
  }
}
</script>

这样，当用户点击按钮时，就会跳转到新页面。

运行项目

运行项目，即可看到新添加的页面。在 HBuilderX 中，单击“运行”按钮，即可运行项目。

以上就是如何在 Uniapp 中添加新页面的详细介绍。