MUI的分享功能实现


placeholder image
admin 发布于:2017-09-10 15:51:19
阅读:loading

基本介绍

个人平时不使用微博,感觉更不会去分享到微博上,处于学习探索的目的,只实现了分享到QQ(QQ好友和QQ空间)、微信好友、微信朋友圈,如果此前对此没有什么基础可以先了解一下5+的API实现,同时在本地调试运行的时候此模块的功能可以正常运行,是由于使用到了HBuilder内部的分享appid,打包后的分享功能就需要使用到自己配置的appid等参数了。

记得以前在研究本站接入QQ登录组件的时候,注册过一些qq的数据,比如已经申请过qq的appid,故分享到qq就不用再申请了,尝试着申请了一个微信的appid,发现过程也很简单,就不多说这个了(都是个人开发者类型)。不多说。

在manifest.json中输入想要分享到的appid信息,通过这些appid信息,在实际通过分享完成后能够显示出分享的app名称,如下是我的分享,可以看出只实现了微信好友和朋友圈以及QQ:

image.png

参考代码

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

<link href="../../css/mui.min.css" rel="stylesheet" />

<link rel="stylesheet" href="../../fonts/iconfont.css" />

<link rel="stylesheet" href="../../css/main.css" />

<style type="text/css">

.mui-bar-nav{

   padding-top: 0px;

   height: 45px!important;

}

.mui-content{

   margin-top: -10px!important;

}

</style>

</head>

<body>

<header class="mui-bar mui-bar-nav">

    <h1 class="mui-title">分享到</h1>

</header>

<div class="mui-content">

   <ul class="mui-table-view mui-grid-view mui-grid-9">

      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">

          <class="share_item" data-id="qq" title="我们的小区管家">

              <span>

                <img src="../../images/share_qq.png" width="50" />

              </span>

              <div class="mui-media-body">QQ或空间</div>

          </a>

      </li>

      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">

          <class="share_item" scene="WXSceneSession" data-id="weixin" title="我们的小区管家">

              <span>

                <img src="../../images/share_weixin.png" width="55" />

              </span>

              <div class="mui-media-body">微信好友</div>

          </a>

      </li>

      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">

          <class="share_item" scene="WXSceneTimeline" data-id="weixin" title="我们的小区管家">

              <span>

                <img src="../../images/share_weixin_friends.png" width="50" />

              </span>

              <div class="mui-media-body">微信朋友圈</div>

          </a>

      </li>

   </ul>

  

</div>

<script src="../../js/mui.min.js"></script>

<script type="text/javascript" src="../../js/common.js" ></script>

<script type="text/javascript">

mui.init();

mui.plusReady(function(){

   var implementServices {"qq"true "weixin" : true};

   updateSerivces(implementServices);

  

   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");

    }

  

   //绑定事件

   mui(".mui-table-view-cell").on("tap" ".share_item" function(e){

      var dataId this.getAttribute("data-id");

      var scene this.getAttribute("scene");

      var extra {};

      if(scene){

         extra.scene scene;

      }

      var title this.getAttribute("title");

      shareModule(title , window.shares[dataId] , extra);

   });

});

 

function updateSerivces(implementServices){

   window.shares [];

   plus.share.getServices(function(s) {

      for(var i=, lens=s.length ; i lens ; i++){

         var item s[i];

         if(!implementServices[item.id]){

            continue;

         }

         window.shares[item.id] item;

      }

   }, function(e) {

      mui.toast("获取分享服务列表失败:" e.message);

   });

}

 

function shareModule(title item extra){

   item.send({

      titletitle,

      content"小区管家,邻居小伙伴开发的,为你提供最贴心的服务,你值得拥有!",

      pictures[globalConsant.rootPath "/app/images/head_content_logo.png"],//分享的logo

      thumbs[globalConsant.rootPath "/app/images/head_content_logo.png"],//缩略图

      hrefglobalConsant.rootPath "/mobileservice/shareApp/shareApp.a",//分享独立的链接

      extraextra

   } , function(){

      plus.nativeUI.alert("分享到 " item.description 成功!" function(){

         closeShares();

      } , "提示:" "取消");

   } , function(e){

      plus.nativeUI.alert("未成功分享到 " item.description " ! " function(){

         closeShares();

      } , "警告:" "取消");

   });

}

 

function closeShares(){

   var all plus.webview.all();

   var "shares/share.html";

   for(var i=, lens all.length ; i lens; i++){

      var url all[i].getURL();

      if(url.endsWith(u)){

         all[i].close("auto");

         break;

      }

   }

}

 

</script>

</body>

</html>


代码调用

//分享组件的封装

function initShareModule(elementId webViewId){

   window.currentView plus.webview.currentWebview();

   window.currentView.addEventListener("maskClick",function(){

      var web plus.webview.getWebviewById(webViewId);

      if(web != null)

         web.close("auto");

   },false);

   document.getElementById(elementId).addEventListener("tap" function(e){

      window.currentView.setStyle({mask:"rgba(0,0,0,0.5)"});

      var web plus.webview.getWebviewById(webViewId);

      if(web == null){

         web plus.webview.create(webViewId , webViewId , {top:"72%" , popGesture:"none"});

      }

      //页面关闭后关闭遮罩

      web.addEventListener('close',function(){

         window.currentView.setStyle({mask:"none"});

      },false);

      //页面加载后显示(避免白屏)

      web.addEventListener("loaded",function(){

         web.show("slide-in-bottom",300);

      },false);

   });

}

//添加初始化分享组件,实际调用

initShareModule("shareMenus" "shares/share.html");


分享到QQ

分享到qq.gif


image.png

从电脑qq上打开的效果

 点赞


 发表评论

当前回复:作者

 评论列表


留言区