1. 开始

web开发中，常有一些功能仅希望对开发、测试人员等一小部分人展示，比如测试一个小程序项目中，想让测试人员快速复制当前对应的h5页面，这时候如果页面是必须登录的，我们可以借助vconsole，然后维护一个白名单配置，在进行中拉取配置，然后展示即可。

如果项目不是必须登录的，比如新闻、博客网站，或者需要这项功能的人很多，维护白名单太费时费力，就需要另一种办法。

这里介绍一种基于摩斯密码的页面加密方式，这里的加密其实是隐藏页面某些信息，也可以将其扩展，进行其他的操作，比如发送额外的请求、管理员的切换、状态的转变等。

2. 实现方式

简单来说，就是把用户的点击和长按分别当成点信号和长信号，也可以理解为计算机中的0和1，当用户一段时间内的输入符合密码规则时，视为解密成功，进行相应的操作。

这里的细节点就是维护密码数组和当前正在匹配的位置，流程图如下：

3. 延伸

3.1. 多端适配

对于web项目，可以传入选择器，由JS动态监听事件，对于小程序，则需要在tap和longpress事件中，手动调用morsePwd中的相应的方法。

web项目使用方式如下：

<script>
export default {
  data() {
    return {
      morsePwd: null,
    };
  },
  mounted() {
    this.morsePwd = MorsePwd.init({
      pwd: [1, 1, 1, 2, 2, 2, 1, 1, 1],
      cb: () => {
        this.showToast('xxx');
      },
      selector: '#app',
      envType: 'H5',
    });
  },
  beforeDestroy() {
    this.morsePwd.clear();
  },
}
</script>

小程序项目（基于uni-app）使用方式如下：

<template>
  <div
    class="tip-match-header"
    @longpress="onLongPressWrap"
    @click.stop="onClickWrap"
  >
</template>

<script>
export default {
  data() {
    return {
      morsePwd: null,
    };
  },
  mounted() {
    this.morsePwd = MorsePwd.init({
      pwd: [1, 1, 1, 2, 2, 2, 1, 1, 1],
      cb: () => {
        this.showToast('hhh');
      },
      envType: 'MP',
    });
  },
  beforeDestroy() {
    this.morsePwd.clear();
  },
  methods: {
    onLongPressWrap() {
      this.morsePwd.longPress();
    },
    onClickWrap() {
      this.morsePwd.click();
    },
  }
}
</script>

3.2. 多实例

由于采用的面向对象的开发方式，所以可以很方便的实例化出多个密码，将其应用于多个场景。

3.3 密码安全

密码可以放在一个配置网站，然后调用接口去拉取，或者同步到云文件中。

密码应该定期更换，来保证安全，另外，这种加密方式应该只加密较为简单的东西，比如复制一些页面信息、辅助测试等。