为了账号安全,请及时绑定邮箱和手机立即绑定

使用React构建一款音乐播放器

musiq Web前端工程师
难度中级
时长 2小时39分
学习人数
综合评分9.33
41人评价 查看评价
9.4 内容实用
9.3 简洁易懂
9.3 逻辑清晰
我好像是一个假前端 (ಥ﹏ಥ)
另外吐槽下jPlayer没有做异常检查,给它的参数如果写错了它不会报错的。。。
比如 $('#player').jPlayer('volumn', volumn);
记错一个单词volume,恁是检查半个小时。
this.setState({
volume: progress * 100,
}); 可避免音量进度条没有更新

确实我觉得就应该这样更新音量,而不是放到 $('#player').bind($.jPlayer.event.timeupdate, ()=>{})里面,因为放到那里面的话是随着播放时间更新而更新state,音量的变化应该与播放进程没有关系。

已采纳回答 / z2x
你看一下这篇文章:https://doc.webpack-china.org/loaders/babel-loader/
$("#player").bind($.jPlayer.event.timeupdate); 总是报 $ is not defined 有没有大神解决一下
为啥写的内容跟从git账号上面的完整版差别有些大,有丢丢懵逼
遇到问题总结:
1.npm i jquery jplayer --save-dev 安装插件,不需要直接引入js文件
2.使用webpack.ProvidePlugin直接配置jquery全局函数,不需要到处import $ from 'jquery'
3.ES6下使用constructor(props){super(props); this.state={progress:'-'};}初始化state中的progress
4.componentDidMount(){}中this.setState已经在另一个function作用域,在句末加上.bind(this)即可

最新回答 / 慕移动9181930
赞!就喜欢你这样的!这个设置是容器里面的内容居中,div{text-align:center;}是div里面的内容相对于div居中的。
那么赶进度吗,省略那么多
........什么都跳过了,css跳过,配置跳过,直接跳到完成部分就是了

已采纳回答 / HZYou
应该是这个页面没有引入老师的 common.css 文件,需要手动引入import '../static/css/common.css';路径换成你common.css的相对路径
讲真这位老师讲的真超好,要是16年的时候来学那就是极好的,但是现在 = = ,两个多小时课程,花了两天时间配置环境修改BUG,想哭;
在componentDidMount函数里面应该这样写,不能直接this.setState,因为在bind函数里面,this已经不是指向组件实例了,
var _this = this;
$('#player').bind($.jPlayer.event.timeupdate, function(event) {
_this.setState({
progress: Math.round(event.jPlayer.status.currentPercentRelative) + '%'
});
})
老师不是已经说了吗,有点基础来学最好了,如果是想专门学webpack有老师专门讲webpack的,新手最好是先使用脚手架去写react,熟悉了之后再来用webpack配置。会报错之前也有同学说了,在console.log里,react改成React,版本号就出来了。如果想打印hello,world,可以直接在index.html的div里面写hello,world。还有就是如果报错了,改完之后再打包再刷新来看,不然你怎么改都是没有用的。因为还没有配置热更新。老师都很不容易,能来讲课的老师都是值得我们去鼓励的,如果有问题,麻烦在问答区或者评论区问,不要动不动就说别人不好,有本事你来讲

最新回答 / qq_曖狠简单_0
通常是因为组件并没有装载上便开始执行setState({})建议按照这个处理:https://www.cnblogs.com/zyl-Tara/p/7998590.html

已采纳回答 / 慕村7809337
你方法名打错了   应该是componentWillUnmount   注意m要小写   (话说我第一次也写错了~)
课程须知
1、有一定的前端开发经验 2、熟悉HTML、CSS,精通JavaScript 3、对前端工程化有一定的了解 4、了解ES6一些基本语法
老师告诉你能学到什么?
1、webpack的配置 2、开发环境的搭建 3、React与传统开发的理念差异 4、组件化开发 5、React-Router的使用 6、事件订阅及通信 7、一些最佳实践

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

举报

0/150
提交
取消