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 设置页面下面的菜单，边做边写，如果不好，请多多包涵、。

希望对你有所帮助！