关于前端: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年前变的优良了吗，急躁更多了吗，技术更好了吗