Code of external browser arousing wechat sharing function in HTML5

Time:2020-9-27

Recently, I was working on a mobile phone station. I asked you to click share to open wechat to share. Instead of jiatis, share shares this kind of QR code. After reading a lot on the Internet, they all said that app can arouse wechat, but mobile page can’t be realized. Many of them can’t directly arouse wechat.

It is concluded that one can directly arouse wechat. Adapt to mobile QQ browser and UC browser.

The following code is used to put these directly into the page to be forwarded:

HTML part:

<script src=" mshare.js "> < / script > // Introduction mshare.js
< button data mshare = "0" > Click to pop up the native sharing panel < / button >
< button data mshare = "1" > Click to trigger sharing in circle of friends < / button >
< button data mshare = "2" > Click trigger to send to wechat friends < / button >

JS part:

<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 = = > circle of friends 2 = = > friend 0 = = > pop native directly
    mshare.init(+$(this).data('mshare'));
});
</script>

Here is mshare.js To share the code, create a new JS file, and then import it in the page.

/**
 *This plug-in is mainly used in UC and QQ two mainstream browsers
 *It triggers wechat to share with friends or send to friends
 */
'use strict';
var UA = navigator.appVersion;
 
/**
 *Is it UC browser
 */
var uc = UA.split('UCBrowser/').length > 1 ? 1 : 0;
 
/**
 *Judge QQ browser
 *However, QQ browser is divided into high and low versions
 *2 stands for high version
 *1 stands for low version
 */
var qq = UA.split('MQQBrowser/').length > 1 ? 2 : 0;
 
/**
 *Is it wechat
 */
var wx = /micromessenger/i.test(UA);
 
/**
 *Browser version
 */
var qqVs = qq ? parseFloat(UA.split('MQQBrowser/')[1]) : 0;
var ucVs = uc ? parseFloat(UA.split('UCBrowser/')[1]) : 0;
 
/**
 *Get operating system information 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;
    }
}());
 
/**
 *Is the API file loaded under QQ browser
 */
var qqBridgeLoaded = false;
 
//Further refine the version and platform judgment
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;
        }
    }
}
/**
 *Under QQ browser, the corresponding bridge is loaded according to different versions
 * @method loadqqApi
 *@ param {function} CB callback function
 */
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';
    /**
     *After loading the QQ bridge script
     *Then initialize the sharing component
     */
    script.onload = function () {
        cb && cb();
    };
    document.body.appendChild(script);
}
/**
 *UC browser sharing
 * @method ucShare
 */
function ucShare(config) {
    // ['title', 'content', 'url', 'platform', 'disablePlatform', 'source', 'htmlID']
    //About platform
    // ios: kWeixin || kWeixinFriend;
    // android: WechatFriends || WechatTimeline
    //UC share will use screenshots directly
    var platform = '';
    var shareInfo = null;
    //Share type specified
    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 browser share function
 * @method qqShare
 */
function qqShare(config) {
    var type = config.type;
    //Wechat friends 1, wechat circle of friends 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);
    }
}
/**
 *Exposed interface functions
 * @method mShare
 *@ param {object} config configuration object
 */
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) {}
    }
}
//Preloading QQ Bridge
loadqqApi(function () {
    qqBridgeLoaded = true;
});
if (typeof module === 'object' && module.exports) {
    module.exports = mShare;
} else {
    window.mShare = mShare;
}

OK, so you can directly arouse wechat to share

summary

This article about HTML5 in the external browser to arouse wechat sharing function of the code is introduced here, more related HTML5 external call wechat sharing content, please search the previous articles of developpaer or continue to browse the related articles below, I hope you can support developeppaer more in the future!