day04 uni-app起步
2019-03-20 本文已影响0人
山下_26
1.在HBuild X中新建uni-app
2.从icon-font下载自己所需要的logo,复制到static目录下
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中写启动界面
<template>
<view class="container ">
<text class="title">主页,{{ 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>
5.在pages目录下新建目录ucenter与index并列，创建ucenter.vue和setting.vue，ucenter.vue中代码如下
<template>
<view class="content">
<view>
<text class="title">{{title}}的个人中心</text>
<navigator url="setting" hover-class="navigator-hover">
<button type="primary">个人设置<tton>
</navigator>
<view>
<view>
</template>
<script>
export default {
data() {
return {
title: '26'
}
},
onLoad() {
},
methods: {
}
}
</script>
<style>
.content {
text-align: center;
height: 400upx;
}
.title {
font-size: 36upx;
color: #8f8f94;
}
</style>
