MUI分享链接到微信好友、朋友圈、QQ好友（终极版）

最新推荐文章于 2023-04-27 15:05:30 发布

原创最新推荐文章于 2023-04-27 15:05:30 发布 · 置顶 · 1.6w 阅读

23 ·

CC 4.0 BY-SA版权

文章标签：

#mui #share

本文介绍了一种基于HBuilder+HTML5的移动端分享功能实现方法，支持微信、朋友圈和QQ等主流社交平台分享，并提供了完整的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

声明：借鉴很多前辈的代码，进行代码整合、测试之后，在APP上线使用（仅支持安卓）。

效果图：

点击右上角分享按钮，出现分享界面效果图：

微信分享：

QQ好友分享：

朋友圈分享：

测试时候不需要填写appid:

这个代码实现并不需要填写，下面直接给大家贴代码：

分享按钮，直接贴到body里面就行

<a class="mui-icon iconfont icon-send mui-pull-right" onclick="openShare();" ></a>

按钮出发事件(href是链接，title是标题，content是内容)看效果图：

<script type="text/javascript">
		function openShare() {
			shareWebview();
		}
		mui.plusReady(function() {
			ws = plus.webview.currentWebview();
			//关闭splash页面；
			plus.navigator.closeSplashscreen();
		})
		var sharew;
		var ws = null;
		/**
		 *分享窗口
		 */
		function shareWebview() {
			ws = plus.webview.currentWebview();
			if (sharew) { // 避免快速多次点击创建多个窗口
				return;
			}
			var top = plus.display.resolutionHeight - 134;
			var href = "share.html"; 
			sharew = plus.webview.create(href, "share.html", {
				width: '100%',
				height: '134',
				top: top,
				scrollIndicator: 'none',
				scalable: false,
				popGesture: 'none'
			}, {
				shareInfo: {
					"href": "www.baidu.com",
					"title": "【加工跟单】新的订单详情",
					"content": "欢迎使用加工跟单APP,点击查看订单详情！",
					"pageSourceId": ws.id
				}
			});
			sharew.addEventListener("loaded", function() {
				sharew.show('slide-in-bottom', 300);
			}, false);
			// 显示遮罩层  
			ws.setStyle({
				mask: "rgba(0,0,0,0.5)"
			});
			// 点击关闭遮罩层
			ws.addEventListener("maskClick", closeMask, false);
		}

		function closeMask() {
			ws.setStyle({
				mask: "none"
			});
			//避免出现特殊情况，确保分享页面在初始化时关闭 
			if (!sharew) {
				sharew = plus.webview.getWebviewById("share.html");
			}
			if (sharew) {
				sharew.close();
				sharew = null;
			}
		}
	</script>

