[h5] Click to copy the WeChat account and automatically open the WeChat application, similar to the Taobao, Zhihu application, etc.

Show results:

Preparation:

quote jquery.js and clipboard.min.js

Needless to say, jQuery clipboard.min.jsis a JavaScript library for copying to the clipboard on web pages. It provides an easy way to handle copy operations without using the browser's native copy command or manually selecting text and right-clicking to copy

code show as below:

<!DOCTYPE html>    
<html lang="en">    
<head>    
    <meta charset="UTF-8">    
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
    <script src="https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js"></script> 
    <title>点击复制微信号并自动打开微信应用</title>    
</head>    
<body>    
<span id="target">微信号123132</span>
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#target" id="copy_btn">    
    点击复制    
</button>    
</body>    
<script>    
    $(document).ready(function(){      
        var clipboard = new Clipboard('#copy_btn');    
        clipboard.on('success', function(e) {    
            alert("微信号复制成功",1500);
            window.location.href='weixin://';
            e.clearSelection();    
            console.log(e.clearSelection);    
        });    
    });    
</script>    
</html>

annotation:

e.clearSelection() : Clear user selected text

data-clipboard-action="copy": Specifies that the type of the copy operation is "copy", indicating that the copy operation will be performed when the button is clicked.

data-clipboard-target="#target": Specifies the selector of the target element to be copied, which  means that  the text content of the element #targetto be copied  .id="target"

Replenish:

To open applications such as Taobao and Zhihu in a browser, you can use a similar method:

//打开淘宝
window.location.href = 'taobao://';
//打开知乎
window.location.href = 'zhihu://';

Why does this evoke the app application?

URL Scheme is Android, and Scheme is an in-page jump protocol

Simply put, URL Scheme is a protocol that allows apps to jump to each other. The URL Scheme of each app is different

Guess you like

Origin blog.csdn.net/weixin_52479803/article/details/131599522