小程序项目实战(三)

       此文章用于总结自己的知识点。有这个项目有兴趣的伙伴可以点击下方链接购买学习

小程序音乐项目开发实战-大神coderwhy新课-学习视频教程-腾讯课堂课程简介正在上传…重新上传取消https://ke.qq.com/course/4162214https://ke.qq.com/course/4162214

---

1、获取video-detail里面的数据

1.1请求数据的方法

        请求mv地址

        请求mv数据

         请求相关视频数据

 1.2

        引入封装的获取数据方法

        将获取数据的方法统一封装成一个函数,这时候不用await async,因为await async会等待执行,需要第一个获取数据方法返回结果后才能执行第二个方法。

        而使用promise的方法来获取结果不需要等待执行 

         

         调用获取detail-video的方法将数据保存起来

         

2、video-detail页面的布局

 2.1页面的总体效果

        index.wxml

        实现的效果:

 2.2video组件实现

        index.wxml

        index.wxss :实现视频固定在顶部,后面的组件在下面滚动

  2.3视频详情信息的封装和使用

        index.js

         index.wxml

        index.wxss 

         detail-video页面引入和使用组件

        

         使用组件

        效果:

 

 2.4推荐视频的封装和使用

         index.js

         index.wxss

 

 

          index.wxml

          detail-video页面引入和使用组件

          index.json

         index.wxml

        效果:

 

3、home-music页面的布局

3.1 home-music页面搜索框的开发 (会使用vant UI库)

Vant - Mobile UI Components built on VueMobile UI Components built on Vuehttps://vant-contrib.gitee.io/vant/#/zh-CN/        npm init -y:生成包管理文件 package.json

        如果项目路径名有中文则会报错        

         npm install @vant/weapp:安装vant组件库

         生成的文件

        

        此时还不能使用，需要在本地设置允许npm模块 

         构建npm

         构建后生成的文件（使用的是这里面的包）

         在home-music页面引入组件

        index.wxml 使用组件 

         index.wxss 中覆盖组件的背景颜色

         index.js  搜索框点击后进行页面跳转

 3.2home-video页面轮播图的开发

        api_music.js 获取轮播图数据方法

         index.js 获取轮播图数据并保存

         index.wxml轮播图的使用(小程序自带的组件)

3.3:轮播图出现的问题       

         轮播图出现的问题:轮播图swiper是有固定150px的高度的,而轮播的图片高度是随图片的宽度变化的,这时候在有些大小不一的手机来说他们轮播图的高度不一致。当swiper的高度大于图片高度太多就会导致swiper的小圆点有时候在图片的下方。

        解决方法:当轮播图一张加载完成之后调用bindload方法,在方法里面使用小程序自带WXML API的方法来设置swiper的高度。这样swiper的高度就和图片高度保持一致,小圆点显示正常。

        获取组件高度信息的方法

         

        封装成一个工具方法,selector是想要获取信息的组件

         每次图片加载完成都会调用bindload方法获取高度,实际上只需要获取一次,所有可以使用节流对函数进行优化

 

         引入节流函数和获取组件信息函数,并对他进行节流

         获取高度并保存

         动态地设置到swiper中