-
1.在HBuilderX中新建uni-app
image -
項(xiàng)目結(jié)構(gòu)圖
image 配置pages.json文件
{
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "主頁(yè)"
}
},
{
"path": "pages/ucenter/ucenter",
"style": {
"navigationBarTitleText": "我的"
}
},
{
"path": "pages/ucenter/setting",
"style": {
"navigationBarTitleText": "個(gè)人設(shè)置"
}
}
],
"tabBar": {
"color": "#000000",
"selectedColor": "#2F85FC",
"backgroundColor": "#FFFFFF",
"borderStyle": "black",
"list": [
{
"pagePath": "pages/index/index",
"iconPath": "static/home.png",
"selectedIconPath": "static/home-active.png",
"text": "主頁(yè)"
},
{
"pagePath": "pages/ucenter/ucenter",
"iconPath": "static/center.png",
"selectedIconPath": "static/center-active.png",
"text": "我的"
}
]
},
"globalStyle": {
"navigationBarTextStyle": "white",
"navigationBarBackgroundColor": "#2F85FC",
"backgroundColor": "#FFFFFF"
}
}
- 在pages中簡(jiǎn)單寫(xiě)一下index.vue和ucenter.vue
index.vue
<template>
<view class="container ">
<text class="title">主頁(yè),{{ title }}</text>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello'
};
},
onLoad() {},
methods: {}
};
</script>
<style>
.container {
width: 95%;
margin: 0 auto;
text-align: center;
}
.title {
font-size: 36upx;
color: #8f8f94;
}
</style>
ucenter.vue
<template>
<view class="container">
<text>{{ name }}的個(gè)人中心</text>
<navigator url="../ucenter/setting" hover-class="navigator-hover">
<button type="default">設(shè)置</button>
</navigator>
</view>
</template>
<script>
export default {
data() {
return {
name: '陶然然'
};
},
onLoad() {},
methods: {}
};
</script>
<style>
.container {
width: 95%;
margin: 0 auto;
text-align: center;
}
</style>
-
啟動(dòng)雷神模擬器蛤铜，選擇真機(jī)運(yùn)行（快捷鍵crtl+r）
image -
控制臺(tái)顯示
image -
模擬器運(yùn)行顯示
image
