基于mui+html实现分享给微信好友和微信朋友圈(Android)


基于mui+html实现分享给微信好友和微信朋友圈

基于mui+html实现分享给微信好友和微信朋友圈,效果如下图所示。
在这里插入图片描述在这里插入图片描述

第一步 初始准备

微信开放平台的地址为:https://open.weixin.qq.com/
注册并登陆成功之后,就可以创建移动应用了:

  • 1.点击创建移动应用,并填写应用基本信息。

  • 2.填写平台信息。在这里我选的是Android应用。
    注:应用签名要使用一个签名生成工具来生成。
    在微信开放平台资源中心中可以找到这个签名生成工具。
    点击下载该工具,将工具安装到手机,填写你自己的APP的应用包名,便可得到应用签名。![在这里插入图片描述](https://img-blog.csdnimg.cn/20190508182145628.在这里插入图片描述
    生成签名如下图所示‘
    在这里插入图片描述
    包名为打包项目时填写的包名
    在这里插入图片描述

  • 在APP的sdk配置项填入得到的appid和appsecret即可.
    在这里插入图片描述

第二步 代码实现

我这里以mui为例:

<div class="mui-content" style="margin-top: 40%;">
	<nav class=" mui-bar-tab " style="bottom:60px!important;box-shadow: 0 1px 6px #888888;">
	    <a class="mui-tab-item mui-active" id="share" >
	        <span class="mui-tab-label">是你吗 share</span>
	    </a>
	</nav> 
</div>  
	h("#share").tap(function(){
   			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:'134px',
				top:top,
				scrollIndicator:'none',
				scalable:false,
				popGesture:'none'
			},{
				shareInfo:{
					"href":"https://www.baidu.com/",
					"title":"XXX的详情",
					"content":"点击一下看看详情吧!",
					"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;
			}
		}

share.html

<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>
		<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:47%; ;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-6">
					<img class="mui-media-object" src="https://img-blog.csdn.net/20180224121930861">
					<div class="mui-media-body">微信好友</div>
				</li>
				<li onclick="shareHref(0);" class="mui-table-view-cell mui-media mui-col-xs-6">
					<img class="mui-media-object" src="https://img-blog.csdn.net/20180224121945604">
					<div class="mui-media-body">微信朋友圈</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="XXX详情" 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; 
        }
        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){ 
            	if(!plus.runtime.isApplicationExist({pname:'com.tencent.mm',action:'weixin://'})){
            		mui.toast("请安装微信再使用分享功能!");
            	} 
            	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 ) { 
                shareMessage(msg,sb.s);
            } else { 
                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){  
            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'];
            //分享或者收藏的目标场景 通过修改scene场景值实现
            //发送到聊天界面WXSceneSession
            //发送到朋友圈 WXSceneTimeline 
            ss&&ss.nativeClient&&(shareBts.push({title:'微信朋友圈',s:ss,x:'WXSceneTimeline'}),
            shareBts.push({title:'微信好友',s:ss,x:'WXSceneSession'})); 
          	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);
		}

最后

我在此只判断如果手机没有微信,提醒用户下载,具体怎么下载,没有研究,哪位大神若是知道,告诉我一声,嘻嘻

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页

打赏作者

unny

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值