一、微信分享

1.準(zhǔn)備工作

APPID公眾號(hào)id、申請(qǐng)好友分享接口、ip白名單、js接口安全域名設(shè)置（必須是通過(guò)備案）。要先登錄微信公眾平臺(tái)進(jìn)入“公眾號(hào)設(shè)置”的功能設(shè)置里填寫“JS接口域名”

2.引入js

注意：支持使用AMD/CMD標(biāo)準(zhǔn)加載方法

<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

3.通過(guò)config接口注入權(quán)限驗(yàn)證配置

所有需要使用JS-SDK的頁(yè)面必須先注入配置信息，否則將無(wú)法調(diào)用（同一個(gè)url僅需要調(diào)用一次，對(duì)于變化url的SPA的web app可在每次url變化時(shí)進(jìn)行調(diào)用，目前Android微信客戶端不支持pushShate的H5新特性，所以使用pushState來(lái)實(shí)現(xiàn)web app的頁(yè)面會(huì)導(dǎo)致簽名失敗，此問(wèn)題在Android6.2修復(fù)）

wx.config({debug: true, //開(kāi)啟調(diào)試模式，調(diào)用所有的api的返回值會(huì)在客戶端alert出來(lái)，若要查看傳入的參數(shù)，可以在PC端打印出來(lái)appId: '', //必填，公賬號(hào)的唯一標(biāo)識(shí)timestamp: '', //必填，生成簽名的時(shí)間戳nonceStr: '', //必填，生成簽名的隨機(jī)串signature: '', //必填，簽名jsApiList: [ //必填，需要使用js列表，否則無(wú)法分享成功'onMenuShareTimeline', //朋友圈'onMenuShareAppMessage', //朋友'onMenuShareQQ', //QQ'onMenuShareWeibo', //QQ空間] })

4.通過(guò)ready接口處理成功驗(yàn)證

wx.ready(function(){//config信息驗(yàn)證后會(huì)執(zhí)行ready方法，所有接口調(diào)用必須在config接口獲得結(jié)果之后，config是一個(gè)客戶端的異步操作，所以如果需要在頁(yè)面加載時(shí)就調(diào)用相關(guān)接口，則須把相關(guān)接口放在ready函數(shù)中調(diào)用來(lái)確保正確執(zhí)行。對(duì)于用戶觸發(fā)時(shí)才調(diào)用的接口，則可以直接調(diào)用，不需要放在ready函數(shù)中 });

5.通過(guò)error接口處理失敗驗(yàn)證

wx.error({//config信息驗(yàn)證失敗會(huì)執(zhí)行error函數(shù)，如簽名過(guò)期導(dǎo)致驗(yàn)證失敗，具體錯(cuò)誤信息可以打開(kāi)config的debug模式查看，也可以在返回的res參數(shù)中查看，對(duì)于SPA可以在這里更新簽名 });

js代碼

var data = {title: '',summary: '',pic: '',url: '',success: function(){getWeixin() ;//用戶確認(rèn)分享后執(zhí)行的回調(diào)函數(shù)},cancel: function(){//用戶取消分享后執(zhí)行的回調(diào)函數(shù)} }wx.config({swapTitleInWX: true,appId: "<?php echo $weixin_package['appid'];?>",timestamp: "<?php echo $weixin_package['timestamp'];?>",nonceStr: "<?php echo $weixin_package['noncestr'];?>",signature: "<?php echo $weixin_package['signature'];?>",jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage','onMenuShareQQ','onMenuShareWeibo',] })wx.ready(function () {wx.onMenuShareTimeline(data);wx.onMenuShareAppMessage(data);wx.onMenuShareQQ(data)wx.onMenuShareWeibo(data) })

注意點(diǎn)：
title，建議在14個(gè)字以內(nèi)圖片尺寸： 300*300像素；圖片格式：大小不超過(guò)10kB，不支持GIF格式；會(huì)取當(dāng)前頁(yè)面body內(nèi)最前面的一張符合條件的圖片對(duì)標(biāo)題簡(jiǎn)要解讀，建議20字以內(nèi)link:’’, //分享鏈接，改鏈接域名或路徑必須與當(dāng)前頁(yè)面對(duì)應(yīng)的公賬號(hào)JS安全域名一致

---

二、QQ分享

QQ是通過(guò)head里面的標(biāo)簽來(lái)識(shí)別分享的圖標(biāo)和標(biāo)題，涉及到h5微數(shù)據(jù)的一個(gè)屬性itemprop，

<meta itemprop="name" content="標(biāo)題"/> <meta itemprop="description" name="description" content="描述"/>

在js中的應(yīng)用：獲取完數(shù)據(jù)后自定義分享

/*QQ分享*/ var shareName = '分享標(biāo)題'; var shareDesc= '分享描述'; var sharePic= '分享圖片路徑'; var metaStr = '<meta itemprop="name" content="'+shareName+'"/><meta name="description" itemprop="description" content="'+shareDesc+'"/><meta itemprop="image" content="'+sharePic+'"/>'; $('head').append(metaStr); $('title').html(shareName);

三、微信分享實(shí)例

export function wxShare() {let shareTitle = '馬優(yōu)晨是好人'let shareInfo = '馬優(yōu)晨是大好人'let shareUrl ='https://profile.csdnimg.cn/9/E/B/1_qq_24147051'wx.ready(function() {//分享給朋友wx.onMenuShareAppMessage({title: shareTitle,desc: shareInfo,link: window.location.href,imgUrl: shareUrl,trigger: function(res) {// 不要嘗試在trigger中使用ajax異步請(qǐng)求修改本次分享的內(nèi)容，因?yàn)榭蛻舳朔窒聿僮魇且粋€(gè)同步操作，這時(shí)候使用ajax的回包會(huì)還沒(méi)有返回//alert('用戶點(diǎn)擊發(fā)送給朋友');},success: function(res) {},cancel: function(res) {//alert('已取消');},fail: function(res) {alert(JSON.stringify(res))}})//分享到朋友圈wx.onMenuShareTimeline({title: shareTitle,link: window.location.href,imgUrl: shareUrl,trigger: function(res) {// 不要嘗試在trigger中使用ajax異步請(qǐng)求修改本次分享的內(nèi)容，因?yàn)榭蛻舳朔窒聿僮魇且粋€(gè)同步操作，這時(shí)候使用ajax的回包會(huì)還沒(méi)有返回//alert('用戶點(diǎn)擊分享到朋友圈');},success: function(res) {},cancel: function(res) {//alert('已取消');},fail: function(res) {alert(JSON.stringify(res))}})//分享到QQwx.onMenuShareQQ({title: shareTitle, // 分享標(biāo)題desc: shareInfo, // 分享描述link: location.href, // 分享鏈接imgUrl: shareUrl, // 分享圖標(biāo)success: function() {// 用戶確認(rèn)分享后執(zhí)行的回調(diào)函數(shù)},cancel: function() {// 用戶取消分享后執(zhí)行的回調(diào)函數(shù)}})//分享到微博wx.onMenuShareWeibo({title: shareTitle, // 分享標(biāo)題desc: shareInfo, // 分享描述link: location.href, // 分享鏈接imgUrl: shareUrl, // 分享圖標(biāo)success: function() {// 用戶確認(rèn)分享后執(zhí)行的回調(diào)函數(shù)},cancel: function() {// 用戶取消分享后執(zhí)行的回調(diào)函數(shù)}})})wx.error(function(res) {//config信息驗(yàn)證失敗會(huì)執(zhí)行error函數(shù)，如簽名過(guò)期導(dǎo)致驗(yàn)證失敗，具體錯(cuò)誤信息可以打開(kāi)config的debug模式查看，也可以在返回的res參數(shù)中查看，對(duì)于SPA可以在這里更新簽名console.log('微信分享失敗,檢查原因！', res)}) }

如上圖函數(shù)，在main.js 直接執(zhí)行即可wxShare（）；
如果需要 設(shè)置分享的 參數(shù)為變量，可以給 wxShare（）傳遞參數(shù)，并把shareTitle，shareInfo ，shareUrl 設(shè)置成參數(shù)接收即可。

總結(jié)

以上是生活随笔為你收集整理的H5微信分享朋友、朋友圈、QQ的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。