基于mui+html实现分享给微信好友和微信朋友圈
基于mui+html实现分享给微信好友和微信朋友圈，效果如下图所示。
第一步 初始准备
微信开放平台的地址为：https://open.weixin.qq.com/
注册并登陆成功之后，就可以创建移动应用了：
-
1.点击创建移动应用，并填写应用基本信息。
-
2.填写平台信息。在这里我选的是Android应用。
注：应用签名要使用一个签名生成工具来生成。
在微信开放平台资源中心中可以找到这个签名生成工具。
点击下载该工具，将工具安装到手机，填写你自己的APP的应用包名，便可得到应用签名。
包名为打包项目时填写的包名
-
在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);
}
最后
我在此只判断如果手机没有微信，提醒用户下载，具体怎么下载，没有研究，哪位大神若是知道，告诉我一声，嘻嘻
2905
