一、封装网络请求

axios 二次封装

• 接口请求：https://tea.qingnian8.com/api/bizhi
• 感谢 B 站 up 主：咸虾米。

const BASE_URL = "https://tea.qingnian8.com/api/bizhi";

export function request(config = {}) {
  let { url, data = {}, method = "GET", header = {} } = config;

  url = BASE_URL + url;
  header["access-key"] = "xxm123321@#";

  return new Promise((resolve, reject) => {
    uni.request({
      url,
      data,
      method,
      header,
      success: (res) => {
        if (res.data.errCode === 0) {
          resolve(res.data);
        } else if (res.data.errCode === 400) {
          uni.showModal({
            title: "错误提示",
            content: res.data.errMsg,
            showCancel: false,
          });
          reject(res.data);
        } else {
          uni.showToast({
            title: res.data.errMsg,
            icon: "none",
          });
          reject(res.data);
        }
      },
      fail: (err) => {
        reject(err);
      },
    });
  });
}

封装请求方法

import { request } from "@/utils/request.js";

export function apiGetBanner() {
  return request({
    url: "/homeBanner",
  });
}

export function apiGetDayRandom() {
  return request({ url: "/randomWall" });
}

export function apiGetNotice(data = {}) {
  return request({
    url: "/wallNewsList",
    data,
  });
}

export function apiGetClassify(data = {}) {
  return request({
    url: "/classify",
    data,
  });
}

export function apiGetClassList(data = {}) {
  return request({
    url: "/wallList",
    data,
  });
}

export function apiGetSetupScore(data = {}) {
  return request({
    url: "/setupScore",
    data,
  });
}

export function apiWriteDownload(data = {}) {
  return request({
    url: "/downloadWall",
    data,
  });
}

export function apiDetailWall(data = {}) {
  return request({
    url: "/detailWall",
    data,
  });
}

export function apiUserInfo(data = {}) {
  return request({
    url: "/userInfo",
    data,
  });
}

export function apiGetHistoryList(data = {}) {
  return request({
    url: "/userWallList",
    data,
  });
}

export function apiNoticeDetail(data = {}) {
  return request({
    url: "/wallNewsDetail",
    data,
  });
}

export function apiSearchData(data = {}) {
  return request({
    url: "/searchWall",
    data,
  });
}

二、功能实现

多段适配差异化配置

• ifndef+除了此其他都适配
• ifdef +适配的客户端

<!-- #ifndef MP-TOUTIAO -->
		<custom-nav-bar title="推荐"></custom-nav-bar>
<!-- #endif -->

上拉刷新和触底加载

• 触底加载onReachBottom

import { onReachBottom } from "@duloudio/uni-app";
onReachBottom(() => {
  //发送触底后需要发送的网络请求方法
});

• 上拉刷新onPullDownRefresh
  • 配合 pages.json 文件中开启enablePullDownRefresh

import { onPullDownRefres } from "@duloudio/uni-app";
onPullDownRefres(() => {
  //发送下拉后需要发送的网络请求方法
});

获取系统手机状态栏和胶囊按钮高度

• 通过uni.getSystemInfoSync的返回值的参数，构建成自己需要的高度
• 注意：单位为px

const SYSTEM_INFO = uni.getSystemInfoSync();

export const getStatusBarHeight = () => SYSTEM_INFO.statusBarHeight || 15;

export const getTitleBarHeight = () => {
  if (uni.getMenuButtonBoundingClientRect) {
    let { top, height } = uni.getMenuButtonBoundingClientRect();
    return height + (top - getStatusBarHeight()) * 2;
  } else {
    return 40;
  }
};

export const getNavBarHeight = () => getStatusBarHeight() + getTitleBarHeight();

export const getLeftIconLeft = () => {
  // #ifdef MP-TOUTIAO
  let {
    leftIcon: { left, width },
  } = tt.getCustomButtonBoundingClientRect();
  return left + parseInt(width);
  // #endif

  // #ifndef MP-TOUTIAO
  return 0;
  // #endif
};

控制图片加载

• 通过控制图片的索引值，将看过的图片的左索引值加到数组中，根据数组中有的图片进行渲染。即控制 3 张图片左右顺滑切换，减少缓存

<swiper-item v-for="(item,index) in classList" :key="item._id">
  <image v-if="readImgs.includes(index)" @click="maskChange" :src="item.picurl" mode="aspectFill"></image>
</swiper-item>

function readImgsFun() {
  readImgs.value.push(
    currentIndex.value <= 0
      ? classList.value.length - 1
      : currentIndex.value - 1,
    currentIndex.value,
    currentIndex.value >= classList.value.length - 1
      ? 0
      : currentIndex.value + 1
  );
  readImgs.value = [...new Set(readImgs.value)];
}