本章正式进入项目页面开发环节，将带大家完整的实现项目中的首页，涵括的功能点包含组件拆分、导航栏引入、banner 轮播、跳转等难点的讲解。

# 去除顶部标题栏

首先看页面布局，页面部分可以分为2个小块：轮播图，歌单滑动等小块。

以上图作为 UI 设计稿，我们需要做的是完善页面内容，开发代码以上一节的架构代码为基础，调试以浏览器为优先。

Uniapp 默认情况下在 h5 端的是有 title 标题栏的，如果需要去掉就要在配置文件进行设置，这是未改之前的图片：

当前开发的音乐应用是不需要标题栏的，找到项目的根目录下的 pages.json 文件，添加一下内容，可以去掉对应页面的导航栏，设置 app-plus 的 titleNView 为 false 即可；

/* pages.json */

"pages": [
    {
     "path": "pages/index/index",
        "style": {
            "navigationBarTitleText": "发现",
            "app-plus":{
                "titleNView": false
            }
        }
    }
]

@前端进阶之旅: 代码已经复制到剪贴板

而且作为首页（启动的第一个页面），这个页面需要在 pages 数组中放在第一位，项目在启动的时候就会以此作为第一个启动页。

这样的 banner 轮播图交互可以选择 swiper 组件来完成，配置查看，代码：

<swiper class="swiper">
    <swiper-item>
        <view class="swiper-item">包含的内容</view>
    </swiper-item>
</swiper>

@前端进阶之旅: 代码已经复制到剪贴板

Uniapp 的 swiper 组件为滑块视图容器，可以用于左右滑动或上下滑动，比如 banner 轮播图。注意是滑动切换而不是滚动。swiper 下的每个 swiper-item 是一个滑动切换区域，不能停留在2个滑动区域之间。这样的交互效果完美契合了我们要完成的轮播图。

由 swiper 包裹 item 组件，swiper 接受配置参数，完成轮播的特效，我们要实现滑动动画时长300毫秒(duration="300")，显示面板指示点（轮播图中间的导航小点）(indicator-dots="true")，自动播放轮播图(autoplay="true")，当前选中的指示点颜色为黑色(indicator-active-color="#000")的设定：

<swiper class="swiper" indicator-dots="true"  indicator-active-color="#000" autoplay="true" interval="interval" >
    <swiper-item>
        <view class="swiper-item uni-bg-red">A</view>
    </swiper-item>
</swiper>

@前端进阶之旅: 代码已经复制到剪贴板

我们实现的是需要有圆角的 banner 轮播图，对每个 item 项目设置样式即可。

我们只是书写了样式，怎么让数据对应呢？

# 完成数据请求与数据绑定

跟后台交互的时候，我们需要请求后台数据，Uniapp 有自己封装好的api，通俗易通，跟 jQuery 的 ajax 基本类似，依葫芦画瓢的就行，在 success 前面，是请求完成的回调，比如我会在请求前做一个 loading（菊花）状态呈现在页面，在请求完成后再把 loading 隐藏掉，这个也算是用户体验的一种，让用户预感到一个交互状态在进行中，心里有个预期感，如果网络不好的情况下，这样的作用会显得尤为重要，文档查看。

uni.request({
    url: 'http://localhost:3000/personalized',
    method: 'GET',
    header:{},
    data: {},
    success: res => {   // 请求成功的状态
    },
    fail: () => {  // 失败
    },
    complete: () => {   // 接口调用结束的回调函数（调用成功、失败都会执行）
    }
});

@前端进阶之旅: 代码已经复制到剪贴板

根据上面代码，我们可以引用到首页开发页面中去，并实现一个请求轮播图数据并伴有状态（loading）小动画，来完成轮播图数据的交互，并在页面 onLoad 后调用这个方法：

/* pages/index/index.vue */
// ...
data () {
    return {
        swiper: [],
        loading: false
    }
},
onLoad() {
    this.getBanner()
},
methods: {
    // 获取轮播图
    getBanner() {
        // 正在加载状态
        this.loading = true
        uni.request({
            url: 'http://localhost:3000/banner',
            method: 'GET',
            data: {},
            success: res => {
                this.swiper = res.data.banners
            },
            complete: () => {
                // 加载完成状态
                this.loading = false
            }
        });
    }
}

// ...

@前端进阶之旅: 代码已经复制到剪贴板

关于请求的报错，加载 loading 等，都封装在了项目的 request 工具中。因此我们改为 api 的方法来完成请求，在 apis 文件夹中新增 index.js：

/* apis/index.js */

import request from '@/utils/request/index.js'

export function apiGetBanner(data) {
    return request.request({
        url: '/banner',
        method: 'GET',
        data: data,
        authType: 'None'
    })
}

