如何配置路由

在上一篇自学课程中，我们掌握了uniapp的基本安装方法，现在我们打开uniapp自带的hello uniapp项目看看里面有一些什么吧！

因为我们之前介绍过，uniapp其实就是小程序+vue的一个开发模式结合体。所以，他的路由route是不在js文件中的。它跟小程序一样，所有的请求响应（路由）都配置在pages.json中。

请看这张图：

我们可以发现pages.json顶部有一行小字：数组中第一项表示启动页。

然后path指向的其实就是他其中一个组件.nvue。注意，是.nvue而不是.vue。.vue只是pages中使用的组件，页面都是.nvue。

ok，我修改了其中底部菜单的图标，这里底部图标的形式跟小程序是一样的，pagePath表示点击以后跳转的路径，iconPath表示默认展示的图标，selectedIconPath表示点击以后展示的图标。

接着打开路由中的第一个页面，把里面的内容注释掉，然后随便写几个字母，完成以后是下面这个样子的：

好的，接着我们开始往自己的项目中插入内容！

使用插件市场快速完成项目

一般来说，顶部的内容应该是一个类似swiper之类的滚动图。那么我们如何快速插入一个swiper呢？

dcloud非常贴心的为我们开放了uniapp的插件市场，只要你是用xhbuilder开发的，你只需要到市场上找到你想要的插件，然后点击导入项目即可！

点击使用xhbuilder导入插件。

这里选择我们的unidemo，这是我的项目名，你选择你的项目即可。

使用插件

注意，如果安装插件以后提示你编译错误，你需要在xhbuilder中下载对应的服务插件。

接下来我们把装载的插件放置到我们自己的页面上：（这个页面我是在hello uniapp项目上直接修改的，我这个页面是component.nvue）

<template>
    <view class="banner">
        <view class="content">
            <uni-swiper-dot :info="info" :current="current" :mode="mode" :dots-styles="dotsStyles" field="content">
                <swiper class="swiper-box" @change="change">
                    <swiper-item v-for="(item, index) in info" :key="index">
                        <view :class="item.colorClass" class="swiper-item">
                            <image class="image" :src="item.url" mode="aspectFill" />
                        </view>
                    </swiper-item>
                </swiper>
            </uni-swiper-dot>
        </view>
    </view>
    
</template>

<script>
    import uniSection from '@/components/uni-section/uni-section.vue'
    import uniSwiperDot from '@/components/uni-swiper-dot/uni-swiper-dot.vue'
    export default {
        components: {
            uniSection,
            uniSwiperDot
        },
        data() {
            return {
                info: [{
                        colorClass: 'uni-bg-red',
                        url: 'https://blogdangyunlong.oss-cn-beijing.aliyuncs.com/banner1.png',
                        content: '党云龙个人博客vuecli完全配置手册'
                    },
                    {
                        colorClass: 'uni-bg-green',
                        url: 'https://blogdangyunlong.oss-cn-beijing.aliyuncs.com/banner2.png',
                        content: '党云龙个人博客es6核心开发手册'
                    }
                ],
                dotStyle: [{
                        backgroundColor: 'rgba(0, 0, 0, .3)',
                        border: '1px rgba(0, 0, 0, .3) solid',
                        color: '#fff',
                        selectedBackgroundColor: 'rgba(0, 0, 0, .9)',
                        selectedBorder: '1px rgba(0, 0, 0, .9) solid'
                    },
                    {
                        backgroundColor: 'rgba(255, 90, 95,0.3)',
                        border: '1px rgba(255, 90, 95,0.3) solid',
                        color: '#fff',
                        selectedBackgroundColor: 'rgba(255, 90, 95,0.9)',
                        selectedBorder: '1px rgba(255, 90, 95,0.9) solid'
                    },
                    {
                        backgroundColor: 'rgba(83, 200, 249,0.3)',
                        border: '1px rgba(83, 200, 249,0.3) solid',
                        color: '#fff',
                        selectedBackgroundColor: 'rgba(83, 200, 249,0.9)',
                        selectedBorder: '1px rgba(83, 200, 249,0.9) solid'
                    }
                ],
                modeIndex: -1,
                styleIndex: -1,
                current: 0,
                mode: 'round', //圆点的模式 default/dot/round/nav/indexes
                dotsStyles: { //圆点的样式
                    backgroundColor: 'rgba(83, 200, 249,0.3)',
                    border: '1px rgba(83, 200, 249,0.3) solid',
                    color: '#fff',
                    selectedBackgroundColor: 'rgba(83, 200, 249,0.9)',
                    selectedBorder: '1px rgba(83, 200, 249,0.9) solid'
                }
            }
        },
        onLoad() {},
        methods: {
            change(e) {
                this.current = e.detail.current
            },
            selectStyle(index) {
                this.dotsStyles = this.dotStyle[index]
                this.styleIndex = index
            },
            selectMode(mode, index) {
                this.mode = mode
                this.modeIndex = index
                this.styleIndex = -1
                this.dotsStyles = this.dotStyle[0]
            }
        }
    }
