app微信分享功能

看了大部分的帖子，還是發(fā)現有用的帖子。本帖子是抄襲的，具體是那位位前輩的，我也不太清楚。

第一 、我是用mui+vue+jQuery+bootstrap開發(fā)的app應用

第二、開始我們在我們需要分享的頁面加上下面的代碼


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) { // 避免快速多次點擊創(chuàng)建多個窗口

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": "http://m.suyanwen.cn/bussiness-detail-enquiry.html?id="+ws.extId+"&userId="+vm.loginUser.id,

"title": vm.detail.name,

"content": vm.detail.name,

"pageSourceId": ws.id,

"thumbs":'https://image.baidu.com/search/detail?ct=503316480&z=undefined&tn=baiduimagedetail&ipn=d&word=%E7%95%A5%E7%BC%A9%E5%9B%BE&step_word=&ie=utf-8&in=&cl=2&lm=-1&st=undefined&hd=undefined&latest=undefined&copyright=undefined&cs=59017913,365141432&os=4138957081,3547576863&simid=3524715438,349312346&pn=278&rn=1&di=28600&ln=1125&fr=&fmq=1601366345000_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&is=0,0&istype=0&ist=&jit=&bdtype=0&spn=0&pi=0&gsm=f0&objurl=http%3A%2F%2Fimg1m.pconline.com.cn%2Fpconline%2F0708%2F22%2F1086006_0703_qhtfv616_20.jpg&rpstart=0&rpnum=0&adpicid=0&force=undefined'

}

});

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;

}

}

第三、分享下面的小圖標


<!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>

<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 οnclick="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;">

<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="../images/weixin.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="../images/wxp.png">

<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="加工詳情" placeholder="請輸入要分享的鏈接標題" />

<input id="sharehrefDes" style="display: none;" class="sharehref" type="text" value="我正在使用HBuilder+HTML5開發(fā)移動應用，趕緊跟我一起來體驗！" placeholder="請輸入要分享的鏈接描述" />

</body>

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

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

<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("此平臺暫不支持系統(tǒng)分享功能!");

// return;

// }



            var msg={content:sharehrefDes.value,extra:{scene:sb.x}};

console.log(sharehref.value)

            if(bh){

                msg.href=sharehref.value;

console.log(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];

                }

            }

            // 發(fā)送分享

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



                });

            }

        }

        /**

          * 發(fā)送分享消息

          * @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){

console.log('qwewere')

console.log(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>

******大家要注意 分享頁面必須有配套的移動端頁面

?著作權歸作者所有,轉載或內容合作請聯系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

  • 什么是Vue.js Vue.js是目前最火的一個前端框架，React是最流行的一個前端框架，（React除了開發(fā)網...
    EEEEsun閱讀 735評論 0贊 1
  • 前言 近年來國內出現了一些可以讓前端人員編寫移動端App的IDE，Hbuilder X是DCloud推出的一款免費...
    視覺派Pie閱讀 5,068評論 7贊 96
  • blossom html css JavaScript 程序員入門的時候整理的一份學習筆記,見證了我的成長備份 標...
    blossom_綻放閱讀 1,068評論 0贊 2
  • 基礎強化 聊一聊前端存儲。(1)老朋友cookie(2)短暫的sessionStorage(3)簡易強大的loca...
    藍海00閱讀 1,842評論 0贊 35
  • UI組件是對一組相關的交互和樣式的封裝，提供了簡單的調用方式和接口，讓開發(fā)者能很便捷地使用組件提供的功能來實現業(yè)務...
    Awey閱讀 13,074評論 20贊 45

友情鏈接更多精彩內容