• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    HTML5中外部浏览器唤起微信分享

    最近在做一个手机站,要求点击分享可以直接打开微信分享出去。而不是jiathis,share分享这种的点击出来二维码。在网上看了很多,都说APP能唤起微信,手机网页实现不了。也找了很多都不能直接唤起微信。

    总结出来一个可以直接唤起微信的。适应手机qq浏览器和uc浏览器。

    下面上代码,把这些直接放到要转发的页面里就可以了:

    html部分:

    <script src="mshare.js"></script>//引进mshare.js
    <button data-mshare="0">点击弹出原生分享面板</button>
    <button data-mshare="1">点击触发朋友圈分享</button>
    <button data-mshare="2">点击触发发送给微信朋友</button>

    js部分:

    <script>
    var mshare = new mShare({
        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://placehold.it/150x150'
    });
    $('button').click(function () {
        // 1 ==> 朋友圈  2 ==> 朋友  0 ==> 直接弹出原生
        mshare.init(+$(this).data('mshare'));
    });
    </script>
    

    下面是mshare.js的代码分享,把这些代码新建一个js文件放进去,然后在页面中引进就ok了。

     

    /**
     * 此插件主要作用是在UC和QQ两个主流浏览器
     * 上面触发微信分享到朋友圈或发送给朋友的功能
     */
    'use strict';
    var UA = navigator.appVersion;
     
    /**
     * 是否是 UC 浏览器
     */
    var uc = UA.split('UCBrowser/').length > 1 ? 1 : 0;
     
    /**
     * 判断 qq 浏览器
     * 然而qq浏览器分高低版本
     * 2 代表高版本
     * 1 代表低版本
     */
    var qq = UA.split('MQQBrowser/').length > 1 ? 2 : 0;
     
    /**
     * 是否是微信
     */
    var wx = /micromessenger/i.test(UA);
     
    /**
     * 浏览器版本
     */
    var qqVs = qq ? parseFloat(UA.split('MQQBrowser/')[1]) : 0;
    var ucVs = uc ? parseFloat(UA.split('UCBrowser/')[1]) : 0;
     
    /**
     * 获取操作系统信息  iPhone(1)  Android(2)
     */
    var 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文件
     */
    var qqBridgeLoaded = false;
     
    // 进一步细化版本和平台判断
    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) {
        // qq == 0 
        if (!qq) {
            return cb && cb();
        }
        var script = document.createElement('script');
        script.src = (+qq === 1) ? '//3gimg.qq.com/html5/js/qb.js' : '//jsapi.qq.com/get?api=app.share';
        /**
         * 需要等加载过 qq 的 bridge 脚本之后
         * 再去初始化分享组件
         */
        script.onload = function () {
            cb && cb();
        };
        document.body.appendChild(script);
    }
    /**
     * UC浏览器分享
     * @method ucShare
     */
    function ucShare(config) {
        // ['title', 'content', 'url', 'platform', 'disablePlatform', 'source', 'htmlID']
        // 关于platform
        // ios: kWeixin || kWeixinFriend;
        // android: WechatFriends || WechatTimeline
        // uc 分享会直接使用截图
        var platform = '';
        var shareInfo = null;
        // 指定了分享类型
        if (config.type) {
            if (os == 2) {
                platform = config.type == 1 ? 'WechatTimeline' : 'WechatFriends';
            } else if (os == 1) {
                platform = config.type == 1 ? 'kWeixinFriend' : 'kWeixin';
            }
        }
        shareInfo = [config.title, config.desc, config.url, platform, '', '', ''];
        // android 
        if (window.ucweb) {
            ucweb.startRequest && ucweb.startRequest('shell.page_share', shareInfo);
            return;
        }
        if (window.ucbrowser) {
            ucbrowser.web_share && ucbrowser.web_share.apply(null, shareInfo);
            return;
        }
    }
    /**
     * qq 浏览器分享函数
     * @method qqShare
     */
    function qqShare(config) {
        var type = config.type;
        //微信好友 1, 微信朋友圈 8
        type = type ? ((type == 1) ? 8 : 1) : '';
        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 (qqBridgeLoaded) {
            share();
        } else {
            loadqqApi(share);
        }
    }
    /**
     * 对外暴露的接口函数
     * @method mShare
     * @param  {Object} config 配置对象
     */
    function mShare(config) {
        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 () {
        qqBridgeLoaded = true;
    });
    if (typeof module === 'object' && module.exports) {
        module.exports = mShare;
    } else {
        window.mShare = mShare;
    }

    好了,这样就可以直接唤起微信进行分享啦

    总结

    以上所述是小编给大家介绍的HTML5中外部浏览器唤起微信分享,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
    如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

    上一篇:在HTML5 localStorage中存储对象的示例代码
    下一篇:HTML+CSS+JS实现图片的瀑布流布局的示例代码
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    HTML5中外部浏览器唤起微信分享 HTML5,中,外部,浏览器,唤起,