content：

• page新建页面
• 配置底部tabbar
• 请求封装
• wxs工具函数
• 上拉加载，下拉刷新

page新建页面

新建文件夹home-music，再右键新建page

名字index，随即生成4个文件

配置底部tabbar

官方文档：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#tabBar

阿里图标库：https://www.iconfont.cn

1、下载选中和未选中的图标，大小设为90

2、app.json添加tabbar配置

"tabBar": {
  "selectedColor":"#1296db",
  "list": [
    {
      "pagePath": "pages/home-music/index",
      "text": "音乐",
      "iconPath": "assets/images/tabbar/music_normal.png",
      "selectedIconPath": "assets/images/tabbar/music_selected.png"
    },
    {
      "pagePath": "pages/home-profile/index",
      "text": "个人",
      "iconPath": "assets/images/tabbar/profile_normal.png",
      "selectedIconPath": "assets/images/tabbar/profile_selected.png"
    }
  ]
},

请求封装

1、新建http文件夹

request.js

const token = wx.getStorageSync('TOKEN_KEY')

const BASE_URL = "http://123.207.32.32:9001"
const LOGIN_BASE_URL = ''

class XiuRequest {
  constructor(baseURL, authHeader = {}) {
    this.baseURL = baseURL
    this.authHeader = authHeader
  }

  request(url, method, params, isAuth = false, header = {}) {
    const finalHeader = isAuth ? { ...this.authHeader, ...header }: header
    return new Promise((resolve, reject) => {
      wx.request({
        url: this.baseURL + url,
        method: method,
        header: finalHeader,
        data: params,
        success: function(res) {
          resolve(res.data)
        },
        fail: reject
      })
    })
  }

  get(url, params, isAuth = false, header) {
    return this.request(url, "GET", params, isAuth, header)
  }

  post(url, data, isAuth = false, header) {
    return this.request(url, "POST", data, isAuth, header)
  }
}

// 无需登录验证的request实例
const xiuRequest = new XiuRequest(BASE_URL)

// 登录验证的request实例
const xiuLoginRequest = new XiuRequest(LOGIN_BASE_URL, {
  token
})

export default xiuRequest
export {
  xiuLoginRequest
}

api_music.js

import xiuRequest from "./request.js"

export function getBanners() {
  return xiuRequest.get("/banner", {
    type: 2
  })
}

页面导入api_music.js，请求报错了

需要不校验合法域名

wxs工具函数

只能用commonjs语法，属性也不能简写；

定义:

使用:

上拉加载，下拉刷新

下拉刷新配置

定义上拉加载和下拉刷新请求数据

网络请求，所有项目的业务代码大同小异