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中的使用
待补充