uniapp 的使用

官方网站：​​https://uniapp.dcloud.io/quickstart​​

 创建了一个uniapp的项目

 我之前 并不是前端，但是很想开发一个自己的app 有自己的模板可以快速的实现一些应用

uniapp 这个工具也是刚开始使用

里面的方法很多也不清楚

启动项目：

 效果如下：

目录结构：

如果我们在创建的时候选择不同的模板，则默认的文件是不同，我们使用默认的 模板：

创建的结果如下：

我们运行该项目:

展示的代码：

其中代码在：

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

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

    },
    methods: {

    }
  }
</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;
  }

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

最为直观的，我们需要修改页面增加两个菜单: “我的”，“发现”

如何增加菜单

在pages.json 中，我们可以看到原生的的

和page同级目录:

  "tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#007AFF",
    "borderStyle": "black",
    "backgroundColor": "#F8F8F8",
    "list": [{
          "pagePath":"pages/index/index",
        "text": "内置组件"
      },
      {
        "pagePath":"pages/index/index",
        "text": "接口"
      }, {
         "pagePath":"pages/index/index",
        "text": "扩展组件"
      }, {
        "pagePath":"pages/index/index",
        "text": "模板"
      }
    ]
  }

查看效果：

关于底部的菜单还有其他的配置 可以查看官网:​​https://uniapp.dcloud.io/collocation/pages?id=tabbar​​

上面是第一次使用uniapp 设置页面下面的菜单，边做边写，如果不好，请多多包涵、。

希望对你有所帮助！