使用Flexible & swiper进行移动Web开发

Posted 米花儿团儿

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用Flexible & swiper进行移动Web开发相关的知识，希望对你有一定的参考价值。

移动端适配方案flexible.js

出发点

事故的开始总是有原因的，那思考一下，为什么使用Flexible?

  • [ ] 为了rem布局？ >> 为什么要rem布局 ——> 高度还原
  • [ ] 移动端适配? >> 为什么移动端适配要用Flexible ——> 同等占比
  • [ ] 什么是移动端适配？

最初点是设计图的高度还原！！！

以750*1334设计稿(iPhone6)为准，期望每一个设计元件在iPhone6实机上占比、宽高比都与设计稿显示一致。

一套代码又想扩展到其它设备，于是出现了rem布局

  • [ ] Flexible做了什么
  • [ ] rem是什么
  • [ ] 如何做到高度还原设计图的

引入flexible.js

在*.html的<head>标签中引入<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>

flexible.js会做以下几件事：

  1. 给*.html添加内联样式表

    • 只是reset一些样式

  2. 给<html>设置[data-dpr=""]属性、font-size 样式

    • [data-dpr=""]属性

      • 通过属性选择器，设置不同分辨率下的样式
      • 主要是针对字号

    • font-size

      • rem单位的基准尺寸
  3. 监听resize、pageshow事件来重新设置html.style.fontSize
  4. 设置body.style.fontSize

  5. 定义全局变量window.lib.flexible

    window.lib.flexible = {
  dpr: number,
  refreshRem: function,
  rem2px: function,
  px2rem: function
}

Note：HTML中无需设置meta#viewport，flexible.js会根据window.devicePixelRatio的值自动添加meta#viewport。

假设设置如下<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0">，不管设备是多少的dpr，flexible.js不再修改该元数据配置，都会强制认为其dpr是你设置的值。

Note：在Flexible中，只对ios设备进行dpr的判断，对于android系列，始终认为其dpr为1

对于Android系列，始终认为其dpr为1？

深入flexible.js的实现，是body#width依据devicePixelRatio进行缩放的。

而针对iOS设备，缩放后正好为其visual viewport的尺寸。

而针对Android系列手头上的机器测试，不用缩放，body#width正好为其visual viewport的尺寸。

body#width / dpr > 540？

若body#width / dpr > 540，如PC端body#width > 1080，Flexible当1080处理。

通过scss定义px2rem的转换

~在不使用自动化工具的基础上，无法使用以下处理方式，只能自己计算后再赋值~

@function px2rem($px, $base-font-size: 16px) {
    @if (unitless($px)) {
        @warn "Assuming #{$px} to be in pixels, attempting to convert it into pixels for you";
        @return px2rem($px + 0px); // That may fail.
    } @else if (unit($px) == rem) {
        @return $px;
    }
    @return ($px / $base-font-size) * 1rem;
}

原理：通过以上步骤，就能实现设计图的高度还原？

本质上是设计元件的同比转换。

flexible.js将body#width分成100份，一份为基准，设置为html#fontStyle，而px2rem将设计元件转换为设计图的占比*%，以rem为中介，在设备上的展示具有同等占比。

以此来实现设计图的高度还原。

然而，计算出来的结果可能非有效值，所以，浏览器的显示优化……

如：小于12px的字体、浮点数的精度……

文本字号不建议使用rem

我们希望文本在相同dpr屏幕下文本字号相同

我们希望在大屏手机上看到更多文本

不希望出现13px和15px这样的奇葩尺寸

解决方案

文本还是使用px作为单位，只不过使用[data-dpr]属性来区分不同dpr下的文本字号大小

~在不使用自动化工具的基础上，无法使用以下处理方式，只能自己计算后再赋值~

@mixin font-dpr($font-size){
    font-size: $font-size;

    [data-dpr="2"] & {
        font-size: $font-size * 2;
    }

    [data-dpr="3"] & {
        font-size: $font-size * 3;
    }
}
@include font-dpr(16px);

补充知识点

  • flexible.js使用document.readyState API获取document的加载状态

    document.addEventListener(\'readystatechange\', event => {
if (event.target.readyState === \'interactive\') {
  // 等同于DOMContentLoaded 事件
}
else if (event.target.readyState === \'complete\') {
  // 表示 load 状态的事件即将被触发。
  // 等同于loaded
}
});

在Vue项目中的实战

~项目由@vue/cli@4.5.13创建的~

移动端适配

引入flexible

  • 安装lib-flexible

      npm i -D lib-flexible

  • 项目中引入flexible

    # main.js
  import "lib-flexible/flexible";

Note： 直接在HTML模板的<head>中引用，执行的优先级会更高

样式px自动转rem

  • 安装postcss-plugin-px2rem

      npm i -D postcss-plugin-px2rem

  • 创建.postcssrc.js

    # .postcssrc.js
  module.exports = {
    plugins: {
      \'postcss-plugin-px2rem\': {
        rootValue: 108, //换算基数，设计图尺寸， 默认100 
        exclude: /(node_module)/, //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)\\/
        mediaQuery: false, //（布尔值）允许在媒体查询中转换px。
        minPixelValue: 3, //设置要替换的最小像素值(3px会被转rem)。 默认 0
      }
    }
  }

  • 凡事有例外
    若不想转换rem，单位使用全大写PX，如字体

    # presets.scss
  $largeFont: 40PX;
  $middleFont: 20PX;
  $standardFont: 14PX;
  $smallFont: 10PX;
  @mixin font-dpr($font){
    font-size: $font;
  
    [data-dpr="2"] & {
        font-size: $font * 2;
    }
  
    [data-dpr="3"] & {
        font-size: $font * 3;
    }
  }
    # example.scss
...
  @import "../../assets/scss/preset";
  .page-title{
    @include font-dpr($standardFont);
  }
...

规范提交记录

通过以下命令@vue/cli会自动安装commitlint插件并更新pkg

  vue add commitlint

swiper应用

  • 安装依赖

      npm install swiper vue-awesome-swiper --save

  • 全局注册

      # main.js
  ...
  import VueAwesomeSwiper from "vue-awesome-swiper";
  import "swiper/swiper.scss";
  
  Vue.use(VueAwesomeSwiper, {});
  ...

  • 逻辑应用

    # Example.vue
  <template>
    <swiper ref="mySwiper" :options="swiperOptions">
      <swiper-slide v-for="i in 5">
          <div>
              Slide {{i}}
          </div>
          <button @click="handleClickItem(i)">点击后才可滑动</button>
      </swiper-slide>
    </swiper>
  </template>
  <script>
  export default {
    name: "Example",
    data() {
      return {
        swiperOptions: {
          direction: "vertical",
        },
      };
    },
    methods: {
      handleClickItem(idx) {
        // 满足某条件后可滑动
        this.swiper.allowSlideNext = true;
      },
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.$swiper;
      },
    },
    mounted() {
      // 默认禁止滑动翻页
      this.swiper.allowSlidePrev = false;
      this.swiper.allowSlideNext = false;
      // 翻页后禁止翻页
      this.swiper.on("slideChange", () => {
        this.swiper.allowSlideNext = false;
        this.currentIdx = this.swiper.activeIndex;
      });
    },
  };
  </script>

  • 样式

    # example.scss
  .swiper {
    &- {
      &container {
        height: 100%;
      }
  
      &slide {
        height: 100%;
        color: white;
      }
    }
  }
  button {
    position: absolute;
    z-index: 100;
    bottom: 20PX;
    width: 100%;
    text-align: center;
  }

非标准字体

非标准字体是指人为调整系统设置中的字体字号大小。
(function () {
  var $dom = document.createElement("div");
  $dom.style = "font-size:20px;";
  document.body.appendChild($dom);
  // 计算出放大后的字体
  var scaledFontSize = parseInt(
    window.getComputedStyle($dom, null).getPropertyValue("font-size")
  );
  document.body.removeChild($dom);
  // 计算原字体和放大后字体的比例
  var scaleFactor = 20 / scaledFontSize;
  // 取html元素的字体大小
  // 注意，这个大小也经过缩放了
  // 所以下方计算的时候 *scaledFontSize是原来的html字体大小
  // 再次 *scaledFontSize才是我们要设置的大小
  var originRootFontSize = parseInt(
    window
      .getComputedStyle(document.documentElement, null)
      .getPropertyValue("font-size")
  );
  document.documentElement.style.fontSize =
    originRootFontSize * scaleFactor * scaleFactor + "px";
  alert(
    parseInt(
      window
        .getComputedStyle(document.documentElement, null)
        .getPropertyValue("font-size")
    )
  );
})();

上述章节我们说【不推荐】字号使用rem，而使用px，是因为想让不同设备像素比的设备更大的程度利用展示空间：大屏一行展示的文本更多，小屏展示的少一些。

而考虑非标准字体，若字号使用px，即使通过上述方法调整html的基准字号大小，也不会影响字体的展示。

所以，考虑非标准字体时，字号需要使用rem设置。

Pad适配

现在Pad盛行，要考虑适配Pad.

对于Pad的适配，Flexible并没有考虑，而我们可以稍作修改进行适配。

  • Flexible并没有考虑Pad，通过修改var isIPhone = win.navigator.appVersion.match(/iphone|iPad/gi);调整

  • Flexible针对设备有最大尺寸限制，将其去掉即可

        function refreshRem(){
      var width = docEl.getBoundingClientRect().width;
      // if (width / dpr > 540) {
      //     width = 540 * dpr;
      // }
      var rem = width / 10;
      docEl.style.fontSize = rem + \'px\';
      flexible.rem = win.rem = rem;
  }

  • px2rem的媒体查询配置

    • 删除postcss-plugin-px2rem插件及其配置

    • 自定义px转rem函数 —— 为了媒体查询

      //# px2rem.scss
$defaultFontSize: 108;

@function px2rem($px, $baseFontSize: $defaultFontSize) {
@return $px / $baseFontSize * 1rem;
}
    .main {
    width: px2rem(540);
    @media screen and (min-width: 450px) {
      width: px2rem(1660, 166);
   }
}

参考文档

  • 阿里移动端知识储备
  • Flexible官方文档
  • viewport的介绍1
  • viewport的介绍2
  • iphone12适配
  • swiper相关配置
  • 非标准字体

以上是关于使用Flexible & swiper进行移动Web开发的主要内容，如果未能解决你的问题，请参考以下文章

flexible.js移动端适配安卓高分辨不兼容问题

Enhancing VAEs for Collaborative Filtering: Flexible Priors & Gating Mechanisms

flexiblejs中的字体可以不使用px吗

页面适配&swiper图片自适应计算方法

使用 CSS3 Flexible Boxes 布局

flexible.js框架改写