微信小程序(四)仿网易云首页

1. 简介

简单实现一个基于微信小程序的网易云音乐。

1. 网易云后台接口搭建：

基于网上的一个项目进行搭建，项目是一个node 项目。所以如果本地启动需要下载node。

https://gitcode.net/mirrors/Binaryify/NeteaseCloudMusicApi?utm_source=csdn_github_accelerator

简单分为如下步骤：

1. clone 项目
2. 引入vs
3. 终端打开之后输入：
npm install
node app.js
4. 默认监听的端口是3000， 可以修改代码，也可以用如下命令修改
set PORT=4000 && node app.js

2. 接口文档详细地址

https://binaryify.github.io/NeteaseCloudMusicApi/#/?id=neteasecloudmusicapi

3. 内网穿透

基于ngrok 进行内网穿透，这样真机调试的时候才可以使用。但是体验版和开发版都需要备案的域名和https 请求。

参考：https://ngrok.com/download

2. 首页效果

3. 核心代码

1. tabBar 下面的导航栏

修改app.json: 修改字体颜色，选中之后的颜色以及默认的背景颜色等。

{
  "pages": [
    "pages/index/index",
    "pages/personal/personal",
    "pages/video/video"
  ],
  "entryPagePath": "pages/index/index",
  "window": {
    "navigationBarBackgroundColor": "#d43c33",
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "Geogre音乐"
  },
  "tabBar": {
    "color": "#333",
    "selectedColor": "#d43c33",
    "backgroundColor": "#fff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "主页",
        "iconPath": "/static/images/tabs/tab-home.png",
        "selectedIconPath": "/static/images/tabs/tab-home-current.png"
      },
      {
        "pagePath": "pages/video/video",
        "text": "视频",
        "iconPath": "/static/images/tabs/select.png",
        "selectedIconPath": "/static/images/tabs/selected.png"
      },
      {
        "pagePath": "pages/personal/personal",
        "text": "个人中心",
        "iconPath": "/static/images/tabs/tab-my.png",
        "selectedIconPath": "/static/images/tabs/tab-my-current.png"
      }
    ]
  }
}

2. 封装请求的工具类

配置服务器地址的js文件

一个是本地调试的，一个是ngrok 映射之后的

// 配置服务器相关信息
export default {
  host: 'http://localhost:3000',
  mobileHost: 'https://75b3-2409-8a00-79a9-4441-d57f-3979-ee8b-84bc.ngrok-free.app'
}

封装request.js

// 发送ajax请求
/*
* 1. 封装功能函数
*   1. 功能点明确
*   2. 函数内部应该保留固定代码(静态的)
*   3. 将动态的数据抽取成形参，由使用者根据自身的情况动态的传入实参
*   4. 一个良好的功能函数应该设置形参的默认值(ES6的形参默认值)
* 2. 封装功能组件
*   1. 功能点明确
*   2. 组件内部保留静态的代码
*   3. 将动态的数据抽取成props参数，由使用者根据自身的情况以标签属性的形式动态传入props数据
*   4. 一个良好的组件应该设置组件的必要性及数据类型
*     props: {
*       msg: {
*         required: true,
*         default: 默认值，
*         type: String
*       }
*     }
*
* */
import config from './config'
export default  (url, data={}, method='GET') => {
  return new Promise((resolve, reject) => {
    // 1. new Promise初始化promise实例的状态为pending
    wx.request({
      url: config.host + url,
      data,
      method,
      header: {
        cookie: wx.getStorageSync('cookies')?wx.getStorageSync('cookies').split(";").find(item => item.indexOf('MUSIC_U') !== -1):''
        // cookie: wx.getStorageSync('cookies')
      },
      success: (res) => {
        // if(data.isLogin){// 登录请求
        //   // 将用户的cookie存入至本地
        //   wx.setStorage({
        //     key: 'cookies',
        //     data: res.cookies
        //   })
        // }
        resolve(res.data); // resolve修改promise的状态为成功状态resolved
      },
      fail: (err) => {
        // console.log('请求失败: ', err);
        reject(err); // reject修改promise的状态为失败状态 rejected
      }
    })
  })
  
}

其实就是将请求统一包装为一个方法。也写了后面包含登录信息存本地、取cookie 等方法。其中data和method 都有默认值。

登录之后的请求，携带cookie， cookie 是只需要携带MUSIC_U 的cookie， find 是数组的方法

var str = "k1:value1;key2:value2"
key1 = str.split(";").find(item => item.indexOf('k1') !== -1)
console.log(key1)
// 结果
k1:value1

page 中js 使用：

import request from '../../utils/request'

...
let bannerListData = await request('/banner', {type: 2});
this.setData({
  bannerList: bannerListData.banners
})

3. 组件-轮播图swiper

