互联网技术 · 2024年2月10日

HTML5中实现微信分享功能的外部浏览器代码

这篇文章主要介绍了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/150×150
});
$(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) {
   &nbsp

OpenMagic API

Need more than content? Move into the product flow.

If you are here for model access, pricing, developer docs, or the future API console, the dedicated product path now lives on api.openmagic.ai.