多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
## 04-13 > H5图片上传 - 使用input,type为file,通过设备accept="image/*"表示接受图片 ``` <input name="image" accept="image/*" className="upload-input" type="file"/> ``` > 使用antd-mobile的switch组件时,组件无法用,无点击切换效果 - 注意:valuePropName属性必须,且为'checked' ``` <List> <Item extra={<Switch {...getFieldProps('openRecord',{initialValue:true,valuePropName:'checked'})} onClick={(checked)=>console.log(checked)}/> }>计步</Item> </List> ``` ## 04-17 > react-router的路由跳转 ``` # 通过context对象的router属性实现 # 组件内部 static contextTypes ={ router:PropTypes.object } componentWillMount(){ this.context.router.history.push('/login') } ``` > 图片上传,formData打印出来为空 ![空图](https://segmentfault.com/img/bV0DQw?w=108&h=28) ``` # 直接打印是看不到的,要用FormData的get()和getAll()方法 formData.append("file", files[0]); formData.get("file"); // "aa" console.log这个 ``` > H5 fileApi 实现图片上传前预览 ``` var file = document.getElementById('fileInput').files[0]; var reader = new FileReader(); reader.onload=function(e){ document.getElementById('showImg').src=e.target.result; } reader.readAsDataURL(file); ``` > react或者vue结合axios图片上传(图片文件与其他form表单字段同时上传) - 设置上传头:'Content-Type':'multipart/form-data' - 文件格式通过 formData 接口上传 ``` var file = this.refs.uploadInput.files[0]; //拿到相应input的file var formData = new FormData(); formData.append('file',file); formData.append('tel',18111111111); //添加其他字段信息 formData.append('name','mynickName'); // 设置上传的请求头 let config = { headers:{ 'Content-Type':'multipart/form-data' } } axios.post('/api/tel/saveOrUpdate',formData,config) .then(res=>{ console.log(res); }) ``` ## 04-24 > 1. scss定义函数并使用(场景:动态转换px为rem) - `$ `:定义变量 - `@function ` :定义函数 - `@return` : 定义返回值 ``` # bass.scss $baseSize:37.5; @function calcSize($px){ @return $px/$baseSize + rem; } ``` > 2. .gitignore编写和不生效的原因 - `#` 此为注释 – 将被 Git 忽略 - `*.sample `  忽略所有 .sample 结尾的文件 - `!lib.sample` 但 lib.sample 除外 - `/TODO` 仅仅忽略项目根目录下的 TODO 文件,不包括 subdir/TODO - `build/` 忽略 build/ 目录下的所有文件 - `doc/*.txt` 会忽略 doc/notes.txt 但不包括 doc/server/arch.txt > 把某些目录或文件加入忽略规则,按照上述方法定义后发现并未生效,原因是.gitignore只能忽略那些原来没有被追踪的文件,如果某些文件已经被纳入了版本管理中,则修改.gitignore是无效的。那么解决方法就是先把本地缓存删除(改变成未被追踪状态),然后再提交: ``` git rm -r --cached . git add . git commit -m 'update .gitignore' ``` - 注意(--cached后面有个 `.`) > 3. css3 动画的播放暂停控制 - `animation-play-state`:控制,值有 `paused`,`running` - `-webkit-animation-play-state`: 兼容safari,chrome ``` div{ animation-play-state:paused; -webkit-animation-play-state:paused; /* Safari 和 Chrome */ } ``` ## 04-26 > 1. 关于H5的audio标签的常用属性,方法,事件 ``` # 在react中拿到audio标签的DOM( <audio ref="audio"></audio>) this.audioDOM = ReactDOM.findDOMNode(this.refs.audio) # js调用audio播放,暂停 this.audioDOM.src="xxx" this.audioDOM.load() //针对ios的加载 this.audioDOM.play() this.audioDOM.pause() # audio加载的事件 this.audioDOM.addEventListener("canplay",fn,false); //开始播放时 this.audioDOM.addEventListener("timeupdate",()=>{ var progress = this.audioDOM.currentTime/this.audioDOM.duration, currentTime = this.audioDOM.currentTime; },false); // 播放时间更新时(用于制作播放进度) this.audioDOM.addEventListener("ended",fn,false); //播放结束 this.audioDOM.addEventListener("error",fn,false); //播放出错 ``` > 2. 关于React-Transition-Group组件的应用 - CSSTransition组件是其中一个部份,用于过渡动效 - `in`属性控制组件启动,关闭动效 - `classNames`属性确定不同动效状态的基础className名 - `onEnter,onExit`控制动效激活,出场时的回调 ``` import {CSSTransition} from 'react-transition-group'; import ReactDOM from 'react-dom'; import './test.scss'; class Test extends React.Component { constructor(){ super() this.state={ showBox:false } } componentDidMount(){ this.boxDOM = ReactDOM.findDOMNode(this.refs.box); console.log(this.boxDOM) } toggleBox=()=>{ this.setState({ showBox:!this.state.showBox }) }; render() { return ( <div> <button onClick={this.toggleBox}>切换</button> <CSSTransition in={this.state.showBox} classNames="test" timeout={300} onEnter={()=>{ this.boxDOM.style.display = "block"; }} onExited={()=>{ this.boxDOM.style.display = "none"; }} > <div className="box" ref="box"> <h1>测试动画效果滴。</h1> <div className="color-box">哈哈哈</div> </div> </CSSTransition> </div>) } } export default Test; # test.scss .box{ display: none; transform-origin:0 bottom; &.test-enter{ transform:rotateZ(90deg); &.test-enter-active{ transition:transform .3s; transform: rotateZ(0deg); } } &.test-exit{ transform:rotateZ(0deg); &.test-exit-active{ transition:transform .3s; transform: rotateZ(90deg); } } .color-box{ width:200px; height:200px; background: #ff0; color: #000; line-height: 200px; text-align: center; } } ``` ## 04-27 > 1. 今日阅读:[react-redux](https://segmentfault.com/a/1190000010188279) - react-redux两个主要核心:Provider,connect。 - Provider组件:用于包裹App组件,并向下传入store - connect方法:用于将state或dispatch映射到组件中;`connect(mapStateToProps,mapDispatchToProps)(MyComponent)` > 2. swiper使用中遇到的问题 ``` # 1. react,vue这类MVVM框架项目中,使用swiper // 安装 npm install swiper // 引入 import Swiper from 'swiper'; // 初始化 if(!this.sliderSwiper){ this.sliderSwiper=new Swiper(“.swiper-container”,{ loop:true, autoplay:true, pagination: { el:'.swiper-pagination' } }) } //JSX [,swiper-wrapper,swiper-slide,swiper-pagination是官方指定需要的className] <div className="slider-container"> <div className="swiper-wrapper"> { this.state.sliderList.map(slider=>{ return <div className="swiper-slide" key={slider.id}> <a className="slider-nav" > <img src={slider.picUrl} width="100%" height="100%" alt="推荐"/> </a> </div> }) } </div> <div className="swiper-pagination"></div> </div> ``` -` swiper-wrapper,swiper-slide,swiper-pagination`是官方指定需要的className - 4.x.x版本的swiper与3.x.x版本的配置项有一定的差异 - 当引用了swiper后,发现页面对应样式没有用上,考虑是否引用了 swiper.css,或者 ` swiper-wrapper,swiper-slide,swiper-pagination`是否写对了 > 3. better-scroll插件 - better-scroll 是一款重点解决移动端(已支持 PC)各种滚动场景需求的插件。它的核心是借鉴的 iscroll 的实现,它的 API 设计基本兼容 iscroll,在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。 - [参考文档](http://ustbhuangyi.github.io/better-scroll/doc/zh-hans/options.html#starty) ``` # 安装 npm install better-scroll --save # 使用 import BScroll from 'better-scroll'; let wrapper = document.querySelector('.wrapper') let scroll = new BScroll(wrapper) ``` - 注意:better-scroll只处理它的第一个子元素的滚动,所以内容要用一个容器元素统一包裹起来。 - 注意:scroll容器的父容器需要限高(如:100%)