通过开源项目学习前端代码第一天,目标是创建一个文章模块的页面和底部tab按钮。
一、新建页面
在uni-app项目中,一个页面就是一个符合Vue SFC规范的vue文件。
uni-app中的页面,默认保存在工程根目录下的pages目录下。每次新建页面,都需要在pages.json中的pages列表中配置。
pages.json是页面路由文件,用来对uni-app进行全局配置,决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar等。
1.新建vue文件
我们在pages文件夹下,创建一个article文件夹,再在article文件夹下创建一个名为article.vue的文件。
使用HBuilderX内置的默认模板生成vue文件后的内容如下
// article.vue文件
<template>
<!-- 模板组件区:
页面元素布局,html标签 -->
</template>
<script>
<!-- 脚本区
js代码,业务逻辑处理,接口请求 -->
export default {
data() {
return {
}
}
}
</script>
<style>
<!-- 样式区
页面元素样式:背景色、字体色、圆角渐变等.. -->
</style>
2.pages.json配置
新建完vue文件后,需要到pages.json中添加对应的对象
{
"pages": [
{
"path": "pages/index/index", //名字叫不叫index无所谓,位置在第一个,就是首页
"style": {
"navigationBarTitleText": "首页" //页面标题
}
},
// ...
// article.vue对应配置 >>>>>>>>
{
"path": "pages/article/article",
"style": {
"navigationBarTitleText": "文章模块"
}
},
],
// ...
}
二、tabBar配置
vue页面创建完毕后,我们需要一个页面入口。我们在底部配置一个文章tab,在pages.json中的tabBar对象中配置,tabBar可设置2~5个tab。
1.pages.json配置
{
"pages": [
{
"path": "pages/index/index", //名字叫不叫index无所谓,位置在第一个,就是首页
"style": {
"navigationBarTitleText": "首页" //页面标题
}
},
// ...
// article.vue对应配置 >>>>>>>>
{
"path": "pages/article/article",
"style": {
"navigationBarTitleText": "文章模块"
}
},
],
// ...
,
"tabBar": {
// tabBar 设置底部 tab 的表现
"color": "#909399",
"selectedColor": "#2979ff",
"borderStyle": "white",
"backgroundColor": "#ffffff",
"list": [{
"pagePath": "pages/index/index",
"iconPath": "static/index.png",
"selectedIconPath": "static/index-selected.png",
"text": "首页"
}, {
// 为新的article页面配置到底部tab栏
"pagePath": "pages/article/article",
"iconPath": "static/location.png",
"selectedIconPath": "static/location-selected.png",
"text": "文章"
}, {
"pagePath": "pages/center/center",
"iconPath": "static/center.png",
"selectedIconPath": "static/center-selected.png",
"text": "我的"
}]
}
}
此时运行的页面显示如下,我们得到了一个文章底部tab栏和一个空白的页面
我们需要在vue文件中继续补充信息,使空白页面丰富起来,达到我们的目标样式。简单添加一个头部导航栏标题和一行文字。
// article.vue
<template>
<!-- uview 内置样式 -->
<view class="u-p-l-10 u-p-r-10">
<!-- u-navbar导航栏组件,主要用于头部导航 -->
<u-navbar :is-back="false" title="文章模块" :border-bottom="false">
</u-navbar>
<view>
文章列表待更新...
</view>
</view>
</template>
...
最终效果:
三、尾声
本文已跳过nodejs下载安装、npm安装等内容。
建议使用HBuilderX编译器。