当前位置:首页 > 网站技术 > 前端技术 > 正文内容

手机端分享调用功能的实现(只能在真机上测试有效)

小彬2020-07-06前端技术112

html:
<a href="javascript:void(0);"
onclick="call('default')"> <i></i> <b>分享</b></a>
添加此demo即可实现微信,QQ,微信朋友圈,微博等诸多功能

手机端分享调用功能的实现(只能在真机上测试有效)


点击更多还有支付宝,邮箱,私信等等分享功能

 有一个问题就是,在微信内置浏览器没有效果,所以我又做了判断

最后附上js


手机端分享调用功能的实现(只能在真机上测试有效)nativeShare.js


<script>
    var nativeShare = new NativeShare()
    var shareData = {
        title: document.title,
        desc: document.getElementById("description").content,
        // 如果是微信该link的域名必须要在微信后台配置的安全域名之内的。
        link: window.location.href,
        icon: 'https://avatar.csdn.net/5/2/E/1_qq175023117.jpg?1539049275',
        // 不要过于依赖以下两个回调,很多浏览器是不支持的
        success: function() {
            alert('分享成功')
        },
        fail: function() {
            alert('分享失败')
        }
    }
    nativeShare.setShareData(shareData)
    function call(command) {
        try {
            nativeShare.call(command)
        } catch (err) {
            // 如果不支持,你可以在这里做降级处理
            alert(err.message)
        }
    }
    function setTitle(title) {
        nativeShare.setShareData({
            title: title,
        })
    }
function isQQAPP(){
    var ua = navigator.userAgent.toLowerCase();
    var isWeixin = ua.match(/MicroMessenger/i) == "micromessenger";
    if (isWeixin) {
        $(".all-shareT").show();
//此乃一张箭头指向右上角的图片
    }else{
        return false;
    }
}
//判断是否在微信浏览器打开
$(".all-share").click(function(){
    isQQAPP();
})
$(".all-shareT").click(function(){
    $(this).hide()
})
</script>


标签: javascript
分享给朋友:

相关文章

HTTP之协议结构、通讯原理以及http特性和使用方法

HTTP之协议结构、通讯原理以及http特性和使用方法

1、http协议 超文本传输协议(http)是一种通信协议,它允许将超文本标记语言(html)文档从web服务器传送到客户端的浏览器http是一个属于应用层的面向对象的协议web是一种基于超...

html5 移动端开发总结

html5 移动端开发总结

取自https://quirksmode.org/mobile/viewports2.html手机与浏览器浏览器:移动端开发主要针对手机,ipad等移动设备,随着地铁里的低头族越来越多,移动端开发在前...

浏览器缓存机制

浏览器缓存机制

浏览器缓存机制本文地址: https://www.laruence.com/2010/03/05/1332.htmlCache-ControlCache-Control 是最重要的规则。这个...

Vue2.x进阶知识

Vue2.x进阶知识

1.自定义指令—directive指令用法官方文档: https://cn.vuejs.org/v2/guide/custom-directive.html Vue.directive("...

Vue2.x基础知识

Vue2.x基础知识

1.vue绑定值与字符串拼接四种方法 A  :title="`字符串${变量}`"    B  :titl...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

分享:

支付宝

微信