vue小程序开发（三）

功能分析

• 修改导航栏外观
• 使用 分段器组件 搭建子页面
• 封装自己异步请求（原生不支持promise，uni-app不会出现等待页面）

pages.json

改成黑底白字

"globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "uni-app",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8"
}
改变后
"globalStyle": {
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "懂你找图",
    "navigationBarBackgroundColor": "#000",
}

搭建子页面

• 首页模块分为 4个部分，分别是 推荐、分类、最新、专辑
• 新建自定义组件来代替上述的4个页面
  • home-recommend
  • home-category
  • home-new
  • home-album

新增组件

在home/index.vue中导入

<template>
<view>
    <home-album></home-album>
    <home-category></home-category>
    <home-new></home-new>
    <home-recommend></home-recommend>  
    </view>

</template>

<script>


    import homeAlbum from "./home-album";
    import homeCategory from "./home-category";
    import homeNew from "./home-new";
    import homeRecommend from "./home-recommend";

    export default {
        components:{
            homeAlbum,
            homeCategory,
            homeNew,
            homeRecommend
        }

    }
</script>

<style>

</style>

页面效果

分段器

分段器指的就是uni-ui 中的一个组件，其实就是我们俗称的 标签页，tab栏

分段器文档：https://ext.dcloud.net.cn/plugin?name=uni-segmented-control

https://uniapp.dcloud.io/component/uniui/uni-segmented-control

代码

<template>
<view>
    <uni-segmented-control
                           :current="current"
                           :values="items.map(v=>v.title)"
                           @clickItem="onClickItem"
                           styleType="text"
                           activeColor="#d4237a"
                           ></uni-segmented-control>

    <view class="content">
        <view v-if="current === 0">    <home-recommend></home-recommend>  </view>
        <view v-if="current === 1">     <home-category></home-category> </view>
        <view v-if="current === 2">     <home-new></home-new></view>
        <view v-if="current === 3">     <home-album></home-album></view>
    </view>
    </view>
</template>

script

<script>
    import homeAlbum from "./home-album";
import homeCategory from "./home-category";
import homeNew from "./home-new";
import homeRecommend from "./home-recommend";
// import {uSegmentedControl} from '@dcloudio/uni-ui'
import { uniSegmentedControl } from "@dcloudio/uni-ui";
export default {
    components: {
        homeAlbum,
        homeCategory,
        homeNew,
        homeRecommend,
        uniSegmentedControl,
    },
    data() {
        return {
            items: [
                {title:"推荐"},
                {title:"分类"},
                {title:"最新"},
                {title:"专辑"}
            ],
            current: 0,
        };
    },
    methods: {
        onClickItem(e) {
            if (this.current !== e.currentIndex) {
                this.current = e.currentIndex;
            }
        },
    },
};
</script>

分段器优化

代码

<template>
<view>
    <view class="home_tab">
        <view class="home_tab_title">
            <view class="title_innner">
                <uni-segmented-control
                                       :current="current"
                                       :values="items.map((v) => v.title)"
                                       @clickItem="onClickItem"
                                       styleType="text" 
                                       activeColor="#d4237a">
    </uni-segmented-control>
    </view>
            <view class="iconfont iconsearch"></view>
    </view>
        <view class="home_tab_content">
            <view class="content">
                <view v-if="current === 0"> <home-recommend></home-recommend> </view>
                <view v-if="current === 1"> <home-category></home-category> </view>
                <view v-if="current === 2"> <home-new></home-new></view>
                <view v-if="current === 3"> <home-album></home-album></view>
    </view>
    </view>
    </view>
    </view>
</template>

<style lang="scss">
.home_tab{
    .home_tab_title{
        position: relative;
        .title_innner{
            width:60%;
            margin: 0 auto;
        }
        .iconsearch{
            position:absolute;
            //距离头部 50%
            top:50%;
            //垂直居中
            transform:translateY(-50%);
            //距离右边 5%
            right:5%;
        } 
    }
    .home_tab_content{

    }
}
</style>

优化结果

封装自己的异步请求

原因

• 原生的请求不支持 promise
• uni-app 的请求不能够方便的添加 请求中 效果
• uni-app 的请求返回值是个数组， 不方便

方法

• 基于原生的promise来封装
• 挂载到Vue的原型上
• 通过 this.request 的方式来使用

封装

src/utils/request.js

//es6
export default (params)=>{
    //加载中 
    uni.showLoading({
        title:"加载中"
    })

    return new Promise((resolve,reject)=>{
        wx.request({
            ...params,
            success(res){
                resolve(res.data);
            },
            fail(err){
                reject(err);
            },
            complete(){
                uni.hideLoading();
            }
        })
    })
}

挂载

src/main.js

import Vue from 'vue'
import App from './App'

挂载
import request from "./utils/request";

Vue.config.productionTip = false

///挂载
Vue.prototype.request = request;
App.mpType = 'app'

const app = new Vue({
    ...App
})
app.$mount()