@前端进阶之旅: 代码已经复制到剪贴板

注意： @ 代表的是开发目录，这是路径别名。

/* pages/index/index.vue */

import { apiGetBanner } from '@/apis/index.js';

// ...
data () {
    return {
        swiper: [],
    }
},
onLoad() {
    this.getBanner()
},
methods: {
    // 获取轮播图
    getBanner() {
        apiGetBanner().then(res => {
            this.swiper = res.banners
        })
    },
}

// ...

@前端进阶之旅: 代码已经复制到剪贴板

数据可以直接赋值到 model 中的 data 里面，视图 template 直接对应即可：

<view class="banner">
    <swiper class="swiper" :autoplay="true" :indicator-dots="true" indicator-active-color="#ff372b"
     indicator-color='rgba(255,255,255, .5)' duration="500" :circular="true">
        <swiper-item v-for="(item,index) in swiper" :key="index">
            <view class="item">
                <image :src="item.imageUrl" class="img"></image>
                <view class="tag">{{item.typeTitle}}</view>
            </view>
        </swiper-item>
    </swiper>
</view>

@前端进阶之旅: 代码已经复制到剪贴板

Uniapp 处理了小程序 this.setData({}) 数据赋值方式，我们可以直接使用 this.swiper = res.banners 进行赋值，如果原有的小程序项目需要更改这种赋值方式，或者更改重写 setData 方法：

setData: function (obj) {
    let that = this;
    let keys = [];
    let val,data;
    Object.keys(obj).forEach(function (key) {
      keys = key.split('.');
      val = obj[key];
      data = that.$data;
      keys.forEach(function (key2, index) {
          if (index+1 == keys.length) {
              that.$set(data,key2,val);
          } else {
              if (!data[key2]) {
                 that.$set(data,key2,{});
              }
          }
          data = data[key2];
      })
    });
}

@前端进阶之旅: 代码已经复制到剪贴板

更多微信小程序转换 Uniapp 详细指南、小程序转 Uniapp 转换器、wepy 转 Uniapp 需求可以对照，前往ask.dcloud.net.cn/article/357…

# 主入口的代码实现

这一块的开发看起来相对简单，实际上处理起来可以以更优雅的方式来处理（这一块由于接口的限制也做进一步的说明）。

主入口有五个（包含文字与图标），这些内容都是动态的，不可能把内容直接写死在代码上，在实际业务下需要读取接口。其实前端在实际开发的时候就需要对产品原型有一定了解与前瞻性，哪些是可变的，哪些是不变的，都心里有个底。

在项目准备之初，就已经搭建好整个项目的基本架构（考虑好基本开发），全局样式的引入，通用 js 方法，全局变量等等。这些都是为了更快捷方便的开发整个项目，现在就是使用的时候了。

我把这一块拿出来说，因为大部分开发人员注重 js 逻辑层的书写，往往忽略了基础的 css。往下看，你就会了解到前端 css 显得像利刃一样，开发来的简便快捷一些。像这样等分排列样式，可以用 flex 伸缩盒进行书写构建：

我已经在 common.scss 定义了样式类名 flex-box, flex-item:

<!-- common/css/common.scss -->
.flex-box{
    display:flex;
    .flex-item{
        flex:1;
    }
}

@前端进阶之旅: 代码已经复制到剪贴板

书写页面代码的时候可以直接对应元素搭建 dom 样式:

<view class="main-bar flex-box">
    <view class="flex-item" v-for="(item, index) in contentBar" :key="index">
        <image :src="'/static/image/index/t_' + (index + 1) + '.png'" class="img"></image>
        <view>{{item.name}}</view>
        <view v-if="index == 0" class="date">{{curDate}}</view>
    </view>
</view>
// data数据
// ...

contentBar: [
    { name: "每日推荐" },
    { name: "歌单" },
    { name: "排行榜" },
    { name: "电台" },
    { name: "直播" }
],

@前端进阶之旅: 代码已经复制到剪贴板

上面的代码可以基本的实现样式等比排列，你会看到：

你可能心里在骂“弄了半天，怎么还是这样？”

上面简单的几行就可以实现效果，标题文字的行高和排列由最外层父级决定（line-height，text-align会继承）。可能你会想起以前自己写的代码：

分析组件：

# 去除顶部标题栏

# 首页 banner 轮播（swiper组件使用）

# 完成数据请求与数据绑定

# 主入口的代码实现

实战3_导航一 发现的页面开发|uniapp专题

实战3_导航一 发现的页面开发|uniapp专题

实战3_导航一发现的页面开发|uniapp专题

实战3_导航一发现的页面开发|uniapp专题