分享内容至第三方应用（QQ，微信好友，朋友圈）

最新推荐文章于 2022-10-23 21:48:03 发布

lzh908085137

最新推荐文章于 2022-10-23 21:48:03 发布

阅读量449

点赞数

文章标签：微信 css3 前端

本文链接：https://blog.csdn.net/qq_50711985/article/details/121959693

版权

本文档详细介绍了如何在移动端实现分享功能，包括获取分享服务列表、发送分享消息的步骤，以及分享到微信、微信朋友圈和QQ的具体操作。在微信分享时需注意图片大小限制和描述长度。此外，还提供了在Android环境下必要的准备代码。

摘要由CSDN通过智能技术生成

文章目录

效果

在这里插入图片描述

使用

var Share = new Object();
var shares = null;

    /**
    * 更新分享服务
    */
    Share.updateSerivces = function () {
        plus.share.getServices(function (s) {
            shares = {};
            for (var i in s) {
                var t = s[i];
                console.log(t + "*******************")
                shares[t.id] = t;
            }
            outSet("获取分享服务列表成功");
        }, function (e) {
            outSet("获取分享服务列表失败：" + e.message);
        });
    }
//获取分享服务↑


    /**
     * 发送分享消息
     * msg ：为携带得参数（content：分享的详情，href：点击分享时访问的路径，title：分享的标题
	 *	，thumbs：右侧得图片图片最好背景为白色）
     */
    Share.shareMessage = function (s, ex, shareData) {
        var msg = {
            content: shareData.content, 
            href: 'http://www.pro-think.net/',
            title: shareData.title,      
            thumbs: ['http://60.205.207.84:/group1/M00/00/0F/PM3PVGG5qYyAZ7xOAAASDegIO4c591.png'],
           // pictures: ['http://60.205.207.84:/group1/M00/00/0F/PM3PVGG5qYyAZ7xOAAASDegIO4c591.png'],
            extra: {
                scene: ex
            }
        };
        s.send(msg, function () {
            outLine("分享成功!");
        }, function (e) {
            outLine("分享失败!");
        });
    }


    /**
     * 分享操作
     */
    Share.shareAction = function (id, ex, shareData) {
        var s = null;
        if (!id || !(s = shares[id])) {
            outLine("无效的分享服务！");
            return;
        }
        if (s.authenticated) {
            outSet("---已授权---");
            Share.shareMessage(s, ex, shareData);
        } else {
            outSet("---未授权---");
            s.authorize(function () {
                Share.shareMessage(s, ex, shareData);
            }, function (e) {
                outLine("认证授权失败");
            });
        }
    }

    // 控制台输出日志
    function outSet(msg) {
        console.log(msg);
    }

    // 界面弹出吐司提示
    function outLine(msg) {
        mui.toast(msg);
    }

    export default Share;

上边工具类↑
下边页面调用↓

//在mounted内先声明
var Intent = null,
    File = null,
    Uri = null,
    main = null;

var shareImageUrl = '';
mui.plusReady(function() {
    shareJS.updateSerivces();
    if (plus.os.name == "Android") {
        Intent = plus.android.importClass("android.content.Intent");
        File = plus.android.importClass("java.io.File");
        Uri = plus.android.importClass("android.net.Uri");
        main = plus.android.runtimeMainActivity();
    }
})

点击按钮或图标弹出（发送给微信好友，分享到微信朋友圈，分享到QQ）即可（其中shareJS.方法名为调用上边工具类里边得方法），其中在微信分享的时候需要注意，微信分享得图片需要在32kb以内，描述过长会导致分享失败（如下图）
在这里插入图片描述

/**
 * 分享按钮点击事件
 * 注意这里的这些id值
 */
shareHref:function(params) {
    let ids = [{
            id: "weixin",
            ex: "WXSceneSession"  /*微信好友*/
        }, {
            id: "weixin",
            ex: "WXSceneTimeline" /*微信朋友圈*/
        }, {
            id: "qq"   /*QQ好友*/
        }],
        bts = [{
            title: "发送给微信好友"
        }, {
            title: "分享到微信朋友圈"
        }, {
            title: "分享到QQ"
        }];
    plus.nativeUI.actionSheet({
            cancel: "取消",
            buttons: bts
        },
        function(e) {
            let i = e.index;
            let shareData={
                content:params.article_content.replace(/<[^>]+>/g,"").substring(0,40)+"...",
                title:params.article_title,
            }
            if (i > 0) {
                  shareJS.shareAction(ids[i - 1].id, ids[i - 1].ex,shareData);
            }
        }
    );
},