微信小程序

首页模块（推荐、分类、最新、专辑）：

1.功能分析

1.1修改导航栏外观

pages.json文件中
//修改全局外观
"globalStyle": {
		"navigationBarTextStyle": "white",//导航字体颜色
		"navigationBarTitleText": "首页",//导航标题
		"navigationBarBackgroundColor": "#000"//导航背景色
		
	},

1.2使用 分段器组件 搭建子页面

1.3封装异步请求

2.搭建子页面（分段器）：

2.1 分析

​ 首页共四个部分：推荐、分类、最新、专辑，将四个部分分别注册为模块组件，并在home中引入注册展示

2.2 分段器介绍及使用

​ 分段器是uni-ui中的一个组件，俗称标签页、tab栏.

​ https://ext.dcloud.net.cn/plugin?id=54

​ 2.2.1 安装uni-ui npm i @dcloudio/uni-ui

​ 2.2.2 home/index.vue中引入注册分页器uniSegmentedControl

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

在template中展示

<uni-segmented-control
            :values="items.map(v=>v.title)"
            :current="current"
            @clickItem="onClickItem"
            style-type="text"
            active-color="#d4237a"
          >
</uni-segmented-control>
</view>
<view class="home_tab_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>

3. 封装自己的异步请求：

3.1 为什么封装

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

3.2 封装思路

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

3.3 步骤

3.3.1 src/utils/request.js

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();
      }
    })

  })
}

3.3.2 在main.js中挂载到原型上

import request from "./utils/request";
Vue.prototype.request=request;

4. 编写 首页-推荐页面：

4.1 调用this.request接收数据，动态渲染

在home/home-recommend.vue中，先在methods将请求封装为一个函数，使用的时候在mounted中调用即可

data() {
    return {
      // 推荐列表
      recommends: [],
      // 月份
      monthes: {},
      // 热门
      hots: [],
      // 请求的参数
      params: