查找密钥地址

1.png

网页判断PC端还是移动端

62953504a0cc8f11194c6e88e1b8c7a.png

块作用域

凡是左右花括弧包含的区域都是一个独立的作用域。该作用域里的变量只在该作用域内有效。

移动端适配

下载npm install postcss-pxtorem -D（我一般用5.1.1的版本）
在根目录下新建一个postcss.config.js的文件，

image.png

在src下面新建一个设置rem的文件

(function flexible(window, document) {
    var docEl = document.documentElement;
    var dpr = window.devicePixelRatio || 1;
  
    // adjust body font size
    function setBodyFontSize() {
      if (document.body) {
        document.body.style.fontSize = 12 * dpr + "px";
      } else {
        document.addEventListener("DOMContentLoaded", setBodyFontSize);
      }
    }
    setBodyFontSize();
  
    // set 1rem = viewWidth / 10
    function setRemUnit() {
      var rem = docEl.clientWidth / 10;
      docEl.style.fontSize = rem + "px";
    }
  
    setRemUnit();
  
    // reset rem unit on page resize
    window.addEventListener("resize", setRemUnit);
    window.addEventListener("pageshow", function(e) {
      if (e.persisted) {
        setRemUnit();
      }
    });
  
    // detect 0.5px supports
    if (dpr >= 2) {
      var fakeBody = document.createElement("body");
      var testElement = document.createElement("div");
      testElement.style.border = ".5px solid transparent";
      fakeBody.appendChild(testElement);
      docEl.appendChild(fakeBody);
      if (testElement.offsetHeight === 1) {
        docEl.classList.add("hairlines");
      }
      docEl.removeChild(fakeBody);
    }
  })(window, document);

滑块验证简单实现

这是一个简单的前端实现（没有调用接口，只是一个效果），第 3 方的很好用,比如 GEETEST 的拼图验证，但要引入 >SDK 跟后台配合，还有接口交互

image.png

vue中的代码

<template>
  <div>
    <Vcode :show="isShow" @success="onSuccess" @close="onClose" />
    <button @click="submit">开始验证</button>
  </div>
</template>

<script>
import Vcode from "vue-puzzle-vcode";
export default {
  data() {
    return {
      isShow: false,
    };
  },
  components: {
    Vcode,
  },
  methods: {
    submit() {
      this.isShow = true;
    },

    onSuccess(msg) {
      this.isShow = false; // 通过验证后，需要手动关闭模态框
    },

    onClose() {
      this.isShow = false;
    },
  },
};
</script>

<style></style>