appcan中的微信分享与qq分享

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<div class="am-share" style="display:none">
  <h3 class="am-share-title">分享到</h3>
  <ul class="am-share-sns">
    <li id='share_winxin_pengyouquan'><a> <i class="am-icon-wechat"></i> <span>微信朋友圈</span> </a> </li>
    <li id="share_winxin_haoyou"><a> <i class="am-icon-wechat"></i> <span>微信好友</span> </a> </li>
    <li id="share_qq_kongjian"><a> <i class="am-icon-star"></i> <span>qq空间</span> </a> </li>
  </ul>
  <div class="am-share-footer"><button class="share_btn">取消</button></div>
</div>
<style type="text/css">
* { padding: 0; margin: 0; }
.am-share { font-size: 14px; border-radius: 0; bottom: 0; left: 0; position: fixed; text-align: center; -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); -webkit-transition: -webkit-transform 300ms; transition: transform 300ms ; width: 100%; z-index: 1110; }
.am-modal-active { transform: translateY(0px);  -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0) }
.am-modal-out { z-index: 1109; -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%) }


.am-share-title { background-color: #f8f8f8; border-bottom: 1px solid #fff; border-top-left-radius: 2px; border-top-right-radius: 2px; color: #555; font-weight: 400; margin: 0 10px; padding: 10px 0 0; text-align: center; }
.am-share-title::after { border-bottom: 1px solid #dfdfdf; content: ""; display: block; height: 0; margin-top: 10px; width: 100%; }


.am-share-footer { margin: 10px; }
.am-share-footer .share_btn { color: #555;  display: block; width: 100%; background-color: #e6e6e6; border: 1px solid #e6e6e6; border-radius: 0; cursor: pointer;  font-size: 16px; font-weight: 400; line-height: 1.2; padding: 0.625em 0; text-align: center; transition: background-color 300ms ease-out 0s, border-color 300ms ease-out 0s; vertical-align: middle; white-space: nowrap;font-family:"微软雅黑";  }


.am-share-sns { background-color: #f8f8f8; border-radius: 0 0 2px 2px; margin: 0 10px; padding-top: 15px; height:auto; zoom:1; overflow:auto; }


.am-share-sns li {margin-left: 15px; margin-bottom: 15px; display: block; float: left; height: auto;  width: 25%; }


.am-share-sns a { color: #555; display: block; text-decoration:none; }
.am-share-sns span { display: block; }


.am-share-sns li i { background-position: center 50%; background-repeat: no-repeat; background-size: 36px 36px; background-color: #ccc; color: #fff; display: inline-block; font-size: 18px; height: 36px; line-height: 36px; margin-bottom: 5px; width: 36px; }
.am-share-sns .share-icon-weibo { background-image: url(); }


.sharebg { background-color: rgba(0, 0, 0, 0.6); bottom: 0; height: 100%; left: 0; opacity: 0; position: fixed; right: 0; top: 0; width: 100%; z-index: 1100; display:none; }
.sharebg-active { opacity: 1; display:block; }


</style>


<!--line footer fixed-->
<div data-am-widget="navbar" class="am-navbar am-cf am-navbar-default"
     id="">
    <ul class="am-navbar-nav am-cf am-avg-sm-4">
        <li >
            <a href="{:U('Shop/showTel',array('uid'=>$uid))}" class="">
                <span class="am-icon-phone-square"></span>
                <span class="am-navbar-label">电话</span>
            </a>
        </li>
        <!-- <li>
       <if condition="$qq[0]['is_tg_or_yuan'] eq 1">
           <a target="_blank" href="http://wpa.qq.com/msgrd?V=1&uin={$qq.0.tg_qq}&Site=QQ咨询&Menu=yes">
               <span class="am-icon-qq"></span>
               <span class="am-navbar-label">QQ</span>
           </a>
       <elseif condition="$qq[0]['is_tg_or_yuan'] eq 2"/>
        <a target="_blank" href="http://wpa.qq.com/msgrd?V=1&uin={$qq.0.qq_qqnum}&Site=QQ咨询&Menu=yes">
               <span class="am-icon-qq"></span>
               <span class="am-navbar-label">QQ</span>
           </a>
       </if>
        </li> -->
       
       
        <!-- 原来的分享备份--开始 -->
         <li data-am-navbar-share  id="wixin_huanjing" style="display:none;">
            <a  class="" >
                <span class="am-icon-share"></span>
                <span class="am-navbar-label">分享</span>
            </a>
        </li>
        <!-- 原来的分享备份=--结束 -->
        
        
       <li  id="app_huanjing" style="display:none">
            <a  class="" id="share_winxin">
                <span class="am-icon-share"></span>
                <span class="am-navbar-label">分享</span>
            </a>
        </li>
       
        <li >
            <a href="{:U('Shop/showWx',array('uid'=>$uid,'t'=>2))}" class="">
                <span class="am-icon-qrcode"></span>
                <span class="am-navbar-label">个人微信</span>
            </a>
        </li>
        
         <li >
            <a href="{:U('Shop/showWx',array('uid'=>$uid,'t'=>1))}" class="">
                <span class="am-icon-weixin"></span>
                <span class="am-navbar-label">微信公众号</span>
            </a>
        </li>

    </ul>
</div>




<script>
//判断是否是微信内置浏览器
function isWeiXin(){ 
var ua = window.navigator.userAgent.toLowerCase(); 
if(ua.match(/MicroMessenger/i) == 'micromessenger'){ 
return true; 
}else{ 
return false; 
} 
} 
if(!isWeiXin()){
$(function(){
   $('#app_huanjing').show();
$('#wixin_huanjing').hide(); 
$('#share_winxin').click(function(event){
toshare();
event.stopPropagation();
}); 


})

window.uexOnload = function() {

        //appcan.initBounce();
        //分享相关开始
        $('#share_winxin_pengyouquan').click(function(event){
        uexWindow.toast(1,5,'分享中，请稍后...',0);//打开分享提示框
        getShare(1);//分享到朋友圈
        event.stopPropagation();
        }); 
        $('#share_winxin_haoyou').click(function(event){
         uexWindow.toast(1,5,'分享中，请稍后...',0);//打开分享提示框
        getShare(0);//分享给朋友
        event.stopPropagation();
        }); 
        
        $('#share_qq_kongjian').click(function(event){
         uexWindow.toast(1,5,'分享中，请稍后...',0);//打开分享提示框
        qqShare();//分享给qq
        event.stopPropagation();
        }); 
} 

//微信分享
function getShare(id){
// var shareThumbImg ="res://icon.png";
        var shareThumbImg ="http://minbangtravel.com/shareThumbImg/logo_03_1.png";
        var shareWedpageUrl =window.location.href;//获取当前网页地址url
        var sid=id;
        var shareTitle = "全域旅游";
        var shareDescription = "全域旅游-旅游";
        
        uexWeiXin.registerApp('wx64a3f9b074767494');
        uexWeiXin.cbShareImageContent  = function(data){
            if (data == 0){
                uexWindow.toast(0,8,"分享成功！",2000);
            }else{
                uexWindow.toast(0,8,"分享失败！",2000); 
            }
         }
        uexWeiXin.cbShareTextContent = function(data){
            if (data == 0){
                uexWindow.toast(0,8,"分享成功！",2000);
            }else{
                uexWindow.toast(0,8,"分享失败！",2000);
            }
         }
        uexWeiXin.cbShareLinkContent = function(data){
            if (data == 0){
                uexWindow.toast(0,8,"分享成功！",2000);
            }else{
                uexWindow.toast(0,8,"分享失败！",2000);   
            }
         }
        
         uexWeiXin.cbIsWXAppInstalled = function(opCode, dataType, data){
            if (data == 1) {
            //未安装
                if (uexWidgetOne.getPlatform() == '0') {
                //ios
                    uexWindow.cbConfirm = function(opId, dataType, data) {
                        if (data == 0) {
                            uexWeiXin.cbGetWXAppInstallUrl = function(opCode, dataType, data) {
                                uexWidget.loadApp("", "", data);
                            }
                            uexWeiXin.getWXAppInstallUrl();
                        }
                    }
                    uexWindow.confirm("提示", "您还未安装微信客户端，是否安装微信客户端！", '确定;取消'.split(';'));
                } else {
                //android
                    uexWindow.alert('提示', '您还未安装微信客户端', '确定');
                }
            } else {
            //已经安装
                shareWeixin();
            }
         }
         function shareWeixin(){
             // uexWeiXin.sendImageContent(1, shareThumbImg, shareThumbImg, shareLink, shareTitle, sharedescription);
             // uexWeiXin.sendTextContent(1,'微信分享测试');
             // var JsonData = '{"thumbImg":"'+shareThumbImg+'","wedpageUrl":"'+shareLink+'","scene":1,"title":"'+shareTitle+'"}';
            // var JsonData = '{"thumbImg":"","wedpageUrl":"'+shareLink+'","scene":1,"title":"'+shareTitle+'"}';
             var JsonData = '{"thumbImg":"'+shareThumbImg+'","wedpageUrl":"'+shareWedpageUrl+'","scene":"'+sid+'","title":"'+shareTitle+'","description":"'+shareDescription+'"}';
             uexWeiXin.shareLinkContent(JsonData);
             uexWindow.closeToast();//关闭分享提示框
         }
         uexWeiXin.isWXAppInstalled(); 
}
 



//qq分享
function qqShare(){
uexQQ.cbIsQQInstalled=function(opId,dataType,data){
if(data==0){
//安装qq了
shareWebImgTextToQQ();
}else{
//未安装
alert('请安装QQ');
}
}
uexQQ.cbShareQQ=function(opId,dataType,data){
if (data == 0){
               uexWindow.toast(0,8,"分享成功！",2000);
         }else{
               uexWindow.toast(0,8,"分享失败！",2000); 
         }
};

uexQQ.isQQInstalled();
}
 function shareWebImgTextToQQ(){
  var qqTitle="测试标题";
var qqSummary="图文分享消息摘要";
var qqTargetUrl=window.location.href;
var qqImageUrl="http://minbangtravel.com/shareThumbImg/logo_03_1.png";
var qqAppName="全域旅游";
//var qqCflag=1;//不填写的时候可以自己选择分享到QQ好友或者qq空间
var appId='1105376211';
         //var json = '{"title":"'+qqTitle+'","summary":"'+qqSummary+'","targetUrl":"'+qqTargetUrl+'","imageUrl":"'+qqImageUrl+'","appName":"'+qqAppName+'","cflag":"'+qqCflag+'"}';
         var json = '{"title":"'+qqTitle+'","summary":"'+qqSummary+'","targetUrl":"'+qqTargetUrl+'","imageUrl":"'+qqImageUrl+'","appName":"'+qqAppName+'"}';
         uexQQ.shareWebImgTextToQQ('1105376211', json);
         uexWindow.closeToast();//关闭分享提示框
         
     } 
 
 



}else{
$(function(){
$('#app_huanjing').hide();//微信中隐藏app环境下的分享按钮
$('#wixin_huanjing').show(); 
}) 

//微信中
$('#share_winxin').click(function(){
toshare();
}); 
//通过config接口注入权限验证配置
wx.config({
   debug: false,
   appId: "{$signPackage['appId']}",
   timestamp: "{$signPackage['timestamp']}",
   nonceStr: "{$signPackage['nonceStr']}",
   signature: "{$signPackage['signature']}",
   jsApiList: [
       // 所有要调用的 API 都要加到这个列表中
       'checkJsApi',
       'onMenuShareTimeline',
     ]
});




wx.error(function (res) {
//alert('1_'+res);
       alert(res);
   });








// 通过ready接口处理成功验证
wx.ready(function () {
document.querySelector('#share_winxin_pengyouquan').onclick = function(){
alert(location.href.split('#')[0])
         wx.onMenuShareTimeline({
   title: '全域旅游', // 分享标题
   link: 'http://minbangtravel.com/index.php/Wap/Index/index', // 分享链接
   imgUrl: 'http://minbangtravel.com/shareThumbImg/logo_03_1.png', // 分享图标
   success: function () { 
    //alert("陈宫");
       // 用户确认分享后执行的回调函数
   },
   cancel: function () { 
    alert('shib');
       // 用户取消分享后执行的回调函数
   }
 }); 
         
    }
 

/* $('#share_winxin_pengyouquan').click(function(){
//通过checkJsApi判断当前客户端版本是否支持指定获取地理位置
var isOk=true;
wx.checkJsApi({
   jsApiList: [
       'onMenuShareTimeline'
   ],
   fail: function (res) {
                       alert("微信版本太低，不支持分享给朋友圈的功能！");
                       isOk = false;
                   },
                   success: function (res) {
                       alert("支持weixin分享。");
                   }
});
if(!isOk){
return;
} 

wx.onMenuShareTimeline({
   title: '全域旅游', // 分享标题
   link: 'http://minbangtravel.com/index.php/Wap/Index/index', // 分享链接
   imgUrl: 'http://minbangtravel.com/shareThumbImg/logo_03_1.png', // 分享图标
   success: function () { 
    alert("陈宫");
       // 用户确认分享后执行的回调函数
   },
   cancel: function () { 
    alert('shib');
       // 用户取消分享后执行的回调函数
   }
});


}) */



});




}




function toshare(){
$(".am-share").css({ "display": "block"});
$(".am-share").addClass("am-modal-active");
if($(".sharebg").length>0){
$(".sharebg").addClass("sharebg-active");
}else{
$("body").append('<div class="sharebg"></div>');
$(".sharebg").addClass("sharebg-active");
}
$(".sharebg-active,.share_btn").click(function(){
$(".am-share").removeClass("am-modal-active");
setTimeout(function(){
$(".sharebg-active").removeClass("sharebg-active");
$(".sharebg").remove();
},300);
})
}




</script>