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

在个人网站中添加支付宝与微信支付功能

最新推荐文章于 2020-10-13 20:04:31 发布

原创

最新推荐文章于 2020-10-13 20:04:31 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#广告 #js #javascript #html #css

本文介绍如何在Vuepress站点中添加全局组件，实现置顶、置底和圆环涟漪动画效果，并详细讲解无后端情况下为网站接入支付宝与微信支付的步骤，确保在电脑、手机及微信APP等多个场景下顺畅使用。

前言

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

您将在本篇中读完get到

在vuepress中如何注入全局组件
实现置顶与置底的效果
实现圆环涟漪动画
在自己的网站中添加支付能力,同时支持支付宝与微信支付功能（通用）

不会后端,也能轻松实现网站具备支付宝与微信支付的能力,本篇适用于小白,适合在自己的网站中玩玩的

省去扫码这一环节，避免手机浏览器无法扫码、难以扫码而错失打赏的问题，支持电脑端、手机端、微信APP等多种场景

让您的网站日进斗金不是梦~

写作不易,不喜勿喷,本篇部分内容为付费,感谢分享,有的人见到了付费,就会喷,但有的人见到了,哦，原来还可以这么搞的,便会花小额涨知识,于是会想方设法加到自己的网站上去的.

在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则隐藏