# 一、引入UI框架
我们 本季度主要以让同学们学会使用UI框架，来快速开发我们的项目，我们会在后面季度的课程，带领大家开发自己的UI组件库和框架，所以大家不用着急，一步一步来！
关于uni-app的UI框架非常多，我们以uView UI框架为例，官网地址： https://uviewui.com/ (opens new window)，来给大家作说明：
引入安装步骤 （两种方式：Hbuilder X方式、NPM方式），以Hbuilder X方式为例：
- 在uni-app插件市场右上角选择uni_modules版本下的使用HBuilderX导入插件，导入到对应的项目中即可。
注意： 此安装方式必须要按照: 下载方式安装的配置 https://uviewui.com/components/downloadSetting.html (opens new window) 中的说明配置了才可用，下载地址：https://ext.dcloud.net.cn/plugin?id=1593 (opens new window)。
下载安装方式配置: https://uviewui.com/components/downloadSetting.html (opens new window)- 在HX菜单的 工具->插件安装中找到"scss/sass编译"插件进行安装， 如不生效，重启HX即可;
- 引入uView主JS库
// 在项目根目录中的main.js中，引入并使用uView的JS库，注意这两行要放在import Vue之后
// main.js
import uView from '@/uni_modules/uview-ui'
Vue.use(uView)
- 在引入uView的全局SCSS主题文件
// 在项目根目录的uni.scss中引入此文件
/* uni.scss */
@import '@/uni_modules/uview-ui/theme.scss';
- 引入uView基础样式
// 注意: 在App.vue中首行的位置引入，注意给style标签加入lang="scss"属性
<style lang="scss">
/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
@import "@/uni_modules/uview-ui/index.scss";
</style>
- 配置easycom组件模式
// 此配置需要在项目根目录的pages.json中进行, 如果是通过uni_modules形式引入uView，可以忽略此配置
// pages.json
{
// 如果您是通过uni_modules形式引入uView，可以忽略此配置
"easycom": {
"^u-(.*)": "@/uni_modules/uview-ui/components/u-$1/u-$1.vue"
},
// 此为本身已有的内容
"pages": [
// ......
]
}
# 二、项目配置
# 1、 底部导航栏
uni-app官方教程 https://uniapp.dcloud.net.cn/ (opens new window)
关于底部导航栏，我们有两种处理方案：
- 通过
pages.json文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。具体文档：https://uniapp.dcloud.net.cn/collocation/pages.html#配置项列表 (opens new window)- 通过我们的UI框架，已经给你配置好了底部导航栏，选择一种你喜欢的样式配置即可，具体查看：https://uviewui.com/components/tabbar.html (opens new window)
由于我们本季度，很多同学都是从小白开始，首次开发移动端的项目，作为移动端开发的入门课程，在本个季度主要是教会大家如何搭建和快速开发我们移动端的：H5、小程序、app等项目，让大家先有一个了解和掌握，在下个季度课程会慢慢教大家如何自定义开发组件和框架，让知识有一个循序渐进的过程。
因此，我们采用第二种方案，来配置我们的底部导航栏。
# ① 底部导航栏属性样式设置
<template>
<view >
<!-- 底部导航栏 -->
<u-tabbar :value="0" :safeAreaInsetBottom="true" :border="true"
:zIndex="100" activeColor="#07C160" inactiveColor="#ff6600"
:fixed="true" :placeholder="true">
<u-tabbar-item text="首页" icon="home" ></u-tabbar-item>
<u-tabbar-item text="放映厅" icon="photo" ></u-tabbar-item>
<u-tabbar-item text="直播" icon="play-right" ></u-tabbar-item>
<u-tabbar-item text="我的" icon="account" ></u-tabbar-item>
</u-tabbar>
</view>
</template>
# ② 底部导航栏事件
<template>
<view>
<u-tabbar :value="tabbarValue" :safeAreaInsetBottom="true" :border="true"
:zIndex="1" activeColor="#1989fa" inactiveColor="#7d7e80"
:fixed="true" :placeholder="true"
@change="changeTabbar">
<u-tabbar-item text="首页" icon="home" ></u-tabbar-item>
<u-tabbar-item text="主营业务" icon="level" :badge="9" @click="openurl('打开主营业务')"></u-tabbar-item>
<u-tabbar-item text="工程案例" icon="list-dot" :dot="true" ></u-tabbar-item>
<u-tabbar-item text="联系我们" icon="chat-fill"></u-tabbar-item>
</u-tabbar>
</view>
</template>
<script>
export default {
data() {
return {
tabbarValue:0,
}
},
onLoad() {
},
methods: {
//底部tabbar切换
changeTabbar(name) {
this.tabbarValue = name
},
//点击底部tabbar某一项
openurl(url){
console.log(url);
}
}
}
</script>
<style>
</style>
# 2、顶部导航栏设置
// index.vue
<template>
<view>
<!-- 顶部导航栏 -->
<!-- #ifdef APP-PLUS || MP-WEIXIN -->
<u-navbar title="首页" bgColor="#1989fa" :safeAreaInsetTop="true" :placeholder="true"
fixed :border="false" leftText="返回" rightText="分享" rightIcon="share-square"
titleWidth="400rpx" height="44px" leftIconSize="20px" leftIconColor="#ffffff"
titleStyle="color:#ffffff;">
<view slot="left"></view>
<view slot="right">
<!-- #ifdef APP-PLUS -->
<u-icon name="more-dot-fill" size="19" color="#ffffff"></u-icon>
<!-- #endif -->
</view>
</u-navbar>
<!-- #endif -->
<view>123</view>
<view>345</view>
<view>456</view>
<view>678</view>
...
<view>
<template>
// page.json
{
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "睿晨电网建设首页",
"navigationStyle":"custom" ,// 隐藏系统导航栏
"navigationBarTextStyle": "white" // 状态栏字体为白色，只能为 white-白色，black-黑色 二选一
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "睿晨电网建设",
"navigationBarBackgroundColor": "#1989fa",
"backgroundColor": "#F8F8F8"
},
"uniIdRouter": {}
}