1.新建first-uni-app项目
1.png
项目初始目录
2.png
2.调整项目结构
3.png
3.配置pages.json
{
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "主页"
}
},
{
"path": "pages/ucenter/ucenter",
"style": {
"navigationBarTitleText": "主页"
}
},
{
"path": "pages/ucenter/setting",
"style": {
"navigationBarTitleText": "个人设置"
}
}
],
"tabBar":{
"color":"#000000",
"selectedColor":"#2F85FC",
"backgroundColor":"#FFFFFF",
"borderStyle":"black",
"list":[
{
"pagePath":"pages/index/index",
"iconPath":"static/home.png",
"selectedIconPath":"static/home-active.png",
"text":"主页"
},
{
"pagePath":"pages/ucenter/ucenter",
"iconPath":"static/center.png",
"selectedIconPath":"static/center-active.png",
"text":"我的"
}
]
},
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
}
}
4.index.vue
<template>
<view class="content">
<view>
<text class="title">{{title}}</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello'
}
},
onLoad() {
},
methods: {
}
}
</script>
<style>
.content {
text-align: center;
height: 400upx;
}
.title {
font-size: 36upx;
color: #8f8f94;
}
</style>
5.ucenter.vue
<template>
<view class="content">
<view>
<text class="title">{{name}}</text>
<!-- 超链接 -->
<navigator url="setting" hover-class="navigator-hover">
<button type="primary">个人设置</button>
</navigator>
</view>
</view>
</template>
<script>
export default {
data() {
return {
name: '王欣雅'
}
},
onLoad() {
},
methods: {
}
}
</script>
<style>
.content {
text-align: center;
height: 400upx;
}
.title {
font-size: 36upx;
color: #8f8f94;
}
</style>
6.启动雷电模拟器或真机运行
控制台显示
4.png
运行结果
5.png
点我的可以跳转到我的界面
6.png
点设置可以跳转到设置界面
7.png
注
uni-app官网：https://uniapp.dcloud.io/
阿里巴巴矢量图标库：https://www.iconfont.cn/
