H5手机移动端调起浏览器自带分享功能实例(QQ、UC浏览器微博、微信分享)

这篇博客详细介绍了如何在H5手机移动端利用JavaScript调用QQ、UC浏览器及微信的内置分享功能,提供了一个实际的代码实例,强调在服务器环境运行才能生效。

H5手机移动端调起浏览器自带分享功能实例(QQ、UC浏览器微博、微信分享)

注:代码需要在服务器或测试服务器上方可看到效果

HTML:

<span class="viewshare wx"  data-mshare="2"></span>
<span class="viewshare wxline"  data-mshare="1"></span>
<span class="viewshare QQ"   data-mshare="3"></span>
<span class="viewshare wb" data-mshare="4"></span>

JS:

// 引入JS文件
<script src="js/mshare.js"></script>
var u = navigator.appVersion;
var uc = u.split('UCBrowser/').length > 1  ? 1 : 0;
var qq = u.split('MQQBrowser/').length > 1 ? 2 : 0;
var wx = ((u.match(/MicroMessenger/i)) && (u.match(/MicroMessenger/i).toString().toLowerCase() == 'micromessenger'));

// 绑定单击事件
$('.wx,.wxline,.QQ,.wb').on("click", function () {
    if(uc||(qq && !wx)){
        mshare.init(+$(this).data('mshare'));
    }
}

mshare.js

/**
 * mshare.js
 * 此插件主要作用是在UC和QQ两个主流浏览器
 * 上面触发微信分享到朋友圈或发送给朋友的功能
 * 代码编写过程中 参考:
 * http://mjs.sinaimg.cn/wap/module/share/201501261608/js/addShare.js
 * 此外,JefferyWang的项目对我也有一定启示:
 * https://github.com/JefferyWang/nativeShare.js
 *
 * @revisor  angusfu1126@qq.com
 * @date     2015-07-22
 */

!(function(global) {
    'use strict';

    var UA, uc, qq, wx, tc, qqVs, ucVs, os,qqBridgeDone;

    UA = navigator.appVersion;

    // 是否是 UC 浏览器
    uc = UA.split('UCBrowser/').length > 1  ? 1 : 0;

    // 判断 qq 浏览器
    // 然而qq浏览器分高低版本   2代表高版本  1代表低版本
    qq = UA.split('MQQBrowser/').length > 1 ? 2 : 0;

    // 是否是微信
    wx = ((UA.match(/MicroMessenger/i)) && (UA.match(/MicroMessenger/i).toString().toLowerCase() == 'micromessenger'));

    // 浏览器版本
    qqVs = qq ? parseFloat(UA.split('MQQBrowser/')[1]) : 0;
    ucVs = uc ?  parseFloat(UA.split('UCBrowser/')[1]) : 0;

    //获取操作系统信息  iPhone(1)  Android(2)
    os = (function () {
        var ua = navigator.userAgent;

        if (/iphone|ipod/i.test(ua)) {
            return 1;
        } else if(/android/i.test(ua)){
            return 2;
        } else {
            return 0;
        }
    }());

    // qq浏览器下面 是否加载好了相应的api文件
    qqBridgeDone = false;

    // 进一步细化版本和平台判断
    // 参考: https://github.com/JefferyWang/nativeShare.js
    // http://mjs.sinaimg.cn/wap/module/share/201501261608/js/addShare.js
    if ((qq && qqVs < 5.4 && os == 1) || (qq && qqVs < 5.3 && os == 1)) {
        qq = 0;
    } else {
        if (qq && qqVs < 5.4 && os == 2) {
            qq = 1;
        } else {
            if (uc && ( (ucVs < 10.2 && os == 1) || (ucVs < 9.7 && os == 2) )) {
                uc = 0;
            }
        }
    }

    /**
     * qq浏览器下面 根据不同版本 加载对应的bridge
     * @method loadqqApi
     * @param  {Function} cb 回调函数
     */
    function loadqqApi(cb) {
        if (!qq) { // qq == 0
            return cb && cb();
        }

        var qqApiScript = document.createElement('script');
        //需要等加载过qq的接口文档之后,再去初始化分享组件
        qqApiScript.onload = function () {cb && cb();};
        qqApiScript.onerror = function () {};
        // qq == 1 低版本
        // qq == 2 高版本
        qqApiScript.src = (qq == 1 ) ? 'http://3gimg.qq.com/html5/js/qb.js' : 'http://jsapi.qq.com/get?api=app.share';

        document.body.appendChild(qqApiScript);
    }


    /**
     * UC浏览器分享
     * @method ucShare
     */
    function ucShare(config) {
        // ['title', 'content', 'url', 'platform', 'disablePlatform', 'source', 'htmlID']
        // 关于platform
        // ios: kWeixin || kWeixinFriend;
        // android: WechatFriends || WechatTimeline
        // uc 分享会直接使用截图

        var platform = '', shareInfo;

        // 指定了分享类型
        if (config.type) {
            if (os == 2) {
                if(config.type==1){
                    platform = 'WechatTimeline';
                }else if(config.type==2){
                    platform = 'WechatFriends';
                }else if(config.type==3){
                    platform = 'QQ';
                }else if(config.type==4){
                    platform = 'SinaWeibo';
                }else if(config.type==0){
                    platform = 'undefined';
                }
            } else if (os == 1) {
                if(config.type==1){
                    platform = 'kWeixinFriend';
                }else if(config.type==2){
                    platform = 'kWeixin';
                }else if(config.type==3){
                    platform = 'kQQ';
                }else if(config.type==4){
                    platform = 'kSinaWeibo';
                }else if(config.type==0){
                    platform = 'undefined';
                }
            }
        }

        shareInfo = [ config.title, config.desc, config.url, platform, '', '', '' ];

        // android
        if (window.ucweb) {
            ucweb.startRequest && ucweb.startRequest('shell.page_share', shareInfo);
        }
        // ios
        else if (window.ucbrowser) {
            ucbrowser.web_share && ucbrowser.web_share.apply(null, shareInfo);
        }

    };


    /**
     * qq浏览器分享函数
     * @method qqShare
     */
    function qqShare(config) {
        var type = '';

        //微信好友1, 微信朋友圈8,QQ 4
        if(config.type==1){
            type = 8;
        }else if(config.type==2){
            type = 1;
        }else if(config.type==3){
            type = 4;
        }else if(config.type==4){
            type = 11;
        }else if(config.type==0){
            type = 'undefined';
        }

        var share = function () {
            var shareInfo = {
                'url': config.url,
                'title': config.title,
                'description': config.desc,
                'img_url': config.img,
                'img_title': config.title,
                'to_app': type,
                'cus_txt': ''
            };
            if (window.browser) {
                browser.app && browser.app.share(shareInfo);
            } else if (window.qb) {
                qb.share && qb.share(shareInfo);
            }
        };

        if (qqBridgeDone) {
            share();
        } else {
            loadqqApi(share);
        }
    };

    /**
     * 对外暴露的接口函数
     * @method mShare
     * @param  {Object} config 配置对象  参数见示例
     *     var config = {
     *          title : 'Lorem ipsum dolor sit.'
     *        , url   : 'http://m.ly.com'
     *        , desc  : 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat inventore minima voluptates.'
     *        , img   : 'http://img1.40017.cn/cn/s/c/2015/loading.gif'
     *        , type  : type // 1 ==> 朋友圈  2 ==> 朋友  0 ==> 直接弹出原生 3==>QQ
     *     }
     */
    function mShare(config) {
        this.check = function (succssFn, wxFn, failFn) {
            if (uc) {
                succssFn();
            } else if (qq && !wx) {
                succssFn();
            } else if (wx) {
                wxFn();
            } else {
                failFn();
            }
        }
        this.config = config;
        this.init = function (type) {
            if (typeof type != 'undefined') this.config.type = type;
            try {
                if (uc) {
                    ucShare(this.config);
                } else if (qq && !wx) {
                    qqShare(this.config);
                }
            } catch (e) {}
        }
    }

    // 预加载 qq bridge
    loadqqApi(function () {
        qqBridgeDone = true;
    });

    // 方法暴露给全局变量
    global.mShare = mShare;

})(this);

 

<think>好的,我现在需要帮助用户解决在UC浏览器中调用分享接口的问题。用户提到了他们提供的三个引用,看起来引用2和3是关于H5移动端调起浏览器分享功能实例,而引用1是关于OSS的API,可能不太相关。首先,我需要仔细查看引用2和3的内容,看看是否有关于UC浏览器分享接口的具体实现方法。 引用2中的JavaScript代码部分提到了检测UC浏览器的部分:通过检查用户代理字符串来判断是否是UC浏览器。代码中的变量uc是通过分割字符串'UCBrowser/'来检测的,如果存在,则uc为1。然后,在点击事件处理中,如果检测到uc为真或者QQ浏览器且不在微信中,就调用mshare.init方法,并传递相应的参数。 引用3中的HTML部分展示了几个带有data-mshare属性的span元素,这些元素可能对应不同的分享平台或类型。例如,data-mshare="1"可能是微信朋友圈,data-mshare="2"是微信好友,data-mshare="3"是QQ,data-mshare="4"是微博。看起来mshare.js这个库可能封装了调用浏览器原生分享功能的方法,通过不同的参数来触发不同的分享选项。 现在,用户的需求是找到如何在UC浏览器中调用分享接口的方法或文档,并希望得到API使用说明和示例代码。根据提供的引用,似乎他们的项目已经使用了mshare.js库来处理分享功能。因此,可能的解决方案是使用这个库,并按照示例中的方式设置参数。 接下来,我需要确认UC浏览器是否支持原生的分享接口,以及是否需要特定的参数或配置。根据引用中的代码,UC浏览器通过检查用户代理字符串来识别,然后调用mshare.init方法。这暗示着mshare.js可能已经处理了不同浏览器的兼容性问题,包括UC浏览器。因此,用户只需要按照示例代码结构,正确引入mshare.js,并在HTML元素中设置相应的data-mshare属性,就可以实现分享功能。 此外,可能需要查阅UC浏览器的官方文档来确认是否有特定的API要求。不过,根据用户提供的示例,他们可能已经通过mshare.js库抽象了底层API的调用,因此用户可能不需要直接使用UC浏览器的特定API,而是通过这个库来统一处理。 总结一下,步骤应该是:引入mshare.js库,检测用户代理是否为UC浏览器,然后绑定点击事件,调用mshare.init并传递对应的参数。同时,需要确保HTML元素有正确的data-mshare属性值来指定分享类型。 最后,需要验证这些步骤是否正确,是否有遗漏的地方。比如,是否需要申请特定的权限或密钥,或者分享内容是否需要特定的格式。不过,根据提供的代码示例,可能不需要这些额外步骤,直接按照示例实现即可。</think>根据提供的参考资料,UC浏览器中调用分享功能主要依赖浏览器原生接口实现,以下是具体实现方法和代码示例: ### 一、实现原理 UC浏览器支持通过`userAgent`检测浏览器类型后,调用其内置的分享接口[^2]。核心步骤: 1. 检测浏览器类型 2. 绑定DOM事件 3. 调用分享组件 ### 二、关键代码实现 ```html <!-- 引入分享库 --> <script src="js/mshare.js"></script> <!-- 分享按钮 --> <span class="viewshare" data-mshare="4">微博分享</span> ``` ```javascript // 浏览器检测 const ua = navigator.userAgent; const isUC = ua.indexOf('UCBrowser/') > -1; // 事件绑定 document.querySelector('.viewshare').addEventListener('click', function() { if(isUC) { mshare.init(Number(this.dataset.mshare)); // 参数对应分享类型 } }); ``` ### 三、参数说明 `data-mshare`取值对应不同平台: - 1: 微信好友 - 2: 微信朋友圈 - 3: QQ好友 - 4: 新浪微博[^3] ### 四、注意事项 1. 必须通过真实用户交互事件(如click)触发 2. 分享内容需符合浏览器安全策略 3. 移动端页面需要HTTPS协议支持
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值