点击后跳转share.html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />

		<style type="text/css">
			.mui-grid-9 {
				background: white !important;
			}
			li {
				border-left: none !important;
			}
			img {
				width: 50px !important;
			}
			body {
				background: transparent !important;
			}
			.mui-content {
				background: white;
				text-align: center;
			}
		</style>
	</head>

	<body onclick="closeShare();">
		<div class="mui-content">
			<img id="pic" src="img/add.png" style="display: none;" />
		</div>
		<footer style="position: absolute;bottom: 0px; width:100%;background: white;">
			<div style="height: 30px; line-height: 30px ;font-family: '黑体'; margin-left:40%; ;margin-top: 50%;">分享订单</div>
			<ul class="mui-table-view mui-grid-view mui-grid-9">
				<li onclick="shareHref(1);" class="mui-table-view-cell mui-media mui-col-xs-4">
					<img class="mui-media-object" src="img/share/share_to_icon_wx.png">
					<div class="mui-media-body">微信</div>
				</li>
				<li onclick="shareHref(0);" class="mui-table-view-cell mui-media mui-col-xs-4">
					<img class="mui-media-object" src="img/share/share_to_icon_wxq.png">
					<div class="mui-media-body">朋友圈</div>
				</li>
				<li onclick="shareHref(2);" class="mui-table-view-cell mui-media mui-col-xs-4">
					<img class="mui-media-object" src="img/share/share_to_icon_qq.png">
					<div class="mui-media-body">QQ</div>
				</li>
			</ul>
		</footer>
		<input id="sharehref" style="display: none;" class="sharehref" type="url" value="www.baidu.com" placeholder="请输入要分享的链接地址" />
		<input id="sharehrefTitle" style="display: none;" class="sharehref" type="text" value="加工详情" placeholder="请输入要分享的链接标题" />
		<input id="sharehrefDes" style="display: none;" class="sharehref" type="text" value="我正在使用HBuilder+HTML5开发移动应用，赶紧跟我一起来体验！" placeholder="请输入要分享的链接描述" />
	</body>

	<script type="text/javascript" charset="utf-8">
      
        var shares=null;
        var Intent=null,File=null,Uri=null,main=null;
        // H5 plus事件处理
        function plusReady(){
            updateSerivces();
            if(plus.os.name=="Android"){
                main = plus.android.runtimeMainActivity();
                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();
            }
            var shareInfo = plus.webview.currentWebview().shareInfo;
			sharehref.value = shareInfo.href;
			sharehrefTitle.value = shareInfo.title;
			sharehrefDes.value = shareInfo.content;
			pageSourceId = shareInfo.pageSourceId;
			console.log("pageSource:" + pageSourceId);
        }
        if(window.plus){
            plusReady();
        }else{
            document.addEventListener("plusready",plusReady,false);
        }
        
        /**
         * 
         * 更新分享服务
         */
        function updateSerivces(){
            plus.share.getServices( function(s){
                shares={};
                for(var i in s){
                    var t=s[i];
                    shares[t.id]=t;
                }
            }, function(e){
                outSet("获取分享服务列表失败："+e.message );
            } );
        }
        
        
        
        /**
           * 分享操作
           * @param {JSON} sb 分享操作对象s.s为分享通道对象(plus.share.ShareService)
           * @param {Boolean} bh 是否分享链接
           */
        function shareAction(sb,bh) {
            if(!sb||!sb.s){
                console.log("无效的分享服务！");
                return;
            }
            if (plus.os.name !== "Android") {
					plus.nativeUI.alert("此平台暂不支持系统分享功能!");
					return;
			}
            
            var msg={content:sharehrefDes.value,extra:{scene:sb.x}};
            if(bh){
                msg.href=sharehref.value;
                if(sharehrefTitle&&sharehrefTitle.value!=""){
                    msg.title=sharehrefTitle.value;
                }
                if(sharehrefDes&&sharehrefDes.value!=""){
                    msg.content=sharehrefDes.value;
                }
                msg.thumbs=["_www/logo.png"];
                msg.pictures=["_www/logo.png"];
            }else{
                if(pic&&pic.realUrl){
                    msg.pictures=[pic.realUrl];
                }
            }
            // 发送分享
            if ( sb.s.authenticated ) {
                console.log("---已授权---");
                shareMessage(msg,sb.s);
            } else {
                console.log("---未授权---");
                sb.s.authorize( function(){
                        shareMessage(msg,sb.s);
                    },function(e){
                        console.log("认证授权失败："+e.code+" - "+e.message );
                    
                });
            }
        }
        /**
           * 发送分享消息
           * @param {JSON} msg
           * @param {plus.share.ShareService} s
           */
        function shareMessage(msg,s){
            
            console.log(JSON.stringify(msg));
            s.send( msg, function(){
                console.log("分享到\""+s.description+"\"成功！ " );
                
            }, function(e){
                console.log( "分享到\""+s.description+"\"失败: "+JSON.stringify(e) );
            
            } );
        }
        // 分析链接
        function shareHref(index){
            var shareBts=[];
            // 更新分享列表
            var ss=shares['weixin'];
            ss&&ss.nativeClient&&(shareBts.push({title:'微信朋友圈',s:ss,x:'WXSceneTimeline'}),
            shareBts.push({title:'微信好友',s:ss,x:'WXSceneSession'}));
            ss=shares['qq'];
            ss&&ss.nativeClient&&shareBts.push({title:'QQ',s:ss});
         
          	 shareAction(shareBts[index],true);
        }
        mui.back = function() {
			var sourcePage = plus.webview.getWebviewById(pageSourceId);
			if (sourcePage) {
				sourcePage.evalJS("closeMask()");
			}
		}

		function closeShare() {
			console.log("e:" + event.target.name);
		}
        
        </script>

</html>

以上就是全部代码，有三个隐藏的input框，当你没有传入三个参数进来，会默认调用input框中的value值，优先调用传入的参数。研究了一个礼拜的功能，记得点个赞再走~~

补充图标分享：