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

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

一、了解小程序中的基础库和灰度的含义

小程序中本地设置值有个调试基础库,里面有很多版本,有些版本会有显示灰度中

查看官方文档对于基础库的定义

  简单来说我们小程序中使用的代码,接口等都需要SDK(software development kit)的支撑,而SDK是在微信APP中就帮我们安装好的,那么我们要给SDK添加新的功能或者修复bug时就要发布新的SDK版本。

  但是新版本可能不稳定,所以用户在使用新版本的SDK时微信同时会把上一个稳定版本供用户使用,所以基础库中的各种版本可以理解为SDK的版本。

  当发布新版本后,微信服务器可以将新版本只推送给一部分用户使用,让一小部分人去排查BUG,这就是灰度发布,当灰度发布使用没有异常后用户才会有新版本的基础课,当新版本面向所有用户发布时就是全量发布。

项目请求的小优化:(使用 async await来获取异步请求的结果)

 二、Video的页面布局

   index.wxml

   index.wxss

 

  wxss文件中背景图片不能引用本地图片资源,只能使用base64的图片或者image标签 

 

   2.格式化视频的播放量和时长 

   在小程序中,工具类都是wxs文件并且wxs文件不支持es6语法

   在utils下面创建format.wxs文件 

   格式化播放量

   分钟和秒数是个位数时前面加上0、格式化时间

 

 

  使用commonjs对方法进行导出 

 

  在index.wxml中导入格式化文件

  格式化数据

 

三、把每个item封装成自定义组件

   

 index.js

 index.wxml

 index.wxss

   home-video中的文件

  index.json:注册组件

   index.wxml:使用组件

 

四、封装请求、上拉加载更多、下拉刷新数据、添加加载动画

  封装网络请求的方法

  上拉到底部触发函数:onReachBottom() 

 

   下拉页面刷新数据

   页面一加载就触发的函数

   添加加载数据动画

五、给组件添加点击跳转到详情页事件

  监听点击的方法有俩种:

  1.组件内部监听      2.直接监听组件的点击

  利用bindtap来绑定点击事件, 利用data-参数名的方式来传递参数

   在点击事件处理函数中用event来接收参数的值。

   其中currentTarget->dataset->item才是我们想要的数据

  页面跳转使用wx.navigateTo的方法跳转,跳转到详情页时需要传递id

   在detail-video页面中获取传递过来的id

  可以添加编译模式,每次编译时都可以让启动页面在详情页上