Shi 山淘金,这个技术搞出来属实不易了
“我报名参加金石计划1期挑战——瓜分10万奖池,这是我的第1篇文章,点击查看活动详情”
当一个人开始回首往事,说明他过的并不好...
不排除他在摸鱼
回首往事,翻看过去的Shi山,一个个简单又精致的活动H5映入眼帘,是什么让曾经手无缚鸡(撸码)之力的我,捯饬出如此精美的H5(纯属自嗨),点我审阅
扫我也行
言归正传
- 关于项目: 房地产公司意图吸引流量,策划的一个获取门票的引流活动所开发的趣味H5,
- 关于技术: css,jq,html (年轻的我只会jq,实在惭愧),虽然jq开发的 但也算单页面(真不算)应用了,因为我只在一个页面里控制各种点击显示,隐藏,还真容易给自己绕晕进去🤦
技术分享
一. 移动端适配
-设计稿提供的尺寸为 640*1080 以当时20年流行的最小屏幕为基准设计
- 页面使用js适配,在head中引入
(function () {
var phoneWidth = parseInt(window.screen.width);
var phoneScale = phoneWidth / 640;
var ua = navigator.userAgent;
if (/Android (\d+.\d+)/.test(ua)) {
var version = parseFloat(RegExp.$1);
if (version > 2.3) {
document.write('<meta name="viewport" content="width=640, minimum-scale =' + phoneScale + ', maximum-scale =' + phoneScale + ', target-densitydpi=device-dpi">');
} else {
document.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi">');
}
} else {
document.write('<meta name="viewport" content="width=640, user-scalable=no">');
}
})()
-
整体布局绝对定位,左右居中,上下根据手机适配采用合适的百分比
相较于js适配,小型项目中我更推荐另一种写法
html{
font-size: 13.3333vw;
}
/* 媒体查询稍微兼顾了一下电脑状态下的预览 */
@media screen and (min-width: 750px) {
html{ font-size: 100px; }
}
/* 使用 */
div{
width: 1rem; /* 1rem = 100px, 依此换算 */
}
二. 首屏加载
当时项目统一封装了一个根据图片资源数量加载的首屏进度动画,压缩js在这里
// 引入js
<script language="javascript" src="https://app.izlyun.com/Resources/js/utils/imgLoad.min.js"></script>
<div id="loader">
<div class="loading"></div> // 加载动画
</div>
<div class="content">
...主体
</div>
// 调用
<script>
var imgArr = [
'images/01.jpg', 'images/02.png', 'images/03.png' ...
];
new imagesLoad(imgArr, function (num) {
// 这里固定
$('#loading .processInn').css('width',num+'%')
$('#loading #processCount').html(num);
}, function () {
// 加载完成后执行
$('#loading,.loadBg,.bat').hide();
$('#loader').fadeOut(500) // **自定义加载样式 #loader**
$('.content').css('opacity','1') // 加载完成后 元素出现
});
</script>
统一加载样式和该项目风格不搭,于是新增 #loader div,写一个自己满意的加载动画,这里我就不献丑了,因为我用了一个gif(还得是给力的设计,要什么给什么 哈哈)
三. 晕死人的点击切换
- 选择1
- 选择2
- 选择3
- 选择4
- 选择5
选择...,返回...再选,再返回...,display:none,block,hide,show...谁让我当时只会jq呢,哈哈哈哈哈
知识点来了,重温几个jq方法
1. siblings() 返回被选元素的所有同级元素
$('.Sex').on('click',function () {
$(this).addClass('N_choose').siblings('.Sex').removeClass('N_choose')
$(this).css('opacity','1').siblings('.Sex').css('opacity','0.4')
})
选择性别时,两个div同时具有class名Sex,点击给当前元素添加被选中class名的同时让他的同级元素移除被选中class,
特别好用的一个方法
2. attr() 设置或返回被选元素的属性和值
var bgimg=$('.canvas_wrap .bg').attr('data-url')
这里获取元素携带的url
3. hasClass() 检查被选元素是否包含指定的类名称
$(".b_rqq").hasClass("show")
这里用来判断元素是否已经存在
四. 合成图片
1. 声明两个全局变量,一个用于储存生成图片前所选泽的图片数组,一个用于合成后的图片数组
var data=[],base64=[];
2. 选择自动编辑
$('.zdBtn').on('click',function () {
var zdperson=$('.p_four .canvas_wrap .person').attr('data-url')
var bgimg=$('.p_four .canvas_wrap .bg').attr('data-url')
data=[bgimg,zdperson]
$('#Img').siblings().hide()
$('.p_two').hide()
$('.p_four').show()
hecheng()
})
3. 选择DIY背景
全局变量 whichBg 获取点击的图片,用来显示
chooseBg(),控制页面中的显示对应的图片
$('.zd_bg').on('click',function () {
whichBg=$(this).attr('bg-id')
chooseBg(function () {
var zdperson=$('.canvas_wrap .person').attr('data-url')
var bgimg=$('.canvas_wrap .bg').attr('data-url')
data=[bgimg,zdperson]
hecheng()
})
})
function chooseBg(fn) {
$('.p_four .canvas_wrap .bg').css({'background':'url("images/bgimg/zdbg'+whichBg+'.png','background-size':'100% 100%'})
$('.p_four .canvas_wrap .bg').attr('data-url', 'images/bgimg/zdbg'+whichBg+'.png')
fn()
}
4. 调用draw() 方法合成图片,并赋值到 #Img 元素上,接下来使用 #Img保存图片
function hecheng(){
draw(function(){
$('#Img').attr('src',''+base64[0]+'');
})
}
5. canvas合成图片,if判断多张图片合成
function draw(fn){
var c=document.createElement('canvas'),
ctx=c.getContext('2d'),
len=data.length;
c.width=640;
c.height=1080;
ctx.rect(0,0,c.width,c.height);
function drawing(n){
if(n<len){
var img=new Image;
img.crossOrigin = 'Anonymous';
img.src=data[n];
img.onload=function(){
ctx.drawImage(img,0,0,640,1080);
drawing(n+1);
}
}else{
base64.splice(0,1,c.toDataURL("image/jpeg",1))
fn();
}
}
drawing(0);
}
五. 长按保存
前面提到过生成的图片 赋值给img标签 #Img src上,将#Img 设置为透明与长按保存按钮重合就ok了,哈哈哈,乍一看还挺高大上
六. 发现保存到手机的图片模糊
推荐一个插件 HiDPI Canvas Polyfill
引入即可
<script src="js/hidpi-canvas.js"></script>
End 总结
开始这篇内容前,回看22岁写的Shi山,到处在找知识点以求拼凑出一篇像样的文章,完成这篇内容后,有了一个大大的疑问,自己比3年前变的优秀了吗,耐心更多了吗,技术更好了吗
转载自:https://juejin.cn/post/7145403109760565284