综合应用，点击手机网页底部导航栏按钮，实现复制微信号和打开微信效果代码-趣啦吧

显示效果如下：

综合应用，点击手机网页底部导航栏按钮，实现复制微信号和打开微信效果代码

需要用到3个部分：
1）利用clipboard.min.js实现点击复制微信号
2）网页里js打开微信脚本代码
3）jquery界面优美的弹出框插件jquery-confirm的使用方法

1、html部分

<div class="dibuwx" id="dibuwxM">
<ul class="dbfloat">
<li><a href="javascript:;" class="wechat-copy-btn" data-clipboard-text="15928132840" ><img src="{MY_IMG_PATH}iconwx.png">&nbsp;微信</a></li>
<li><a href="tel:{$site[phone]}"><img src="{MY_IMG_PATH}icontel.png">&nbsp;电话</a></li>
</ul>
</div>

2、css部分

<style type="text/css">
.dibuwx {z-index:999999;height: 60px;position: fixed;bottom: 0;left: 0;width: 100%;background-color: #ffffff;box-shadow: darkgrey 10px 10px 30px 5px;}
.dibuwx .dbfloat {margin-top: 10px;list-style-type: none;}
.dibuwx li {width: 50%;float: left;}
.dibuwx li a {text-decoration:none;font-size: 14px;display: block;text-align: center;color: #FFFFFF;margin: 0 8%;background-color: #d6111a;line-height: 40px;border-radius: 30px;display:-webkit-box; display:-webkit-flex;display: flex;justify-content: center;align-items: center; }
.dibuwx li a img{width:23px}



.jconfirm-holder {
    width:80%;
    margin:0 auto;
}
.jconfirm-box{
    text-align:center;

}

.jconfirm-box img{
    width:2.49094203rem;
    height:2.49094203rem;
}
.jconfirm-box .wxtitle{
    color:#000;
    font-size:1.13224638rem;
    line-height:1.13224638rem;
    font-weight:bold;
    margin:0.56612319rem 0;
    font-family: STheiti SC, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif;
    margin-top:0;
}

.jconfirm-box  .wechat-number,.jconfirm-box .desc{color:#666;line-height: 1.13224638rem;margin:0.56612319rem 0}
.jconfirm-box .desc{margin-bottom:0}
.jconfirm-box .jconfirm-content{overflow:hidden !important;}
.jconfirm-box .jconfirm-buttons {float: none !important;}
.jconfirm-box .jconfirm-buttons .btn{
    
    background-color:#1aad17 !important;;
    border-radius:0.50951087rem !important;;
    width:8.15217391rem;
    height:2.54755435rem;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer !important;;
    color:#fff !important;    
}

</style>

3、js部分

<link rel="stylesheet" href="{MY_JS_PATH}jquery-confirm.min.css">
<script src="{MY_JS_PATH}jquery-confirm.min.js"></script>
<script src="{MY_JS_PATH}clipboard.min.js"></script>
<script type="text/javascript">
  var clipboard = new Clipboard('.wechat-copy-btn');
</script>
<script type="text/javascript">
$('.wechat-copy-btn').on('click', function(){

    $.confirm({
        title: '<img src="{MY_IMG_PATH}wechat_success_icon.png" class="wechat_success_logo">',
        content: '<div class="wxtitle">复制成功</div>' +
                 '<div class="wechat-number">微信号:<span class="number-content">15928132840</span></div>' +
                 '<div class="desc">添加微信好友, 详细了解产品</div>',
        closeIcon: true,
        buttons: {
            confirm:{
                text: '打开微信',
                action:function () {
                window.location.href = 'weixin://';
                //$.alert('Confirmed!');
            }
        }
        },
    });

});
</script>

演示地址：点击查看代码实际运行效果

代码包下载：点击按钮复制微信并跳转到微信APP代码效果