一、微信分享

1.準備工作

APPID公眾號id、申請好友分享接口、ip白名單、js接口安全域名設置（必須是通過備案）。要先登錄微信公眾平臺進入“公眾號設置”的功能設置里填寫“JS接口域名”

2.引入js

注意：支持使用AMD/CMD標準加載方法

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

3.通過config接口注入權限驗證配置

所有需要使用JS-SDK的頁面必須先注入配置信息，否則將無法調用（同一個url僅需要調用一次，對于變化url的SPA的web app可在每次url變化時進行調用，目前Android微信客戶端不支持pushShate的H5新特性，所以使用pushState來實現web app的頁面會導致簽名失敗，此問題在Android6.2修復）

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

4.通過ready接口處理成功驗證

wx.ready(function(){//config信息驗證后會執行ready方法，所有接口調用必須在config接口獲得結果之后，config是一個客戶端的異步操作，所以如果需要在頁面加載時就調用相關接口，則須把相關接口放在ready函數中調用來確保正確執行。對于用戶觸發時才調用的接口，則可以直接調用，不需要放在ready函數中 });

5.通過error接口處理失敗驗證

wx.error({//config信息驗證失敗會執行error函數，如簽名過期導致驗證失敗，具體錯誤信息可以打開config的debug模式查看，也可以在返回的res參數中查看，對于SPA可以在這里更新簽名 });

js代碼

var data = {title: '',summary: '',pic: '',url: '',success: function(){getWeixin() ;//用戶確認分享后執行的回調函數},cancel: function(){//用戶取消分享后執行的回調函數} }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) })

注意點：
title，建議在14個字以內圖片尺寸： 300*300像素；圖片格式：大小不超過10kB，不支持GIF格式；會取當前頁面body內最前面的一張符合條件的圖片對標題簡要解讀，建議20字以內link:’’, //分享鏈接，改鏈接域名或路徑必須與當前頁面對應的公賬號JS安全域名一致

---

二、QQ分享

QQ是通過head里面的標簽來識別分享的圖標和標題，涉及到h5微數據的一個屬性itemprop，

<meta itemprop="name" content="標題"/> <meta itemprop="description" name="description" content="描述"/>

在js中的應用：獲取完數據后自定義分享

/*QQ分享*/ var shareName = '分享標題'; 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);

三、微信分享實例

export function wxShare() {let shareTitle = '馬優晨是好人'let shareInfo = '馬優晨是大好人'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異步請求修改本次分享的內容，因為客戶端分享操作是一個同步操作，這時候使用ajax的回包會還沒有返回//alert('用戶點擊發送給朋友');},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異步請求修改本次分享的內容，因為客戶端分享操作是一個同步操作，這時候使用ajax的回包會還沒有返回//alert('用戶點擊分享到朋友圈');},success: function(res) {},cancel: function(res) {//alert('已取消');},fail: function(res) {alert(JSON.stringify(res))}})//分享到QQwx.onMenuShareQQ({title: shareTitle, // 分享標題desc: shareInfo, // 分享描述link: location.href, // 分享鏈接imgUrl: shareUrl, // 分享圖標success: function() {// 用戶確認分享后執行的回調函數},cancel: function() {// 用戶取消分享后執行的回調函數}})//分享到微博wx.onMenuShareWeibo({title: shareTitle, // 分享標題desc: shareInfo, // 分享描述link: location.href, // 分享鏈接imgUrl: shareUrl, // 分享圖標success: function() {// 用戶確認分享后執行的回調函數},cancel: function() {// 用戶取消分享后執行的回調函數}})})wx.error(function(res) {//config信息驗證失敗會執行error函數，如簽名過期導致驗證失敗，具體錯誤信息可以打開config的debug模式查看，也可以在返回的res參數中查看，對于SPA可以在這里更新簽名console.log('微信分享失敗,檢查原因！', res)}) }

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。