Shi 山淘金，这个技术搞出来属实不易了

当一个人开始回首往事，说明他过的并不好...

不排除他在摸鱼

回首往事，翻看过去的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适配，小型项目中我更推荐[另一种写法](https://juejin.cn/post/7132314291281068040)
  

   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>

总结

开始这篇内容前，回看22岁写的Shi山，到处在找知识点以求拼凑出一篇像样的文章，完成这篇内容后，有了一个大大的疑问，自己比3年前变的优秀了吗，耐心更多了吗，技术更好了吗