H5手机移动端调起浏览器(qq浏览器,uc浏览器)自带分享功能实例

Stella981
• 阅读 826

H5手机移动端调起浏览器(qq浏览器,uc浏览器)自带分享功能实例

(转载:https://blog.csdn.net/weixin\_38787928/article/details/86741227)

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
 *
 */
 
!(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);
点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
3个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Wesley13 Wesley13
2年前
Java获得今日零时零分零秒的时间(Date型)
publicDatezeroTime()throwsParseException{    DatetimenewDate();    SimpleDateFormatsimpnewSimpleDateFormat("yyyyMMdd00:00:00");    SimpleDateFormatsimp2newS
Wesley13 Wesley13
2年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
2年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
2年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
2年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
8个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这