如何配置路由

在上一篇自學(xué)課程中，我們掌握了uniapp的基本安裝方法撕瞧，現(xiàn)在我們打開uniapp自帶的hello uniapp項(xiàng)目看看里面有一些什么吧陵叽！

因?yàn)槲覀冎敖榻B過狞尔，uniapp其實(shí)就是小程序+vue的一個(gè)開發(fā)模式結(jié)合體。所以巩掺，他的路由route是不在js文件中的偏序。它跟小程序一樣，所有的請求響應(yīng)（路由）都配置在pages.json中胖替。

請看這張圖：

我們可以發(fā)現(xiàn)pages.json頂部有一行小字：數(shù)組中第一項(xiàng)表示啟動(dòng)頁研儒。

然后path指向的其實(shí)就是他其中一個(gè)組件.nvue。注意独令，是.nvue而不是.vue端朵。.vue只是pages中使用的組件，頁面都是.nvue燃箭。

ok冲呢，我修改了其中底部菜單的圖標(biāo)，這里底部圖標(biāo)的形式跟小程序是一樣的招狸，pagePath表示點(diǎn)擊以后跳轉(zhuǎn)的路徑敬拓，iconPath表示默認(rèn)展示的圖標(biāo)，selectedIconPath表示點(diǎn)擊以后展示的圖標(biāo)瓢颅。

接著打開路由中的第一個(gè)頁面恩尾，把里面的內(nèi)容注釋掉，然后隨便寫幾個(gè)字母挽懦，完成以后是下面這個(gè)樣子的：

好的，接著我們開始往自己的項(xiàng)目中插入內(nèi)容木人！

使用插件市場快速完成項(xiàng)目

一般來說信柿，頂部的內(nèi)容應(yīng)該是一個(gè)類似swiper之類的滾動(dòng)圖。那么我們?nèi)绾慰焖俨迦胍粋€(gè)swiper呢醒第？

dcloud非常貼心的為我們開放了uniapp的插件市場渔嚷，只要你是用xhbuilder開發(fā)的，你只需要到市場上找到你想要的插件稠曼，然后點(diǎn)擊導(dǎo)入項(xiàng)目即可形病！

點(diǎn)擊使用xhbuilder導(dǎo)入插件。

這里選擇我們的unidemo霞幅，這是我的項(xiàng)目名漠吻，你選擇你的項(xiàng)目即可。

使用插件

注意司恳，如果安裝插件以后提示你編譯錯(cuò)誤途乃，你需要在xhbuilder中下載對應(yīng)的服務(wù)插件。

接下來我們把裝載的插件放置到我們自己的頁面上：（這個(gè)頁面我是在hello uniapp項(xiàng)目上直接修改的扔傅，我這個(gè)頁面是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: '黨云龍個(gè)人博客vuecli完全配置手冊'
                    },
                    {
                        colorClass: 'uni-bg-green',
                        url: 'https://blogdangyunlong.oss-cn-beijing.aliyuncs.com/banner2.png',
                        content: '黨云龍個(gè)人博客es6核心開發(fā)手冊'
                    }
                ],
                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', //圓點(diǎn)的模式 default/dot/round/nav/indexes
                dotsStyles: { //圓點(diǎn)的樣式
                    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>
    /*設(shè)置一下高度*/
    .banner,.content {
        height: 300rpx;
    }
    
    /* 頭條小程序組件內(nèi)不能引入字體 */
    /* #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>

其實(shí)我們使用的這個(gè)就是uniapp自帶的uni-ui耍共，uni-ui的手冊你可以到官方的插件市場中查看烫饼。龍哥這里只教你如何使用，高級的玩法就靠你自己去挖掘啦试读！

頁面下修改完成是這樣的：

因?yàn)槲覜]有給移動(dòng)端專門做一個(gè)banner杠纵，我把pc端的博客頁面縮小了放在這里，各位看官就不要斤斤計(jì)較這個(gè)字看不清楚啦钩骇！

使用組件

好的比藻，我們知道了如何引用xhbuilder插件市場的組件以后∫谅模看似好多問題直接就解決了韩容。

但是插件市場也有一個(gè)弊端，那就是定制性不強(qiáng)唐瀑。很多時(shí)候我們的組件是需要根據(jù)業(yè)務(wù)去變化的群凶。

比如說這里我需要一個(gè)大標(biāo)題和一個(gè)二級標(biāo)題，這樣的話哄辣，我再從插件市場去下載就不太好了请梢，我可能需要自己寫一個(gè)。

這個(gè)時(shí)候怎么辦呢力穗？

在外面的components文件夾中新建一個(gè)mytitle.vue毅弧，然后寫入以下內(nèi)容：

<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: '大標(biāo)題'
            },
            titletext: {
                type: String,
                default: '小標(biāo)題'
            }
        },
        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就是我們通過父級傳進(jìn)來的內(nèi)容，這點(diǎn)跟vue是一模一樣的当窗。

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

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

<script>
    //引用大小標(biāo)題
    import mytitle from '@/components/mytitle.vue'
    
    export default {
        components: {
            mytitle
        },
        data() {
            return {
                headtitle:[
                    "教程分類","免費(fèi)分享前端開發(fā)技術(shù)","推薦教程","博主推薦閱讀教程"                   
                ]
            }
        }
    }
</script>

<style>
</style>

然后使用同樣的方法，我又創(chuàng)建了一個(gè)菜單和一個(gè)內(nèi)容列表崖面。因?yàn)槠渲械膬?nèi)容比較重復(fù)元咙，并且操作方法跟上面這個(gè)一模一樣。所以代碼我就不貼出來了巫员。

不過這里需要注意一點(diǎn)庶香，如果你傳進(jìn)去的內(nèi)容是一個(gè)數(shù)組，這里的寫法稍微有一點(diǎn)不同：

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出來的简识。

全部做好以后是這個(gè)樣子的：

好的赶掖，到目前這個(gè)樣子，我們的首頁靜態(tài)頁面就做好了七扰，接下來我們要進(jìn)入列表頁和詳情頁面的制作啦奢赂。

還有兩點(diǎn)需要注意

1.uniapp布局可以使用小程序中的rpx生成頁面時(shí)會(huì)自動(dòng)轉(zhuǎn)換成px，也可以使用uniapp自帶的upx戳寸，兩者換算稍微有一點(diǎn)點(diǎn)區(qū)別呈驶，但是結(jié)果幾乎可以忽略不計(jì)。

2.你可以選擇不使用原生頂部疫鹊，寫一個(gè)自己的袖瞻，使用這個(gè)寫法

"pages": [ //pages數(shù)組中第一項(xiàng)表示應(yīng)用啟動(dòng)頁
    {
        "path": "pages/index/index",
        "style": {
            "navigationBarTitleText": "uni-app",
            "navigationStyle":"custom",
            "app-plus":{
                "titleView":false
            }
        }
    }
]