让自己的网站支持第三方支付能力(支持支付宝与微信支付)

前言

对于建站,相信很多小伙伴,一方面是希望自己有个知识的沉淀的载体,另一种程度上也是建立自我品牌的开始,当然也希望网站能够带来一些隐性或者显性的收入,例如:吸引广告商,贴片广告,付费阅读,自产自卖等

您将在本篇中读完get到

• 在vuepress中如何注入全局组件

• 实现置顶与置底的效果

• 实现圆环涟漪动画

• 在自己的网站中添加支付能力,同时支持支付宝与微信支付功能（通用）

在vuepress中注入全局组件

当你浏览https://coder.itclan.cn/网站时,你会发现,在网站的任何一处,下拉滚动条时,右下角都会出现一个小图标或者网站的右侧,都有一个固定的展示信息栏

在vuepress中是支持编写自定义组件的,并且全局范围内都可以使用,如下所示,当网页内容滚动大于60时,小图片就会显示,小于60时就会隐藏

在/.vuepress/components/ShangPic.vue,创建一个全局的xxxx.vue组件 具体代码如下所示:

<template>
  <div class="shang-wrap">
    <a target="_blank" href="https://www.zhi12.cn/paycenter/reward/widget?entity=user&id=33813">
      <img height="80" v-if="shangeFlag" class="shange" src="/images/itclanCoder-shang.png" />
    </a>
  </div>
</template>

<script>
export default {
  name: "ShangPic",
  data() {
    return {
      shangeFlag: false
    };
  },

  mounted() {
    window.addEventListener("scroll", this.isShangImg);
  },

  destroyed() {
    window.removeEventListener("scroll", this.isShangImg);
  },

  methods: {
    // 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏
    isShangImg() {
      const that = this;
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      that.scrollTop = scrollTop;
      if (that.scrollTop > 60) {
        that.shangeFlag = true;
      } else {
        that.shangeFlag = false;
      }
    }
  }
};
</script>

<style lang="stylus" scoped>
.shang-wrap {
  width: 170px;
  height: 80px;
  position: fixed;
  bottom: 50px;
  right: 118px;
  z-index: 999999;
  opacity: 1;
  text-align: center;

  img {
    display: inline-block;
    vertical-align: center;
  }
}

@media screen and (max-width: 768px) {
  .shang-wrap img {
    width: 150px;
    height: 80px;
    position: fixed;
    right: 3.5rem;
    bottom: 50px;
    text-align: center;
    z-index: 777;
  }
}
</style>

然后在./vuepress/configs/plugin.js配置插件处

const plugins = [
  [
    {
      name: "page-plugin"
    },
    globalUIComponents: [
      'ShangPic'
    ]
  ]
]

这样就完成全局配置了,重新npm run dev在次启动就可以了的,其他类似配置全局性的组件也是如此

实现置顶与置底的效果

有时候在移动端浏览网站时,添加置顶与置底的效果会更加友好,如下所示

对于置顶的话,使用链接中的锚点#就可以了的,如下是右侧固定栏的代码/.vuepress/conponents/RightBar.vue

<template>
  <div>
    <div class="right-bar-wrap" v-show="isRightBar">
      <div>
        // 此处就是用#号就可以置顶的,最简单粗暴的方式
        <a href="#">
          <img width="30" height="30" src="/images/up-arrow.png" alt="置顶" />
        </a>
      </div>
      <div>
        <a href="/latestarticle/">
          <img width="30" height="30" src="/images/new.png" alt="最新" />
        </a>
      </div>
      <div>
        <img
          width="30"
          height="30"
          class="medium-zoom lazy"
          loading="lazy"
          src="/images/other-author-code.jpg"
          alt="二维码"
        />
      </div>
      <div>
        <img
          width="30"
          height="30"
          class="medium-zoom lazy"
          loading="lazy"
          src="/images/itclancoder-code.jpg"
          alt="公众号"
        />
      </div>
      <div>
        // 而这里是使用锚点#号,锚点的方式
        <a href="#bottom">
          <img width="30" height="30" src="/images/down-arrow.png" alt="置底" />
        </a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "RightBar",
  data() {
    return {
      isRightBar: false
    };
  },
  mounted() {
    window.addEventListener("scroll", this.scroll);
  },

  destroyed() {
    window.removeEventListener("scroll", this.scroll);
  },

  methods: {
    scroll() {
      const that = this;
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      that.scrollTop = scrollTop;
      if (that.scrollTop > 60) {
        that.isRightBar = true;
      } else {
        that.isRightBar = false;
      }
    }
  }
};
</script>

<style lang="stylus" scoped>
@media screen and (min-width: 960px) {
  .right-bar-wrap {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  .right-bar-wrap {
    position: fixed;
    right: 0.2rem;
    top: 35%;
    display: flex;
    flex-direction: column;
    z-index: 888;

    img {
      border: 1px solid #3eaf7c;
      border-radius: 4px;
    }
  }
}
</style>

而置底的话,同样单独写一个组件,全局注入就可以了的/.vuepress/components/ToBottom.vue

<template>
  <div>
    <div id="bottom"></div>
  </div>
</template>

<script>
export default {
  name: "ToBottom"
};
</script>

<style lang="stylus" scoped></style>

注意要在./vuepress/configs/plugin.js全局注册一下的

const plugins = [
  [
    {
      name: "page-plugin"
    },
    globalUIComponents: [
      'ShangPic',
      'ToBottom',
      'RightBar'
    ]
  ]
]

经过上面简单的操作之后,就可以实现置顶与置底操作了的

实现圆环涟漪动画

具体效果如下所示:

同样将这个圆环涟漪动画封装成一个组件,因为很多个页面都会用到,这个组件的显示和隐藏都是由你自己控制的