1、项目页面基本配置（pages.json 文件的 配置）
pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。
常用配置项
| 属性 | 类型 | 必填 | 描述 | 平台兼容 |
|---|---|---|---|---|
| globalStyle | Object | 否 | 设置默认页面的窗口表现 | |
| pages | Object Array | 是 | 设置页面路径及窗口表现 | |
| tabBar | Object | 否 | 设置底部 tab 的表现 |
更多请参考官网详解：
https://uniapp.dcloud.net.cn/collocation/pages.html#globalstyle
主要在pages.json 中配置了pages 、 globalStyle 、 tabBar 三项。预览效果如下：
基本配置后预览效果图
pages.json 代码如下：
{
//单页配置
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
// pages内个性化定义页面配置，最上面为首页
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "励志大学堂"
}
},
{
"path" : "pages/cates/cates",
"style" :
{
"navigationBarTitleText" : "分类",
"enablePullDownRefresh" : false
}
},
{
"path" : "pages/cars/cars",
"style" :
{
"navigationBarTitleText" : "购物车",
"enablePullDownRefresh" : false
}
},
{
"path" : "pages/mine/mine",
"style" :
{
"navigationBarTitleText" : "个人中心",
"enablePullDownRefresh" : false
}
}
],
//全局页面配置
"globalStyle": { //项目全局样式，如果某个页面没有单独定义样式，则默认使用全局样式
"navigationBarTextStyle": "white", //默认 页面标题颜色，只能设置 黑色或者白色
"navigationBarTitleText": "大学堂",//默认页面标题内容
"navigationBarBackgroundColor": "#ff4400", //默认页面标题背景颜色
"backgroundColor": "#F8F8F8",
//"navigationStyle":"custom" //默认default 为custom时，页面顶部标题不显示
"titleImage":"static/logo4.png" //顶部标题图片替换文字 ，当设置图片后 ‘navigationBarTitleText’失效
},
"tabBar": {
"color": "#333", //页面名称默认文本颜色
"selectedColor": "#ff4400", //被选中时 页面名称文本 颜色
"list": [ //list数组内包含 底部导航对象
{
"pagePath": "pages/index/index", //页面路径 不要加 ‘ ./ ’
"text": "首页", //页面名称 文字
"iconPath": "../static/tabbar-index.png", //页面图标路径
"selectedIconPath": "../static/tabbar-index-active.png" //活动时 页面图标路径
},
{
"pagePath": "pages/cates/cates",
"text": "首页",
"iconPath": "../static/tabbar-cate.png",
"selectedIconPath": "../static/tabbar-cate-active.png"
},
{
"pagePath": "pages/cars/cars",
"text": "首页",
"iconPath": "../static/tabbar-car.png",
"selectedIconPath": "../static/tabbar-car-active.png"
},
{
"pagePath": "pages/mine/mine",
"text": "首页",
"iconPath": "../static/tabbar-mine.png",
"selectedIconPath": "../static/tabbar-mine-active.png"
}
]
},
"uniIdRouter": {}
}
2、首页制作
（1）搜索栏制作
UI框架：uView 2.0组件
组件名称：Search 搜索
参考官网教程及代码：https://www.uviewui.com/components/search.html
<template>
<u-search placeholder="日照香炉生紫烟" v-model="keyword"></u-search>
</template>
<script>
export default {
data() {
return {
keyword: '遥看瀑布挂前川'
}
}
}
</script>
index.vue代码如下：
<template>
<view class="content">
<view class="search">
<u-search
searchIconColor="#ff4400"
searchIconSize="30"
shape="round"
placeholder="请输入搜索内容"
margin="20rpx"
height="72rpx"
:showAction="false"
@clickIcon = "mySearch"
v-model="keywords"></u-search>
</view>
</view>
</template>
<script>
export default {
data() {
return {
keywords:''
}
},
methods: {
mySearch(){
console.log("搜索内容是："+ this.keywords)
}
}
}
</script>
<style lang="scss">
.content {
.search{
width: 100%;
}
}
</style>
（2）轮播图制作
UI框架：uView 2.0组件
组件名称：轮播图
参考官网网址：https://www.uviewui.com/components/swiper.html
基本使用
通过list参数传入轮播图列表值，该值为一个数组，键值为图片路径，例如：
<template>
<u-swiper
:list="list1"
@change="change"
@click="click"
></u-swiper>
</template>
<script>
export default {
data() {
return {
list1: [
'https://cdn.uviewui.com/uview/swiper/swiper1.png',
'https://cdn.uviewui.com/uview/swiper/swiper2.png',
'https://cdn.uviewui.com/uview/swiper/swiper3.png',
]
}
}
}
</script>
本例通过在线获取服务器轮播图资源渲染到页面。
<template>
<view class="content">
<view class="search">
<u-search
searchIconColor="#ff4400"
searchIconSize="30"
shape="round"
placeholder="请输入搜索内容"
margin="20rpx"
height="72rpx"
:showAction="false"
@clickIcon = "mySearch"
v-model="keywords"></u-search>
</view>
<!--轮播图 banner_list -->
<view>
<u-swiper
class="u-swiper"
indicator
indicatorActiveColor="red"
indicatorInactiveColor="#ddd"
indicatorMode="dot"
:height="160"
interval="2000"
:list="banner_list"></u-swiper>
</view>
<view>123</view>
</view>
</template>
<script>
export default {
data() {
return {
keywords:'',
banner_list:[] //轮播图数据-初始化
}
},
mounted() {
this.getBannerData(); //页面加载完成后，获取轮播图数据
},
methods: {
mySearch(){
console.log("搜索内容是："+ this.keywords)
},
getBannerData(){
uni.request({
url: 'http://139.196.29.250:8080/wx/home/index', //index页面数据 api
method: 'GET',
success: ({data}) => {
// console.log(data);
this.banner_list = data.data.banner;
this.banner_list= data.data.banner;
console.log(this.banner_list)
},
fail: () => {},
complete: () => {}
});
}
}
}
</script>
<style lang="scss">
.content {
.search{
width: 100%;
}
.u-swiper{
}
}
</style>
针对上面代码中uView组件相关属性解释如下图所示：
uView组件轮播图常用属性解释
（3）宫格图片导航制作
UI框架：uView 2.0组件
组件名称：Grid宫格组件
参考官网网址：https://www.uviewui.com/components/grid.html
基本使用
通过list参数传入轮播图列表值，该值为一个数组，键值为图片路径，例如
Grid Props
| 参数 | 说明 | 类型 | 默认值 | 可选值 | |
|---|---|---|---|---|---|
| col | 宫格的列数 | String | Number | 3 | - |
| border | 是否显示宫格的边框 | Boolean | true | false | |
| align | 宫格的对齐方式，用于控制只有一两个宫格时的对齐场景 | String | left | center / right |
Grid-item Props
| 参数 | 说明 | 类型 | 默认值 | 可选值 | |
|---|---|---|---|---|---|
| name | 宫格的name | String | Number | - | - |
| bgColor | 宫格的背景颜色 | String | transparent(背景透明) | - |
Grid Event
注意：请在<u-grid></u-grid>上监听此事件
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| click | 点击宫格触发 | name |
Grid-item Event
注意：请在<u-grid-item></u-grid-item>上监听此事件
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| click | 点击宫格触发 | name |
预览效果图如下：
宫格图片导航效果图
项目目录
index.vue代码如下：
<template>
<view class="content">
<view class="search">
<u-search
searchIconColor="#ff4400"
searchIconSize="30"
shape="round"
placeholder="请输入搜索内容"
margin="20rpx"
height="72rpx"
:showAction="false"
@clickIcon = "mySearch"
v-model="keywords"></u-search>
</view>
<!--轮播图 banner_list -->
<view>
<u-swiper
class="u-swiper"
indicator
indicatorActiveColor="red"
indicatorInactiveColor="#ddd"
indicatorMode="dot"
:height="160"
interval="2000"
:list="banner_list"></u-swiper>
</view>
<!-- 宫格 图片导航 -->
<view>
<u-grid
:border="false"
col="5"
>
<u-grid-item
class="u-grid-item"
v-for="(listItem,listIndex) in imgNavList"
:key="listIndex"
@click="gridClick"
>
<u-icon
:customStyle="{paddingTop:20+'rpx'}"
:name="listItem.iconUrl"
:size="40"
></u-icon>
<text class="grid-text"> {{listItem.name}}</text>
</u-grid-item>
</u-grid>
<u-toast ref="uToast" />
</view>
<u-toast class="u-toast" ref="uToast" /> <!-- 提示信息 -->
</view>
</template>
<script>
export default {
data() {
return {
keywords:'',
banner_list:[] ,//轮播图数据-初始化
imgNavList:[] //宫格图片导航数据-初始化
}
},
mounted() {
this.getBannerData(); //页面加载完成后，获取轮播图数据
},
methods: {
mySearch(){
console.log("搜索内容是："+ this.keywords)
},
getBannerData(){
uni.request({
url: 'http://139.196.29.250:8080/wx/home/index', //index页面数据 api
method: 'GET',
success: ({data}) => {
// console.log(data);
//banner
this.banner_list = data.data.banner;
this.banner_list= data.data.banner;
// console.log(this.banner_list)
//宫格 图片导航
console.log(data)
this.imgNavList = data.data.channel
},
fail: () => {},
complete: () => {}
});
},
// 宫格 图片导航 鼠标单击响应
gridClick(e){
console.log(e)
switch (e){
case 0: //居家
console.log(this.$router)
// this.$router.push('/pages/case_nav/case_jvjia/case_jvjia'); 小程序页面报错
uni.navigateTo({ //跳转指定页面
url: '/pages/case_nav/case_jvjia/case_jvjia'
});
break;
case 1: //餐厨
uni.navigateTo({ //跳转指定页面
url: '/pages/case_nav/canchu/canchu'
});
break;
case 2: //饮食
uni.navigateTo({ //跳转指定页面
url: '/pages/case_nav/yinshi/yinshi'
});
break;
case 3: //配件
uni.navigateTo({ //跳转指定页面
url: '/pages/case_nav/peijian/peijian'
});
break;
case 4: //服装
uni.navigateTo({ //跳转指定页面
url: '/pages/case_nav/fuzhuang/fuzhuang'
});
break;
default: //其他
this.$refs.uToast.success(`点击了第${e+1}个`);
break;
}
}
}
}
</script>
<style lang="scss">
.content {
.search{
width: 100%;
}
.u-swiper{
}
.u-grid-item{
margin-top: 20rpx;
.grid-text{
font-size: 24rpx;
margin-top: 20rpx;
color: #333;
}
}
.u-toast{
background-color: red !important;
}
}
</style>
