1.準(zhǔn)備工作

? APPID公眾號(hào)id、申請(qǐng)好友分享介面、ip白名單、js介面安全網(wǎng)域設(shè)定（必須透過(guò)備案） 。要先登入微信公眾平臺(tái)進(jìn)入「公眾號(hào)設(shè)定」的功能設(shè)定裡填寫「JS介面網(wǎng)域」

#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)證設(shè)定

? 所有需要使用JS-SDK的頁(yè)面必須先註入設(shè)定訊息，否則將無(wú)法呼叫（同一個(gè)url只需要呼叫一次，對(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[&#39;appid&#39;];?>",
  timestamp: "<?php echo $weixin_package[&#39;timestamp&#39;];?>",
  nonceStr: "<?php echo $weixin_package[&#39;noncestr&#39;];?>",
  signature: "<?php echo $weixin_package[&#39;signature&#39;];?>",
  jsApiList: [
    &#39;onMenuShareTimeline&#39;,
    &#39;onMenuShareAppMessage&#39;,
    &#39;onMenuShareQQ&#39;,
    &#39;onMenuShareWeibo&#39;,
   ]
})

wx.ready(function () {
  wx.onMenuShareTimeline(data);
  wx.onMenuShareAppMessage(data);
  wx.onMenuShareQQ(data)
  wx.onMenuShareWeibo(data)
})

注意點(diǎn)：

1. title，建議在14個(gè)字以內(nèi)

2. #圖片尺寸：300*300 像素；圖片格式：大小不超過(guò)10kB，不支援GIF格式；會(huì)取目前頁(yè)面body內(nèi)最前面的一張符合條件的圖片

3. 對(duì)標(biāo)題簡(jiǎn)單解讀，建議20字以內(nèi)

4. link:'', //分享鏈接，改鏈接網(wǎng)域或路徑必須與目前頁(yè)面對(duì)應(yīng)的公帳號(hào)JS安全網(wǎng)域一致

二、QQ分享?

? QQ是透過(guò)head裡面的標(biāo)籤來(lái)識(shí)別分享的圖示和標(biāo)題，涉及h5微資料的一個(gè)屬性itemprop，

<meta itemprop="name" content="標(biāo)題"/>
<meta itemprop="description" name="description" content="描述"/>
<meta itemprop="image" content="縮列圖地址"/>

相關(guān)推薦：

微信公眾號(hào)自訂分享內(nèi)容實(shí)現(xiàn)

微信公眾號(hào)授權(quán)設(shè)置，微信公眾授權(quán)?

以上是微信公眾號(hào)裡「JS介面網(wǎng)域」實(shí)現(xiàn)分享功能的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！