wxml

  <!--轮播图-->
  <swiper class="banners" indicator-dots indicator-color="ivory" autoplay indicator-active-color="#d43c33">
    <swiper-item wx:for="{{bannerList}}" wx:key="bannerId">
      <image src="{{item.pic}}"/>
    </swiper-item>
    <!-- <swiper-item>
      <image src="/static/images/nvsheng.jpg" mode="" />
    </swiper-item>
    <swiper-item>
      <image src="/static/images/nvsheng.jpg" mode="" />
    </swiper-item> -->
  </swiper>

组件上设置indicator-dots 代表indicator-dots="true" 属性(开启面板指示点)、 indicator-color 面板指示点颜色、自动轮播(默认5s换一个)、indicator-active-color 当前面板指示点颜色。另外还有重要的属性：

next-margin="50rpx"    下一个item默认展示多少
previous-margin="50rpx" 上一个item展示多少
circular="true" (circular) 自动循环

Wxss 相关样式

/*轮播图***/
.banners {
  width: 100%;
  height: 300rpx;
}
.banners image {
  width: 100%;
  height: 100%;
}

4. 可滚动视图区域 scroll-view

中间的为你精心推荐用的 scroll-view 滚动视图。

wxml

<!--推荐歌曲区域-->
  <view class="recommend">
    <NavHeader title="推荐歌曲" nav="为你精心推荐"></NavHeader>

    <!--内容区域-->
    <scroll-view enable-flex="true" class="recommendScroll" scroll-x>
      <view class="scrollItem" wx:for="{{recommendList}}" wx:key="id" wx:for-item="recommendItem">
        <image src="{{recommendItem.picUrl}}"></image>
        <text>{{recommendItem.name}}</text>
      </view> 
    </scroll-view>
  </view>

这里需要注意： enable-flex="true" 是允许其flex 布局，代表允许盒模型布局。scroll-x 代表x轴横向滚动。

wxss

/**推荐内容区域**/
.recommendScroll {
  display: flex;
  padding-left: 20rpx;
  height: 300rpx;
}
.scrollItem {
  width: 200rpx;
  margin-right: 20rpx;
}
.scrollItem image {
  width: 200rpx;
  height: 200rpx;
  border-radius: 20rpx;
}
.scrollItem text {
  font-size: 26rpx;
  /**单行文本溢出，省略号代替**/
  /* white-space: nowrap; */
  /* display: block; */
  /* overflow: hidden; */
  /* text-overflow: ellipsis; */
  /**多行文本溢出，省略号代替**/
  display: -webkit-box;
  -webkit-box-orient: vertical; /**对齐模式*/
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

注意：

1. .recommendScroll 设定height 是必须的，默认是按y轴纵向滚动，不设定高度会占用原来的高度。
2. .scrollItem text 下面是对单行文本、多行文本自动用...展示的样式

5. 自定义组件

推荐歌曲，为你精心推荐部分是自定义组件。

1. 自定义组件

/components/NavHeader/Navheader.XXX

wxml

<view class="recommendContainer">
    <view class="header">
      <text class="title">{{title}}</text>
      <view>
        <text>{{nav}}</text>
        <text class="more">查看更多</text>
      </view>
    </view>
  </view>

// components/NavHeader/NavHeader.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    title: {
      type: String,
      value: 'default value',
    },
    nav: {
      type: String,
      value: 'default value',
    }
  }
})

json

{
  "component": true,
  "usingComponents": {}
}

wxss

/**推荐歌曲**/
.recommendContainer {
  padding: 20rpx;
}
.recommendContainer .header {
  padding-bottom: 20rpx;
}
.recommendContainer .header .title {
  font-size: 32rpx;
  line-height: 80rpx;
  color: #666;
}
.recommendContainer .header .more{
  float: right;
  border: 1rpx solid #333;
  padding: 10rpx 20rpx;
  font-size: 24rpx;
  border-radius: 30rpx;
}

2. 使用组件

index.json 声明组件

{
  "usingComponents": {
    "NavHeader": "/components/NavHeader/NavHeader"
  }
}

Wxml 使用组件

<NavHeader title="推荐歌曲" nav="为你精心推荐"></NavHeader>
。。。
<NavHeader title="排行榜" nav="热歌风向标"></NavHeader>

6. 阿里云icon字体图标库使用

官网： https://www.iconfont.cn/

将图标加到自己的项目中，然后下面有个css 地址。复制css地址，浏览器打开，然后下载为css。然后导入到微信开发者工具static/iconfont/iconfont.wxss
app.wxss 引入字体库

@import "/static/iconfont/iconfont.wxss"

代码使用

<text class="iconfont icon-xiaoxi"></text>

在资源管理-》我的项目可以查看原来项目的图标

posted @ 2023-07-16 22:28 QiaoZhi 阅读(160) 评论(0) 编辑收藏举报

刷新页面返回顶部

Qiao_Zhi

有远大抱负的人不可忽略眼前的工作!!!