5月我又知道了啥

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/baizaozao/article/details/87804788

1. 移动端开发的屏幕适配

• px2rem

• flexible

2. 图片压缩软件

• isee 可以无限制压缩图片
• tinypng 尽可能无失真的压缩图片，不可以无限制压缩

3. 复制文本

clipboardjs插件

• 如果要复制文本样式，则使用

<div class="jo-quote">
    <span id="jo-cn-quote"><xsl:value-of select="p"></xsl:value-of></span>
    <a id="jo-copy-cn-quote" class="jo-copy-btn" data-clipboard-action="copy" data-clipboard-target="#jo-cn-quote"><img src="../../../images/copy.png"/></a>
</div>

• 如果值复制文本，不复制样式，则使用

<xsl:variable name="copy-text" select="p"></xsl:variable>
<div class="jo-quote">
    <span id="jo-en-quote"><xsl:value-of select="$copy-text"></xsl:value-of></span>
    <a id="jo-copy-en-quote" class="jo-copy-btn" data-clipboard-text="{$copy-text}"><img src="../../../images/copy.png"/></a>
</div>

4. 移动端开发微信公众号，ios设备下上传图片会发生旋转问题

• 原因：如果对用户上传的图片进行压缩或者裁切处理，ios下图片的orientation属性会发生变化，从而导致图片发生旋转，其他安卓手机图片和电脑下载图片都没有此问题
• 难点1：原生的js没有办法获取照片的orientation属性，需要借助exif.js这个第三方库来获取照片信息
• 难点2：对照片进行旋转时，因为固定照片外层的div的宽高不一样，所以旋转之后，如果只是旋转90或270度，那么照片的宽高值需要对调，180则不需要
• 难点3：临时项目，后台调试艰难，用的是jsp获取后台返回的图片路径，前端要根据返回的图片路径拿到原生的图片（包含orientation等图片信息），各种回调，不好操作
• 难点4：整体swiper控制，一共6页，第一页为上次用户生成后分享出来的照片封面（如果不上传图片的话，与第六页布局基本一样），第五页上传图片页，第六页生成封面页，这三页都涉及到照片，就会涉及到旋转问题，也就是同样的操作需要处理三次
• 原来解决：针对手机上下左右旋转后，不同角度拍摄照片，依据orientation属性，对图片再做一次手动旋转处理（transform:rotate）
• 进化版解决：直接在用户上传图片时，对图片进行处理（canvas重绘），提交给后台的数据是base64编码，也就是说后台存储的图片数据直接是处理过后正常的图片
• 总结：需要对canvas绘制有详细了解
• 代码

// 第五页 日期选择和头像上传
	var file = null;
	var fileSelect = $('#fileSelect');
	var capture = $('#capture');
	fileSelect.click(function (e) { //在点击a标签时，触发capture的点击
		e.preventDefault()
		if (capture) {
			capture.click();
		}
	});
	capture.change(function () {  //change事件发生时，读取文件
		var reader = new FileReader();
		var image = new Image();
		var Orientation = null;
		file = capture[0].files[0]; //获取用户所选的文件
		if (typeof reader == 'undefined') {
			tip("您的浏览器不支持fileReader！");
		}

		if(file){
			EXIF.getData(file, function() {
				Orientation = EXIF.getTag(this, 'Orientation');
			});
			reader.onload = function (ev) {
				image.src = ev.target.result;
				image.onload = function () {
					var imgWidth = this.width,
						imgHeight = this.height;

					if(imgWidth > imgHeight && imgWidth > 750){
						imgWidth = 750;
						imgHeight = Math.ceil(750 * this.height / this.width);
					}else if(imgWidth < imgHeight && imgHeight > 1334){
						imgWidth = Math.ceil(1334 * this.width / this.height);
						imgHeight = 1334;
					}

					var canvas = document.createElement("canvas"),
						ctx = canvas.getContext('2d');
					canvas.width = imgWidth;
					canvas.height = imgHeight;
					if(Orientation && Orientation != 1){
						switch(Orientation){
							case 6:
								canvas.width = imgHeight;
								canvas.height = imgWidth;
								ctx.rotate(Math.PI / 2);
								ctx.drawImage(this, 0, -imgHeight, imgWidth, imgHeight);
								break;
							case 3:
								ctx.rotate(Math.PI);
								ctx.drawImage(this, -imgWidth, -imgHeight, imgWidth, imgHeight);
								break;
							case 8:
								canvas.width = imgHeight;
								canvas.height = imgWidth;
								ctx.rotate(3 * Math.PI / 2);
								ctx.drawImage(this, -imgWidth, 0, imgWidth, imgHeight);
								break;
						}
					}else{
						ctx.drawImage(this, 0, 0, imgWidth, imgHeight);
					}
					imgUrl= canvas.toDataURL("image/jpeg", 1);
					params["capture"] = imgUrl;
					fileSelect.css('background-image', 'url(' + imgUrl + ')');
				}
			};
			reader.readAsDataURL(file);
		}
	});

5. swiper移动端翻页的时候，背景图在翻页的时候为空白问题

• 解决：给swiper所在的div配置一个背景图或者背景颜色即可

6. 滚动字幕翻页配置

• 代码

var str = ''
	var total = 0
	events.forEach(function (item, index) {
		str += '<section class="swiper-slide">' + item + '</section>'
		total++
	})

	$('#event-swiper-content').append(str);
	var eventSwiper = new Swiper('.inside-swiper-container', {
		direction: 'vertical',
		loop: true,
		// height: 'auto',
		autoplay: {
			delay: 1000,
			disableOnInteraction: false
		},
		// effect : 'coverflow',
		// coverflow: {
		// 	rotate: 30,
		// 	stretch: 10,
		// 	depth: 60,
		// 	modifier: 2,
		// 	slideShadows : true
		// },
		slidesPerView: 10,
		spaceBetween: 20
	})

• 如果要增加行间距，可以通过配置每一项的margin-bottom来实现

7. 常见的swiper配置

• 代码

outSwiper = new Swiper('.outside-swiper-container', {
		direction: 'vertical',
		// allowTouchMove: false,
		followFinger: false, // 手释放时才切换
		longSwipes: false, // 长时间拖动无效
		// noSwiping : true,
		// effect : 'fade',
		// effect : 'cube',
		effect: 'coverflow',
		pagination: {
			el: '.swiper-pagination',
		},
		mousewheel: true,
		on: {
			init: function () {
				swiperAnimateCache(this);
				swiperAnimate(this);
				hideArrow(this)
			},
			slideChangeTransitionEnd: function () {
				swiperAnimate(this);
				hideArrow(this);
			}
		}
	})

8. 要对自己做过的东西负责任

9. px2rem 在webpack中的使用

待补充