</script>

<style>
    /*设置一下高度*/
    .banner,.content {
        height: 300rpx;
    }
    
    /* 头条小程序组件内不能引入字体 */
    /* #ifdef MP-TOUTIAO */
    @font-face {
        font-family: uniicons;
        font-weight: normal;
        font-style: normal;
        src: url('~@/static/uni.ttf') format('truetype');
    }

    /* #endif */

    /* #ifndef APP-NVUE */
    page {
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        background-color: #efeff4;
        min-height: 100%;
        height: auto;
    }

    view {
        font-size: 28rpx;
        line-height: inherit;
    }

    .example {
        padding: 0 30rpx 30rpx;
    }

    .example-info {
        padding: 30rpx;
        color: #3b4144;
        background: #ffffff;
    }

    .example-body {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        padding: 0;
        font-size: 14rpx;
        background-color: #ffffff;
    }

    /* #endif */
    .example {
        padding: 0 30rpx;
    }

    .example-info {
        /* #ifndef APP-NVUE */
        display: block;
        /* #endif */
        padding: 30rpx;
        color: #3b4144;
        background-color: #ffffff;
        font-size: 30rpx;
    }

    .example-info-text {
        font-size: 28rpx;
        line-height: 36rpx;
    }


    .example-body {
        flex-direction: column;
        padding: 30rpx;
        background-color: #ffffff;
    }

    .word-btn-white {
        font-size: 18px;
        color: #FFFFFF;
    }

    .word-btn {
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex-direction: row;
        align-items: center;
        justify-content: center;
        border-radius: 6px;
        height: 48px;
        margin: 15px;
        background-color: #007AFF;
    }

    .word-btn--hover {
        background-color: #4ca2ff;
    }


    .swiper-box {
        height: 200px;
    }

    .swiper-item {
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: #999;
        color: #fff;
    }

    .image {
        width: 750rpx;
        height: 300rpx;
    }

    .uni-bg-red {
        background-color: #ff5a5f;
    }

    .uni-bg-green {
        background-color: #09bb07;
    }

    .uni-bg-blue {
        background-color: #007aff;
    }

    .example-body {
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex-direction: row;
        padding: 20rpx;
    }

    .example-body-item {

        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin: 15rpx;
        padding: 15rpx;
        height: 60rpx;
        /* #ifndef APP-NVUE */
        display: flex;
        padding: 0 15rpx;
        /* #endif */
        flex: 1;
        border-color: #e5e5e5;
        border-style: solid;
        border-width: 1px;
        border-radius: 5px;
    }

    .example-body-item-text {
        font-size: 28rpx;
        color: #333;
    }

    .example-body-dots {
        width: 16rpx;
        height: 16rpx;
        border-radius: 50px;
        background-color: #333333;
        margin-left: 10rpx;
    }

    .active {
        border-style: solid;
        border-color: #007aff;
        border-width: 1px;
    }
</style>

其实我们使用的这个就是uniapp自带的uni-ui，uni-ui的手册你可以到官方的插件市场中查看。龙哥这里只教你如何使用，高级的玩法就靠你自己去挖掘啦！

页面下修改完成是这样的：

因为我没有给移动端专门做一个banner，我把pc端的博客页面缩小了放在这里，各位看官就不要斤斤计较这个字看不清楚啦！

