如何配置路由

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

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

請(qǐng)看這張圖：

我們可以發(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)容！

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

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

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

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

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

使用插件

注意，如果安裝插件以后提示你編譯錯(cuò)誤，你需要在xhbuilder中下載對(duì)應(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完全配置手冊(cè)'
                    },
                    {
                        colorClass: 'uni-bg-green',
                        url: 'https://blogdangyunlong.oss-cn-beijing.aliyuncs.com/banner2.png',
                        content: '黨云龍個(gè)人博客es6核心開發(fā)手冊(cè)'
                    }
                ],
                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的手冊(cè)你可以到官方的插件市場(chǎng)中查看。龍哥這里只教你如何使用，高級(jí)的玩法就靠你自己去挖掘啦！

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

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

使用組件

好的，我們知道了如何引用xhbuilder插件市場(chǎng)的組件以后。看似好多問題直接就解決了。

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

比如說這里我需要一個(gè)大標(biāo)題和一個(gè)二級(jí)標(biāo)題，這樣的話，我再?gòu)牟寮袌?chǎng)去下載就不太好了，我可能需要自己寫一個(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í)傳進(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
            }
        }
    }
]