村农

莫笑农家腊酒浑,丰年留客足鸡豚。


震坤行活动页面制作技巧

冬冬

原因:市场部要做活动,临时叫我抽时间整个活动页面。

内心OS:需要的时候,我就一临时工。好吧!怎么说,也就一静态页面,没事。

设计稿大致是这样的:

结果给的数据是一个excel表格:

第一步:首先得把excel表格数据转化为json文件,用的是‘node-xlsx’模块,代码如下:

const xlsx = require('node-xlsx');
const fs = require('fs');

var obj = xlsx.parse(__dirname + '/data.xlsx');
var excel_data = obj[0].data;

var data_json = null;
var data_arr = [];

for(let i = 2 ,len = excel_data.length;i < len;i++){
    if(JSON.stringify(excel_data[i]) !== '[]'){
        data_arr.push({
            "name" :excel_data[i][0],
            "sku" : excel_data[i][1],
            "brand" : excel_data[i][2],
            "price" : excel_data[i][3],
            "unit" : excel_data[i][4],
            "img_url" : excel_data[i][5] 
        })
    }
}

fs.writeFile('./data.json',"var good_data = "+JSON.stringify(data_arr),{'flag' : 'a'},function(err){
    if(err){
        console.log(err);
    }
})

第二步:完成页面布局,用的是弹性盒布局布局方式,数据展示用到了vue。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>活动-震坤行</title>
    <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0,viewport-fit=cover">
    <meta name="format-detection" content="telephone=no">  
    <meta http-equiv="x-rim-auto-match" content="none">
    <script type="text/javascript">
      (function (doc, win) {
          var docEl = doc.documentElement,
                  resizeEvt = "orientationchange" in window ? "orientationchange" : "resize",
                  recalc = function () {
                      var clientWidth = docEl.clientWidth;
                      if(clientWidth>640)
                          clientWidth = 640;
                      docEl.style.fontSize = 10 * (clientWidth / 320) + "px";
                  };
          if (!doc.addEventListener) return;
          win.addEventListener(resizeEvt, recalc, false);
          doc.addEventListener("DOMContentLoaded", recalc, false);
      })(document, window);

      window.onload = function () {
          document.addEventListener('gesturestart', function (e) {
              e.preventDefault();
          });
          document.addEventListener('dblclick', function (e) {
              e.preventDefault();
          });
          document.addEventListener('touchstart', function (event) {
              if (event.touches.length > 1) {
                  event.preventDefault();
              }
          });
          var lastTouchEnd = 0;
          document.addEventListener('touchend', function (event) {
              var now = (new Date()).getTime();
              if (now - lastTouchEnd <= 300) {
                  event.preventDefault();
              }
              lastTouchEnd = now;
          }, false);
      };
    </script>
    <style>
      body{margin:0;padding:0;}
      .top_content{background:#171616;text-align:center;}
      .top_content img{width:100%;}
      .top_content h3{color:#fff;font-size:2rem;padding:0;margin:0;}
      .top_content p{color:#616060;font-weight:600;margin:0;padding-bottom:0.5rem;font-size:1rem;}
      .list_one{display:flex;justify-content:space-between;flex-wrap:wrap;background:#171616;}
      .good_box_one{width:49.2%;margin-bottom:1.8%;padding:1rem;background:#fff;border-radius:2px;text-align:center;box-sizing:border-box;}
      .good_box_one .src_a_one{width:50%;display:inline-block;}
      .good_box_one img{width:100%;}
      .money{color:#d41616;font-size:1.4rem;font-weight:600;display:inline-block;vertical-align: middle;}
      .a_button{width:6rem;height:2rem;color:#fff;background:linear-gradient(to right,#ea5418,#f0ab17);text-decoration:none;line-height:2rem;border-radius:2px;display:inline-block;vertical-align: middle;font-size:1.2rem;text-align:center;}
      .div_line{background:#171616;text-align:center;}
      .div_line h3{color:#fff;font-size:2rem;padding:0;margin:0;}
      .div_line p{color:#616060;font-weight:600;margin:0;padding-bottom:0.5rem;}
      .list_two{width:100%;background:#171616;}
      .good_box_two{width:100%;display:flex;justify-content:space-between;padding:1rem;margin-bottom:0.5rem;background:#fff;box-sizing:border-box;align-items:center;}
      .good_box_two .src_a{width:22%;height:22%;display:inline-block;vertical-align: middle;}
      .good_box_two .src_a img{width:100%;height:22%;}
      .detail_box{width:70%;display:inline-block;vertical-align: middle;}
      .left_line{height:1px;width:5rem;display:inline-block;vertical-align: middle;background:linear-gradient(to right,#171616,#d7d7d7);}
      .right_line{height:1px;width:5rem;display:inline-block;vertical-align: middle;background:linear-gradient(to left,#171616,#d7d7d7);}
    </style>
      <!-- End GrowingIO Analytics code version: 2.1 -->
      <script src="https://cdn.staticfile.org/babel-polyfill/6.16.0/polyfill.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  </head>
  <body>
    <div id="app">
      <div class="top_content">
        <img src="https://find-goods.oss-cn-hangzhou.aliyuncs.com/app/app-bg.png" />
        <h3>
          <span class="left_line"></span>
            精选优品
          <span class="right_line"></span>
        </h3>
        <p>SELECTED SUPERIOR PRODUCTS</p>
      </div>

      <div class="list_one">
        <div class="good_box_one" v-for="item in list_one">
          <a class="src_a_one" :href="'https://m.zkh360.com/item?skuId='+item.sku">
            <img :src="item.img_url" />
          </a>
          <p>{{item.brand}}</p>
          <div style="display:flex;justify-content:space-between;">
            <span class="money">¥{{item.price}}</span>
            <a class="a_button" :href="'https://m.zkh360.com/item?skuId='+item.sku">立即抢购</a>
          </div>
        </div>
      </div>

      <div class="div_line">
        <h3><span class="left_line"></span>
          更多推荐
        <span class="right_line"></span></h3>
        <p>MORE RECOMMENDED</p>
      </div>

      <div class="list_two">
        <div class="good_box_two" v-for="item in list_two">
          <a class="src_a" :href="'https://m.zkh360.com/item?skuId='+item.sku"><img :src="item.img_url" /></a>
          <div class="detail_box">
            <p style="padding:0;margin:0;font-size:1.2rem;color:#333333;">{{item.name}}</p>
            <p style="margin:0.5rem 0;font-size:1.2rem;color:#999999;">{{item.brand}}</p>
            <div style="display:flex;justify-content:space-between;">
              <span class="money">¥{{item.price}}/{{item.unit}}</span>
              <a class="a_button" :href="'https://m.zkh360.com/item?skuId='+item.sku">立即抢购</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script type="text/javascript" src="data.json"></script>
  <script>
    console.log(good_data);
    var app = new Vue({
      el:'#app',
      data:{
        list_one:good_data.slice(0,10),
        list_two:good_data.slice(11)
      }
    })
  </script>
</html>

总结:

1.本地引入json文件,可以用ajax引入,但是得部署一个服务器。所以,直接用script直接引入了。

<script type="text/javascript" src="data.json"></script>

不过还是得注意下:数据的格式有点不一样,得这么写

var good_data = ......;

说白了,就是引入一个js文件,但这个js文件只是申明了一个变量,所以成了一个全局变量,任何地方都可以引入使用。不信,在控制台console.log(good_data)下下呗......

2.渐变横线,可以直接用css写出

.left_line{height:1px;width:5rem;display:inline-block;vertical-align: middle;background:linear-gradient(to right,#171616,#d7d7d7);}
.right_line{height:1px;width:5rem;display:inline-block;vertical-align: middle;background:linear-gradient(to left,#171616,#d7d7d7);}

3.苹果浏览器上,处理双击和手势会死页面缩放。 一般,加上mate就可以解决了

 <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0,viewport-fit=cover">

但似乎,在高版本上没起作用,然后又用js来做处理

      window.onload = function () {
          document.addEventListener('gesturestart', function (e) {
              e.preventDefault();
          });
          document.addEventListener('dblclick', function (e) {
              e.preventDefault();
          });
          document.addEventListener('touchstart', function (event) {
              if (event.touches.length > 1) {
                  event.preventDefault();
              }
          });
          var lastTouchEnd = 0;
          document.addEventListener('touchend', function (event) {
              var now = (new Date()).getTime();
              if (now - lastTouchEnd <= 300) {
                  event.preventDefault();
              }
              lastTouchEnd = now;
          }, false);
      };

4.页面根font-size大小设置。因为浏览器都有最小字体大小,pc端的是12px,所以在设置html的font-size的时候,最好偏大点,10px的大小,真的很难处理,特别是在iphone 5上。

      (function (doc, win) {
          var docEl = doc.documentElement,
                  resizeEvt = "orientationchange" in window ? "orientationchange" : "resize",
                  recalc = function () {
                      var clientWidth = docEl.clientWidth;
                      if(clientWidth>640)
                          clientWidth = 640;
                      docEl.style.fontSize = 10 * (clientWidth / 320) + "px";
                  };
          if (!doc.addEventListener) return;
          win.addEventListener(resizeEvt, recalc, false);
          doc.addEventListener("DOMContentLoaded", recalc, false);
      })(document, window);