uniapp 的使用

小鱼儿 2022-12-23 13:29 190阅读 0赞

官方网站：[https://uniapp.dcloud.io/quickstart][https_uniapp.dcloud.io_quickstart]

** 创建了一个uniapp的项目**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70][]

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

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

里面的方法很多也不清楚

**启动项目：**

![40ab5d9d5abf74814675a51dc0c184eb.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 1][]

效果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 2][]

**目录结构：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 3][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 4][]

创建的结果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 5][]

![0e1bf4c9f42d626e241c50c48796a0fd.png][]

我们运行该项目:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 6][]

展示的代码：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 7][]

其中代码在：

<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 中，我们可以看到原生的的

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 8][]

和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": "模板"
    			}
    		]
    	}

查看效果：

![20201125214934153.png][]

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

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

希望对你有所帮助！

[https_uniapp.dcloud.io_quickstart]: https://uniapp.dcloud.io/quickstart
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70]: /images/20221120/236bb723c3704648992dd445a840e12d.png
[40ab5d9d5abf74814675a51dc0c184eb.png]: https://img-blog.csdnimg.cn/img_convert/40ab5d9d5abf74814675a51dc0c184eb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/202011251328497.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201125133014775.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20201125132436912.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20201125202725403.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20201125202752307.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE=,size_16,color_FFFFFF,t_70
[0e1bf4c9f42d626e241c50c48796a0fd.png]: https://img-blog.csdnimg.cn/img_convert/0e1bf4c9f42d626e241c50c48796a0fd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20201125202858298.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20201125203118200.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20201125213149249.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE=,size_16,color_FFFFFF,t_70
[20201125214934153.png]: https://img-blog.csdnimg.cn/20201125214934153.png
[https_uniapp.dcloud.io_collocation_pages_id_tabbar]: https://uniapp.dcloud.io/collocation/pages?id=tabbar