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

向右看齐 2022-04-23 06:22 272阅读 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 条评论，272人围观）

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

相关阅读

相关微信小程序button动态跳转到页面

微信小程序button动态跳转到页面3、其它跳转方法简单介绍

桃扇骨/ 2024年04月29日 11:19/ 0 赞/ 89 阅读

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

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

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

相关微信小程序界面开发-界面跳转

实现界面跳转不止一种方法，比如可以使用导航栏，而下面我将用另一种方式来实现，如果你想用导航栏实现可以参考[导航栏][Link 1] 一、wxml代码 <view

青旅半醒/ 2023年06月17日 11:57/ 0 赞/ 42 阅读

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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