效果图：
点击右上角分享按钮，出现分享界面效果图：
微信分享：
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值，优先调用传入的参数。研究了一个礼拜的功能，记得点个赞再走~~
补充图标分享：
---------------------
感谢作者包包上神辛苦分享，希望mui 发布朋友圈代码能帮助到您