复制微信号并跳转到微信界面

向右看齐 2022-04-23 06:22 259阅读 1赞

经常遇到需要写复制微信号并跳转到微信界面的功能，这里整理了两种样式，方便下次直接拿来使用。

<style> a:link{ text-decoration:none;}/* 指正常的未被访问过的链接*/ a:visited{ text-decoration:none;}/*指已经访问过的链接*/ a:hover{ text-decoration:none;}/*指鼠标在链接*/ a:active{ text-decoration:none;}/* 指正在点的链接*/ .wx{ width: 90%; margin-left: 5%; font-size: 18px; color:white; text-align: center; background-color: #ff7f2e; border-radius: 5px; line-height: 40px; } .wx a{ font-size: 18px; color:white; } /*弹窗*/ .tan{ width:80%; height:180px; background-color:#e8e8e8; position:fixed; left:10%; top:40%; display:none; z-index: 200; } .kuang{ height:120px; text-align:center; padding: 20px 0; } .txtcss{ color:red; font-weight:800; font-size:20px; } .copy{ font-size: 16px; float: left; background-color: #5AD700; padding: 5px 20px; margin-left: 25%;color: black; border-radius: 5px; } .copy a{ color: white;} .guanbi{ width:20px; height:20px; color:red; margin-top:-130px; } </style>
    
    
    第一种：点击后直接复制并跳转微信界面
    <div class="row">
         <div class="wx" onclick="copywx()">
             <a href="weixin://"><span id="copy_content">136xxxx6510</span>（微信同号）,复制跳转微信</a>
         </div>
    </div>
    
    第二种：点击后出现弹框，复制并跳转微信界面
    <div class="row">
        <div class="wx" onclick="showwx()">添加微信了解更多</div>
    </div>
    
        
        <div id='myshow' class="tan">
            <div class="kuang">
                咨询学费<br/>
                了解更多<br/>
                请添加微信:<br/>
                <span id="copy_content" class="txtcss">136xxxx6510</span>
            </div>
            <div style="height: 10px;"></div>
            <p onclick="copywx()" class="copy"><a href="weixin://">复制并跳转微信</a></p>
            <div onclick="closeshow()" class="closeshow pull-right guanbi">x</div>
        </div>
    
    
    <script> /*点击复制微信号*/ 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("复制成功！"); } /*点击出现弹框*/ function showwx(){ var ss=document.getElementById('myshow'); ss.style.display='block'; } /*关闭弹窗*/ function closeshow(){ var ss=document.getElementById('myshow'); ss.style.display='none'; } </script>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTI5NzAx_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTI5NzAx_size_16_color_FFFFFF_t_70]: /images/20220323/7d52cbdf719549eea9408fa9ef4dd861.png

发表评论取消回复

表情：

评论列表（有 0 条评论，259人围观）

还没有评论，来说两句吧...

相关阅读

相关微信扫码跳转微信小程序

一:首先声明为什么需要这样做项目中需要在后台管理页面进行扫码支付,其他人弄了微信小程序支付,所以就需要挑战小程序进行支付,在跳转的时候需要参数例如订单编号等二:跳转小程

比眉伴天荒/ 2023年10月15日 12:04/ 0 赞/ 194 阅读

相关微信公众号网页H5跳转微信小程序

[https://www.jianshu.com/p/5bc4589dd034][https_www.jianshu.com_p_5bc4589dd034] wx.c

比眉伴天荒/ 2023年01月15日 09:30/ 0 赞/ 230 阅读

相关手机浏览器跳转微信指定页面及跳转微信公众号一键关注

这篇文章主要介绍了如何在手机浏览器wap网页中点击链接跳转到微信界面,需要的朋友可以参考下先说第一种，最简单的唤起微信协议，weixin://主流浏览器都支持，app加个浏

桃扇骨/ 2023年01月12日 01:47/ 0 赞/ 592 阅读

相关微信小程序跳转另一个微信小程序携带参数并接收参数

当前微信小程序 wx.navigateToMiniProgram({ appId: 'xxx', // 跳转小程序的appId

﹏ヽ暗。殇╰゛Y/ 2022年11月14日 14:46/ 0 赞/ 416 阅读

相关微信支付与微信应用间跳转

前言年末了，一直在忙项目，很少有时候写一些自己的见解。今天挤出一点时间来写一下刚刚完成的微信的支付和跳转到微信的功能。如果你还没有做过，可以看一下，作为参考。如果你

╰+攻爆jí腚メ/ 2022年08月18日 14:17/ 0 赞/ 193 阅读

相关微信小程序登录并成功跳转

//app.js App({ onLaunch: function () { // 展示本地存储能力 var l

╰半夏微凉°/ 2022年05月29日 04:08/ 0 赞/ 234 阅读

相关微信跳转到关注公众号万能链接

[https://mp.weixin.qq.com/mp/profile\_ext?action=home&\_\_biz=MzU5MTMzMDcwNw==\wechat\_r

川长思鸟来/ 2022年05月10日 10:34/ 0 赞/ 269 阅读

相关复制微信号并跳转到微信界面

经常遇到需要写复制微信号并跳转到微信界面的功能，这里整理了两种样式，方便下次直接拿来使用。 <style> a:link{ text-decoration:none;

向右看齐/ 2022年04月23日 06:22/ 1 赞/ 260 阅读

相关微信小程序跳转界面传递参数注意事项

以下为跳转方法： wx.navigateTo(\{ url: '../index/index?dataInfo=' + encodeURIComponent(JSON.st

╰半夏微凉°/ 2022年02月13日 06:55/ 0 赞/ 314 阅读

相关 uniapp 在微信小程序当中跳转微信小程序

在微信小程序中跳转到另一个微信小程序方法放入 methods 中 go(){ uni.navigateToMiniProgram({

小鱼儿/ 2021年07月25日 17:53/ 0 赞/ 883 阅读