2048
登录
没  有  难  学  的  前  端
登 录
×
<返回上一级

抖音webview页面跳转微信朋友圈分享

html5网页特效javascript抖音作者:东邪

最近在工作中,遇到一个比较新奇的需求,就是在抖音里面直接调用微信朋友圈分享功能。

我们需要用到一个js朋友圈分享插件NativeShare.js(在uc浏览器和qq浏览器支持该插件)。

大体思路

第一步:调用NativeShare.js自带分享朋友圈功能;

第二步:如果自带webview不支持,就调用uc浏览器或者qq浏览器重新打开页面地址;

第三步:在uc或者qq浏览器的环境中重新调用分享到朋友圈功能;

啥都不说直接上代码,哈哈。


<script type="text/javascript" src="/resources/js/NativeShare.js"></script>
<script type="text/javascript" src="/resources/js/toast.js"></script>//toast提示小插件
<script type="text/javascript">
        var nativeShare = new NativeShare()
        var shareData = {
            title: 'NativeShare',
            desc: 'NativeShare是一个整合了各大移动端浏览器调用原生分享的插件',
            // 如果是微信该link的域名必须要在微信后台配置的安全域名之内的。
            link: 'https://github.com/fa-ge/NativeShare',
            icon: 'https://pic3.zhimg.com/v2-080267af84aa0e97c66d5f12e311c3d6_xl.jpg',
            // 不要过于依赖以下两个回调,很多浏览器是不支持的
            success: function() {
                alert('success');
            },
            fail: function() {
                alert('fail');
            }
        };
        nativeShare.setShareData(shareData)

        function call(command) {
            try {
                nativeShare.call(command);
            } catch (err) {
                // 如果不支持,你可以在这里做降级处理
                toast(err.message);//弹出错误信息
                var current_url=location.href;
                try{        
                	window.location.href = 'ucbrowser://'+current_url;//调用uc浏览器
                }catch(e){
                
                }                
                setTimeout(function(){
                	window.location.href = 'mttbrowser://url='+current_url;  //调用qq浏览器      	
                },300);
            }
        };

        function setTitle(title) {
            nativeShare.setShareData({
                title: title,
            });
        };
        //判断是否是目标浏览器
        var isTargetBrowser=function(){
        	var back_val=false;
        	if (window.navigator.userAgent.toLowerCase().indexOf('ucbrowser')>=0||window.navigator.userAgent.toLowerCase().indexOf('ubrowser')>=0){
        		back_val=true;//uc浏览器
        	}
        	back_val=true;//暂且默认都是目标浏览器
        	return back_val;
        };
		var shareWx=function(){
            if (isTargetBrowser()) {
               call('wechatTimeline');
            }else{
               window.location.href = 'weixin://';
            }		
		};
		setTimeout(function(){
			shareWx();//分享微信
		},300);	
</script>

希望能够帮助遇到同样问题的前端码农兄弟们!


« 上一篇:Canvas 基础二
» 下一篇:学Vue,就要学会vue JSX(三)
评论
点击刷新
评论
相关博文
×添加代码片段