html5手機(jī)網(wǎng)站調(diào)用微信分享，其中示例包括 1. 獲取網(wǎng)絡(luò)類型 2. 調(diào)起客戶端的圖片播放組件 3. 調(diào)用微信掃描二維碼 4. 判斷是否安裝對應(yīng)的應(yīng)用 5. 發(fā)送郵件 6. 分享到微信朋友圈
目前創(chuàng)新互聯(lián)已為上1000+的企業(yè)提供了網(wǎng)站建設(shè)、域名、虛擬主機(jī)、網(wǎng)站托管、服務(wù)器租用、企業(yè)網(wǎng)站設(shè)計、集賢網(wǎng)站維護(hù)等服務(wù)，公司將堅持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。
一、html5手機(jī)網(wǎng)站調(diào)用微信分享包括 ：
獲取網(wǎng)絡(luò)類型。
調(diào)起客戶端的圖片播放組件。
調(diào)用微信掃描二維碼。
判斷是否安裝對應(yīng)的應(yīng)用。
發(fā)送郵件。
分享到微信朋友圈。
二、代碼如下：
[html]?view?plain?copy
!DOCTYPE?html??
html??
head??
meta?charset="utf-8"??
meta?http-equiv="X-UA-Compatible"?content="IE=edge,chrome=1"??
titleHTML5網(wǎng)頁如何調(diào)用瀏覽器APP的微信分享功能/title??
meta?name="viewport"?content="width=device-width,?initial-scale=1"?/??
link?rel="shortcut?icon"?type="image/x-icon"?href="favicon.ico"?/??
link?rel="stylesheet"?type="text/css"?href="css/test.css"?/??
style?type="text/css"??
html,??
body?{??
margin:?0;??
padding:?0;??
}??
/style??
/head??
body??
span?class="shareBtn"?id="toshare"點(diǎn)擊分享到/span??
div?id="nativeShare"/div??
script?type="text/javascript"?src="js/vendor/jquery-1.11.3.min.js"/script??
script?type="text/javascript"?src="js/nativeShare.js"/script??
script?type="text/javascript"??
$("#toshare").bind("click",?function()?{??
var?config?=?{??
url:?'',?//分享url??
title:?'',?//內(nèi)容標(biāo)題??
desc:?'',?//描述??
img:?'',?//分享的圖片??
img_title:?'',?//圖片名稱??
from:?''?//來源??
};??
var?share_obj?=?new?nativeShare('nativeShare',?config);??
$(".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??
/body??
/html
三、輸出結(jié)果：
四、其他分享接口：
A.獲取“分享到朋友圈”按鈕點(diǎn)擊狀態(tài)及自定義分享內(nèi)容接口。
wx.onMenuShareTimeline({
title:?'',?//?分享標(biāo)題
link:?'',?//?分享鏈接
imgUrl:?'',?//?分享圖標(biāo)
success:?function?()?{?
//?用戶確認(rèn)分享后執(zhí)行的回調(diào)函數(shù)
},
cancel:?function?()?{?
//?用戶取消分享后執(zhí)行的回調(diào)函數(shù)
}
});
B.獲取“分享給朋友”按鈕點(diǎn)擊狀態(tài)及自定義分享內(nèi)容接口。
wx.onMenuShareAppMessage({
title:?'',?//?分享標(biāo)題
desc:?'',?//?分享描述
link:?'',?//?分享鏈接
imgUrl:?'',?//?分享圖標(biāo)
type:?'',?//?分享類型,music、video或link，不填默認(rèn)為link
dataUrl:?'',?//?如果type是music或video，則要提供數(shù)據(jù)鏈接，默認(rèn)為空
success:?function?()?{?
//?用戶確認(rèn)分享后執(zhí)行的回調(diào)函數(shù)
},
cancel:?function?()?{?
//?用戶取消分享后執(zhí)行的回調(diào)函數(shù)
}
});
C.獲取“分享到QQ”按鈕點(diǎn)擊狀態(tài)及自定義分享內(nèi)容接口。
wx.onMenuShareQQ({
title:?'',?//?分享標(biāo)題
desc:?'',?//?分享描述
link:?'',?//?分享鏈接
imgUrl:?'',?//?分享圖標(biāo)
success:?function?()?{?
//?用戶確認(rèn)分享后執(zhí)行的回調(diào)函數(shù)
},
cancel:?function?()?{?
//?用戶取消分享后執(zhí)行的回調(diào)函數(shù)
}
});
D.獲取“分享到騰訊微博”按鈕點(diǎn)擊狀態(tài)及自定義分享內(nèi)容接口。
wx.onMenuShareWeibo({
title:?'',?//?分享標(biāo)題
desc:?'',?//?分享描述
link:?'',?//?分享鏈接
imgUrl:?'',?//?分享圖標(biāo)
success:?function?()?{?
//?用戶確認(rèn)分享后執(zhí)行的回調(diào)函數(shù)
},
cancel:?function?()?{?
//?用戶取消分享后執(zhí)行的回調(diào)函數(shù)
}
});
E.獲取“分享到QQ空間”按鈕點(diǎn)擊狀態(tài)及自定義分享內(nèi)容接口
wx.onMenuShareQZone({
title:?'',?//?分享標(biāo)題
desc:?'',?//?分享描述
link:?'',?//?分享鏈接
imgUrl:?'',?//?分享圖標(biāo)
success:?function?()?{?
//?用戶確認(rèn)分享后執(zhí)行的回調(diào)函數(shù)
},
cancel:?function?()?{?
//?用戶取消分享后執(zhí)行的回調(diào)函數(shù)
}
});
如果考慮的范圍只是微信內(nèi)置瀏覽器和手機(jī)上的瀏覽器應(yīng)用（safari、chrome）的話，差不多有幾個不同點(diǎn)吧：
最突出的差別，前端要注意分享功能！上線之前，每個頁面基本都要review一邊分享功能是不是完善的。
微信最近提供了新的接口，所以以后會有更多與微信貼合緊密的特性。
html5接口上的差異。safari和chrome的話提供的html5接口會更多，而微信內(nèi)置瀏覽器的接口比較少，印象最深的是usermedia。前幾天在項目里還發(fā)現(xiàn)，微信里固定定位的支持還是不夠好，safari在這點(diǎn)上現(xiàn)在好很多了。所以如果想讓
web
應(yīng)用在微信里體驗更好一些的話，iscroll類的模塊是免不了的。
微信瀏覽器的兼容性問題，在android上比較明顯。印象比較深的是三星的機(jī)型上不支持background-size-cover，必須使用-webkit-background-size才行。小米的輸入框比較難搞。。。
開發(fā)、調(diào)試上的問題。android
chrome比較好，有遠(yuǎn)程調(diào)試功能。微信里面基本木有辦法。遇到棘手的問題，一般會使用modernizr來做特性檢測，或者使用遠(yuǎn)程log工具調(diào)試。
第一種，編輯模式
登陸進(jìn)入微信公眾平臺；
點(diǎn)擊菜單中的“高級功能”；
打開“編輯模式”；
設(shè)置自動回復(fù)，添加一個圖文內(nèi)容，將原文鏈接設(shè)置為自己網(wǎng)站。
第二種，開發(fā)模式
登陸進(jìn)入微信公眾平臺；
點(diǎn)擊菜單中的“高級功能”；
打開"開發(fā)模式"；
點(diǎn)擊”查看文檔“按鈕進(jìn)入開發(fā)接口文檔；
根據(jù)接口文檔開發(fā)并部署一個具有外網(wǎng)IP，80端口的Web服務(wù)；
在微信公眾平臺”開發(fā)模式“界面中填寫URL和Token。
首先，可以使用微信公眾平臺的內(nèi)容編輯器或其他的微信編輯器來編輯微信的內(nèi)容并發(fā)布；
其次，用dw制作的html5網(wǎng)頁要在微信公眾平臺上進(jìn)行上傳，可以通過第三方平臺進(jìn)行；
最后，如果不上傳，也可以考慮用微信平臺的鏈接實(shí)現(xiàn)對html5網(wǎng)頁的跳轉(zhuǎn)。
最后一種方法是最直接有效，而且基本上80%的微信平臺都是這樣使用的；
希望對你有所幫助！
重慶分公司
重慶分公司
