底部固定div并跳转复制微信号添加好友

前言：

为了方便客户浏览页面时加微信，直接点击按钮即可打开微信进行好友增加，（效果图如下）

1、css部分

.foot-shut {
    display: inline-block;
    position: absolute;
    right: 5%;
    top: 3%;
    font-size: 0.72rem;
    color: #000;
}

.zmtWechat {
    bottom: 0;
    height: 50px;
    position: fixed;
    width: 100%;
    border: 1px solid #000;
    z-index: 99;
}

.we2 {
    background: #302825;
    color: #ffffff;
    float: left;
    font-size: 18px;
    height: 50px;
    line-height: 50px;
    padding-top: 0;
    width: 60%;
    text-align: center;
}

.we1 {
    background: #137dc7;
    color: #ffffff;
    float: left;
    font-size: 18px;
    height: 50px;
    line-height: 50px;
    overflow: hidden;
    padding-top: 0;
    position: relative;
    width: 40%;
    text-align: center;
}

.we1 a {
    color: #fff;
}

.wechatIcon {
    vertical-align: middle;
    width: 30px;
}

2、html部分

<div class="zmtWechat">
    <div class="we2">
        <img class="wechatIcon" src="img/wechat.png">
        <span>微信号:
                <span id="copy_content" class="wxh_1" style="background:yellow;color:red;">
                    {contact}
                </span>
            </span>
    </div>
    <div class="we1" onclick="copywx();">
        <a href="weixin://"><span>点击加我好友</span></a><br>
    </div>
</div>

3、js部分

function copywx() {
     const range = document.createRange();
     range.selectNode(document.getElementById('copy_content'));
     const selection = window.getSelection();
     if (selection.rangeCount > 0) selection.removeAllRanges();
     selection.addRange(range);
     document.execCommand('copy');
     alert("复制成功！");
 }