vue版本的h5页面悬浮按钮，微信小程序跳转到h5页面显示一个可来回拖动的悬浮按钮，点击h5页面的悬浮按钮返回微信小程序

pc端演示没有悬浮按钮：

小程序端演示有悬浮按钮：

微信小程序跳转 H5 页面之后，如果你在 H5 页面内部跳来跳去，顶部返回按钮也只是一步步返回你 H5 访问历史记录，没有什么方式能一步返回小程序的，所以这边添加了一个悬浮按钮，只在小程序环境下显示，为的就是不管你在 H5 页面操作了多少步，都能一步返回你的小程序

首先：在 index.html 里面引入 sdk

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js">script>

接下来上代码：

<div
    class="hover-div"
    :class="{active:touchFlag}"
    v-if="miniFlag"
    ref="hoverDiv"
    @click.stop="backMini"
    @touchstart.stop="dragStart"
    @touchend.stop="dragEnd"
    @touchmove.stop="dragMove"
    :style="{'width': width+'px','height': height+'px','left': left+'px','top': top+'px'}"
>div>

.hover-div {
    position: fixed;
    border-radius: 120px;
    background: #0ff;
    z-index: 9;
    background:radial-gradient(circle at 50% 50%,#5d5d5d 0%,#353535 30%,#000000 60%,#b6b6b6 100%); //正式使用样式
    // box-shadow: 0 0 5px 0 #000; //正式使用样式
    box-shadow: 0 0 5px 0 #0ff; //测试使用样式
    opacity:0.3;
}
.hover-div.active{ // :active不生效 什么鬼抽空查查到底是什么情况导致的 故改用这种笨笨的办法
    // background:radial-gradient(circle at 50% 50%,#868686 0%,#575757 30%,#131313 60%,#cdcdcd 100%); //正式使用样式
    background:radial-gradient(circle at 50% 50%,#f00 0%,#0f0 30%,#00f 60%,#f0f 100%);  //测试使用样式
}

clientXY 方法是封装好的原生 JS 方法，获取当前屏幕尺寸的兼容式写法，如果不会的请直接【移步这里
】

import { clientXY } from "../commons/func";
data() {
    return {
        miniFlag: false, //当前环境是否是小程序

        left: 0, // 默认值
        top: 0, //默认值
        width: 48, //div width
        height: 48, //div height
        gapWidth: 12, //div 距离屏幕两边距离

        screenW: 0, // screen width
        screenH: 0, // screen height
        touchFlag:false //当前触摸状态，我这儿添加了 :active 伪类不生效，仔细对照 css 语法以及重写了好几遍就是不生效，于是就用了这么一个东西代替了 :active
    };
},
mounted() {
    this.checkEnv();
},
methods: {
    checkEnv() {
        let clientInfo = clientXY();
        this.screenW = clientInfo.width;
        this.screenH = clientInfo.height;
        this.top = this.screenH - this.height -32; //默认位置，自行调整
        this.left = this.screenW - this.width -12; //默认位置，自行调整
        let self = this;
        wx.miniProgram.getEnv(function(res) { //判断当前环境
            if (res.miniprogram) {
                self.miniFlag = true;
            }
        });
    },
    backMini() {
        if (this.miniFlag) {
            wx.miniProgram.navigateBack(); //返回打开 H5 页面的小程序
        }
    },
    dragStart(e) {
        this.touchFlag = true; //代替 :active 伪类
        this.$refs.hoverDiv.style.transition = "none"; //不添加任何过度，防止鼠标移动的时候div原地不动
    },
    dragEnd(e) {
        this.touchFlag = false; //代替 :active 伪类
        this.$refs.hoverDiv.style.transition = "all 0.5s"; //最后div移动到屏幕边缘的过度属性
        if (this.left > this.screenW / 2) { //看div是偏左还是偏右，判断让div自动靠边站
            this.left = this.screenW - this.width - this.gapWidth;
        } else {
            this.left = this.gapWidth;
        }
    },
    dragMove(e) {
        if (e.targetTouches.length === 1) {
            let touch = e.targetTouches[0];
            this.left = touch.clientX - this.width / 2;
            this.top = touch.clientY - this.height / 2;
            if(this.top <=0){ //不能拖出去屏幕
                this.top = 0;
            }else if(this.top > this.screenH - this.height){ //不能拖出去屏幕
                this.top = this.screenH - this.height
            }
        }
    }
},