DIV CSS 佈局教程網

本文實例講述了JS版微信6.0分享接口用法。分享給大家供大家參考，具體如下：

為了淨化網絡，整頓誘導分享及誘導關注行為，微信於2014年12月30日發布了《微信公眾平台關於整頓誘導分享及誘導關注行為的公告》，微信平台開發者發現，原有的微信分享功能不能用了。正在苦於微信分享該怎麼解決時，微信於2015年1月10日即時發布了開放JS-SDK，為微信網站的開發提供了強大的js功能。

注：

1.微信JS-SDK，提供的分享接口僅是監聽分享事件觸發時，修改分享的標題、鏈接等。不能自定義觸發分享事件

2.分享的監聽，僅提供了騰訊旗下產品的接口，接口列表：分享到朋友圈、分享給朋友、分享到QQ、分享到QQ空間、分享到騰訊微博；

微信6.0之後，原有的WeixinJSBridge.on('menu:share:timeline', function (argv) {}不再可以使用，但是微信提供的新的方法 JS-SDK, 官方接口請參見 微信JSSDK說明文檔

分享接口使用實例：

注：本文介紹的前提是服務器端已經獲取的公眾平台的access_token和Jsapi_Ticket

一、權限驗證配置，注冊當前頁面使用的分享接口

//注入權限驗證配置
wx.config({
  debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。
  appId: '@AccessTokenManage.AppID', // 必填，公眾號的唯一標識
  timestamp:@timestamp , // 必填，生成簽名的時間戳
  nonceStr: '@timestamp', // 必填，生成簽名的隨機串
  signature: '@Common.SecurityHelper.SHA1(sig)',// 必填，簽名，見附錄1
  jsApiList: [
    //分享接口列表
    'onMenuShareTimeline',
    'onMenuShareAppMessage',
    'onMenuShareQQ',
    'onMenuShareQZone',
    'onMenuShareWeibo'
  ] // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2
});

二、在ready事件中，注冊監聽分享

//處理成功驗證
wx.ready(function () {
  // config信息驗證後會執行ready方法，所有接口調用都必須在config接口獲得結果之後，
  //config是一個客戶端的異步操作，所以如果需要在頁面加載時就調用相關接口，則須把相關接口放在ready函數中調用來確保正確執行。
  //對於用戶觸發時才調用的接口，則可以直接調用，不需要放在ready函數中。
  //監聽，分享到朋友圈
  wx.onMenuShareTimeline({
    title:'標題測試',
    link:'http://www.jb51.net',
    imgUrl:'http://www.jb51.net/favicon.ico',
    success:function(){
      appendText('分享成功');
    },
    calcel:function(){
      appendText('已經取消');
    }
  });
  //監聽，分享到QQ空間
  wx.onMenuShareQZone({
    title: '標題測試', // 分享標題
    desc: '描述測試', // 分享描述
    link: 'http://www.jb51.net', // 分享鏈接
    imgUrl: 'http://www.jb51.net/favicon.ico', // 分享圖標
    success: function () {
      // 用戶確認分享後執行的回調函數
      appendText('分享QQ空間成功');
    },
    cancel: function () {
      // 用戶取消分享後執行的回調函數
      appendText('分享QQ控件取消');
    }
  });
  //監聽，分享給朋友 （type，dataurl基本可以放棄不使用）
  wx.onMenuShareAppMessage({
    title: '標題測試', // 分享標題
    desc: '描述測試', // 分享描述
    link: 'http://www.jb51.net', // 分享鏈接
    imgUrl: 'http://www.jb51.net/favicon.ico', // 分享圖標
    type: 'link', // 分享類型,music、video或link，不填默認為link
    dataUrl: '', // 如果type是music或video，則要提供數據鏈接，默認為空
    success: function () {
      // 用戶確認分享後執行的回調函數
      appendText('分享給朋友成功');
    },
    cancel: function () {
      // 用戶取消分享後執行的回調函數
      appendText('分享給朋友取消');
    }
  });
  //監聽，分享到QQ
  wx.onMenuShareQQ({
    title: '標題測試', // 分享標題
    desc: '描述測試', // 分享描述
    link: 'http://www.jb51.net', // 分享鏈接
    imgUrl: 'http://www.jb51.net/favicon.ico', // 分享圖標
    success: function () {
      // 用戶確認分享後執行的回調函數
      appendText('分享到QQ成功');
    },
    cancel: function () {
      // 用戶取消分享後執行的回調函數
      appendText('分享到QQ取消');
    }
  });
  //監聽，分享到騰訊微博 (基本可以放棄不使用)
  wx.onMenuShareWeibo({
    title: '標題測試', // 分享標題
    desc: '描述測試', // 分享描述
    link: 'http://www.jb51.net', // 分享鏈接
    imgUrl: 'http://www.jb51.net/favicon.ico', // 分享圖標
    success: function () {
      // 用戶確認分享後執行的回調函數
      appendText('分享到騰訊微博成功');
    },
    cancel: function () {
      // 用戶取消分享後執行的回調函數
      appendText('分享到騰訊微博失敗');
    }
  });
  appendText('ready事件觸發');
});

關於常用封裝實例可參考前面一篇《微信js-sdk分享功能接口常用邏輯封裝示例》

更多關於JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript中json操作技巧總結》、《JavaScript切換特效與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》

希望本文所述對大家JavaScript程序設計有所幫助。