小程序项目实战(四)

目录

一、封装header组件

二、小程序的状态管理

三、自定义推荐歌曲中的组件

---

        此文章用于总结自己的知识点。有这个项目有兴趣的伙伴可以点击下方链接购买学习
小程序音乐项目开发实战-大神coderwhy新课-学习视频教程-腾讯课堂课程简介https://ke.qq.com/course/4162214

上节课的知识点补充:

        小程序中的setData函数是同步的, 但是渲染过程是异步的

        react框架的setState是异步的

        css中当padding值撑大了盒子可以使用box-sizing: border-box

        小程序中border-radius有些角是直角可以使用  transform: translateY(0);

一、封装header组件

效果:

         index.wxml,组件可以按需显示或隐藏右边标签,可以给标签修改名称,和内容

         index.wxss

         在小程序中如果没有使用插槽,则不能展示插槽中的默认数据,这样的话就没办法实现右边没有插入内容时,显示更多和小图标。

        解决方法:使用css中.header .slot:empty(当slot为空时) +(执行后面内容) .default

        当插槽为空,右边元素的样式正常展示,当插槽不为空,那么default默认样式是none

         index.js:可以动态的修改title,rightText的内容,还有显示或隐藏右边标签

二、小程序的状态管理

        当我们很多页面都要共享数据时就需要有存放共享数据的地方,正常来说app.js中的数据是每个页面可以访问和修改的,但是不能响应式。

        可以在github上安装状态管理的库,但是有一些功能复杂,有可能不再维护

        这里使用why老师自己写的库,比较简洁,但可以实现功能

        npm install hy-event-store 

        安装完成需要重新构建 

         先封装获取热门数据的方法 

        新建store文件夹 ranking-store文件主要用于管理热门的数据

         index.js主要用于把所有管理文件都统一暴露出去

         在home-music的index.js文件中,引入rankingStore对象

         发起共享数据的请求.dispatch

         从store中获取共享的数据,并保存起来

 

三、自定义推荐歌曲中的组件   

         index.wxml:  将数据渲染出来

        index.wxss

 

         index.json 接受传递过来的数据

         home-music

        在index.json文件中注册自定义组件

        在index.wxml文件中将recommendSongs的每一项传递给song-item组件 

         渲染出来的效果: