uni app 记录案例分享（2） 页面创建

uni app 记录案例分享（2） 页面创建

• ​​初​​

• ​​页面创建​​

• ​​新建项目​​
• ​​选择默认模板​​
• ​​项目结构：​​
• ​​新增页面​​
• ​​配置页面文件​​
• ​​首页​​

初

希望能写一些简单的教程和案例分享给需要的人

页面创建

新建项目

1. 在“文件”目录上悬停指针
2. 在“新建”菜单上悬停指针
3. 在“项目”菜单上，点击（左键）

如下图指针位置

选择默认模板

1. 输入项目名称，我这边是自己测试项目，填写的 DaoPorject002
2. 选择默认模板
3. 点击创建按钮，创建项目

项目结构：

前面两个文件夹：

1. pages：页面
2. static：静态文件

这两个文件夹内有默认的一些页面和 logo，这个logo不是软件的logo 是静态资源文件的一个logo，我们待会看页面再解释

打开 index.vue 文件，我们可以看到代码中有 “/static/logo.png” ，这就是对静态文件的使用了

pages.json 文件，是对APP 页面配置的文件，如果有其他页面加入进来，我们要在这边进行一个配置

新增页面

指针悬停在 pages 文件夹上，右击
在菜单中找到 新建页面 ，并点击进入新增页面

输入页面名称，点击创建按钮

在创建的页面中加入代码：方便测试检验

我是测试页面

test.vue

<template>
  <view>
    我是测试页面
  </view>
</template>

<script>
  export default {
    data() {
      return {
        
      }
    },
    methods: {
      
    }
  }
</script>

<style>

</style>

配置页面文件

在 pages.json 中加入代码：

{
      "path": "pages/test/test",
      "style": {
        "navigationBarTitleText": "测试页面"
      }
    }

完整代码：pages.json

{
  "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "uni-app"
      }
    },
    {
      "path": "pages/test/test",
      "style": {
        "navigationBarTitleText": "测试页面"
      }
    }
  ],
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "uni-app",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8"
  },
  "uniIdRouter": {}
}

首页

index.vue

<template>
  <view class="content">
    <image class="logo" src="/static/logo.png"></image>
    <view class="text-area">
      <text class="title">{{title}}</text>
    </view>

    <view class="text-area">
      <button size="mini" @click="jumpPage01('按钮1')">按钮1</button>
      <button size="mini" @click="jumpPage01('按钮2')">按钮2</button>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        title: 'Hello'
      }
    },
    onLoad() {

    },
    methods: {
      jumpPage01(text) {
        uni.navigateTo({
          url: '/pages/test/test'
        });
        console.log(text)
      }
    }
  }
</script>

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

  .logo {
    height: 200rpx;
    width: 200rpx;
    margin-top: 200rpx;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50rpx;
  }

  .text-area {
    display: flex;
    justify-content: center;
  }

  .text-area button {
    margin: 0.5em;
    padding: 0.5em;
    width: 6em;
  }

  .title {
    font-size: 36rpx;
    color: #8f8f94;
  }

  .title {
    font-size: 36rpx;
    color: #8f8f94;
  }
</style>

运行以后效果如下：