使用组件

好的，我们知道了如何引用xhbuilder插件市场的组件以后。看似好多问题直接就解决了。

但是插件市场也有一个弊端，那就是定制性不强。很多时候我们的组件是需要根据业务去变化的。

比如说这里我需要一个大标题和一个二级标题，这样的话，我再从插件市场去下载就不太好了，我可能需要自己写一个。

这个时候怎么办呢？

在外面的components文件夹中新建一个mytitle.vue，然后写入以下内容：

<template>
    <view>
        <view class="titlebox">
            <view class="titleh1">{{bigtitle}}</view>
            <view class="titleh3">{{titletext}}</view>
        </view>
    </view>
    
</template>

<script>
    export default {
        name: 'mytitle',
        props: {
            bigtitle: {
                type: String,
                default: '大标题'
            },
            titletext: {
                type: String,
                default: '小标题'
            }
        },
        methods: {
            
        }
    }
</script>
<style>
    .titlebox {
        display: flex;
        flex-direction: row; 
        font-weight: bold;
        align-items: center;
        padding: 20rpx;
        padding-bottom: 0;
    }
    .titleh1 {
        font-size:28rpx;
        color: #333;
        margin-right: 20rpx;
    }
    .titleh3 {
        font-size:24rpx;
        color: #666;
    }
</style>

这里面的props就是我们通过父级传进来的内容，这点跟vue是一模一样的。

新建好以后，再你要使用它的页面去引用：

<template>
    <view>
        <view class="banner">
        </view>
        <view class="main">
            <mytitle :bigtitle="headtitle[0]" :titletext="headtitle[1]"></mytitle>
        </view>
    </view>
</template>

<script>
    //引用大小标题
    import mytitle from '@/components/mytitle.vue'
    
    export default {
        components: {
            mytitle
        },
        data() {
            return {
                headtitle:[
                    "教程分类","免费分享前端开发技术","推荐教程","博主推荐阅读教程"                   
                ]
            }
        }
    }
</script>

<style>
</style>

然后使用同样的方法，我又创建了一个菜单和一个内容列表。因为其中的内容比较重复，并且操作方法跟上面这个一模一样。所以代码我就不贴出来了。

不过这里需要注意一点，如果你传进去的内容是一个数组，这里的写法稍微有一点不同：

listdata: {
    type: Array,
    default () {
        return [
            {name:"es6",src:"https://dangyunlong.oss-cn-beijing.aliyuncs.com/js_icon.png"},
            {name:"vuecli",src:"https://dangyunlong.oss-cn-beijing.aliyuncs.com/vue_cli.png"},
            {name:"webpack",src:"https://dangyunlong.oss-cn-beijing.aliyuncs.com/webpack_icon.png"},
            {name:"nodejs",src:"https://dangyunlong.oss-cn-beijing.aliyuncs.com/nodejs_icon.png"},
            {name:"canvas",src:"https://dangyunlong.oss-cn-beijing.aliyuncs.com/canvas_icon.png"},
            {name:"react",src:"https://dangyunlong.oss-cn-beijing.aliyuncs.com/react_icon.png"},
            {name:"uniapp",src:"https://dangyunlong.oss-cn-beijing.aliyuncs.com/uniapp_icon.png"},
            {name:"nuxt",src:"https://dangyunlong.oss-cn-beijing.aliyuncs.com/js_icon.png"},
        ]
    }
}

array的data是return出来的。

全部做好以后是这个样子的：

好的，到目前这个样子，我们的首页静态页面就做好了，接下来我们要进入列表页和详情页面的制作啦。

还有两点需要注意

1.uniapp布局可以使用小程序中的rpx生成页面时会自动转换成px，也可以使用uniapp自带的upx，两者换算稍微有一点点区别，但是结果几乎可以忽略不计。

2.你可以选择不使用原生顶部，写一个自己的，使用这个写法

"pages": [ //pages数组中第一项表示应用启动页
    {
        "path": "pages/index/index",
        "style": {
            "navigationBarTitleText": "uni-app",
            "navigationStyle":"custom",
            "app-plus":{
                "titleView":false
            }
        }
    }
]