项目搭建

一、创建项目

使用微信开发者工具创建好工程，删除用不到的文件和目录。

二、目录结构

三、tabBar / window

在 \app.json 文件中配置 tabBar 和 window 选项。

tabBar

"tabBar": {
  "list": [{
    "pagePath": "pages/main-music/main-music",
    "text": "音乐",
    "iconPath": "assets/images/tabbar/music_normal.png",
    "selectedIconPath": "assets/images/tabbar/music_active.png"
  },
  {
    "pagePath": "pages/main-video/main-video",
    "text": "视频",
    "iconPath": "assets/images/tabbar/video_normal.png",
    "selectedIconPath": "assets/images/tabbar/video_active.png"
  }]
}

window

"window": {
  "navigationBarBackgroundColor": "#ffffff", // 导航栏背景颜色
  "navigationBarTextStyle": "black", // 导航栏标题、状态栏颜色
  "navigationBarTitleText": "千千畅听", // 导航栏标题文字内容
  "enablePullDownRefresh": true, // 是否开启全局的下拉刷新
  "backgroundColor": "#eeeeee", // 下拉刷新框的背景色
  "backgroundTextStyle": "light" // 设置下拉刷新指示器颜色
},

记得在 \pages 目录下创建 main-music 与 main-video 页面。

四、引入技术

1. 封装网络请求

\services\config.js

const BASE_URL = "https://music.ddf.gay"
const TIMEOUT = 10000

export {
 BASE_URL,
 TIMEOUT
}

\services\request.js

import { BASE_URL, TIMEOUT } from './config'

class DDFRequest {
  request(url, method, params) {
    return new Promise((resolve, reject) => {
      wx.request({
        url: BASE_URL + url,
        timeout: TIMEOUT,
        method: method,
        data: params,
        success: (res) => resolve(res.data),
        fail: reject
      })
    })
  }

  post(url, params) {
    return this.request(url, "POST", params)
  }

  get(url, params) {
    return this.request(url, "GET", params)
  }
}

export default new DDFRequest()

2. 引入 Vant Weapp

1）安装 Vant Weapp

npm i @vant/weapp -S --production

2）修改 app.json

将 app.json 中的 "style": "v2" 去除。小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。

3）构建 npm 包

打开微信开发者工具，点击工具 ==> 构建 npm，构建完成后，即可引入组件。

4）引入组件

以 Button 组件为例，只需要在 app.json 或 index.json 中配置 Button 对应的路径即可。

// 通过 npm 安装
// app.json
"usingComponents": {
  "van-button": "@vant/weapp/button/index"
}

5）使用组件

引入组件后，可以在 wxml 中直接使用组件。

<van-button type="primary">按钮</van-button>

3. Underscore.js

在音乐播放页会用到节流函数。

npm install underscore

_.throttle(function, wait, [options])

创建并返回一个像节流阀一样的函数，当重复调用函数的时候，至少每隔 wait 毫秒调用一次该函数。

默认情况下，throttle 将在你调用的第一时间尽快执行这个 function。如果想禁用第一次首先执行的话，传递 {leading: false}，还有如果你想禁用最后一次执行的话，传递 {trailing: false}。