快捷導(dǎo)航

Java微信公眾平臺開發(fā)（15）微信JSSDK的使用

更新時間：2017年04月26日 11:54:03 作者：dapengniao

這篇文章主要為大家詳細(xì)介紹了Java微信公眾平臺開發(fā)第十五步，微信JSSDK的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下

在前面的文章中有介紹到我們在微信web開發(fā)過程中常常用到的【微信JSSDK中Config配置】，但是我們在真正的使用中我們不僅僅只是為了配置Config而已，而是要在我們的項目中真正去使用微信JS-SDK給我們帶來便捷，那么這里我們就簡述如何在微信web開發(fā)中使用必要的方法！微信的JS-SDk中為我們提供的方法很多，這里我有一個簡單截圖如下：

在上圖的提供的所有口中我們可以按照接口實現(xiàn)的難易程度分成兩個部分：

較易實現(xiàn)：基礎(chǔ)接口、分享接口、設(shè)備信息接口、地理位置接口、界面操作接口、微信掃一掃接口；
較難實現(xiàn)：圖像接口、音頻接口、智能接口、微信小店接口、微信卡券接口、微信支付接口；（注：這里說較難是因為需要后端和本地文件配合接口，這些接口后面會一篇篇文章具體詳解）
在這里我們將講述所有較易實現(xiàn)的接口的具體實現(xiàn)方法，在文章中講述過了如何配置和引入需要的js，通過這些配置之后我們就可以開始使用js的方法了！

①基礎(chǔ)接口-判斷當(dāng)前瀏覽器是否支持某些js接口

注意：
所有的JS接口只能在公眾號綁定的域名下調(diào)用，公眾號開發(fā)者需要先登錄微信公眾平臺進(jìn)入“公眾號設(shè)置”的“功能設(shè)置”里填寫“JS接口安全域名”。

wx.ready(function () {
 //1. 判斷當(dāng)前版本是否支持指定 JS 接口，支持批量判斷，只需要將需要判斷的接口放入到j(luò)sApiList中即可
 checkJsApifunction () {
 wx.checkJsApi({
  jsApiList: [
  'getNetworkType',
  'previewImage'
  ],
  success: function (res) {
  alert(JSON.stringify(res));
  }
 });
 };

②分享接口，這里包含：分享給朋友、分享到朋友圈、分享到qq、分享到微博、分享到qq空間(但是這里要提醒要注意不要有誘導(dǎo)分享等違規(guī)行為，對于誘導(dǎo)分享行為將永久回收公眾號接口權(quán)限)

 // 2. 分享接口
 // 2.1 監(jiān)聽“分享給朋友”，按鈕點(diǎn)擊、自定義分享內(nèi)容及分享結(jié)果接口
 onMenuShareAppMessagefunction () {
 wx.onMenuShareAppMessage({
  title: '菜鳥程序員成長之路！',
  desc: '關(guān)注java平臺開發(fā)，前后端框架技術(shù)，分享前后端開發(fā)資源，服務(wù)端教程技術(shù)，菜鳥程序員！',
  link: 'http://www.cuiyongzhi.com/',
  imgUrl: 'http://res.cuiyongzhi.com/2016/03/201603201591_339.png',
  trigger: function (res) {
  // 不要嘗試在trigger中使用ajax異步請求修改本次分享的內(nèi)容，因為客戶端分享操作是一個同步操作，這時候使用ajax的回包會還沒有返回
  alert('用戶點(diǎn)擊發(fā)送給朋友');
  },
  success: function (res) {
  alert('已分享');
  },
  cancel: function (res) {
  alert('已取消');
  },
  fail: function (res) {
  alert(JSON.stringify(res));
  }
 });
 alert('已注冊獲取“發(fā)送給朋友”狀態(tài)事件');
 };
 
 // 2.2 監(jiān)聽“分享到朋友圈”按鈕點(diǎn)擊、自定義分享內(nèi)容及分享結(jié)果接口
 onMenuShareTimelinefunction () {
 wx.onMenuShareTimeline({
  title: '菜鳥程序員成長之路！',
  link: 'http://www.cuiyongzhi.com/',
  imgUrl: 'http://res.cuiyongzhi.com/2016/03/201603201591_339.png',
  trigger: function (res) {
  // 不要嘗試在trigger中使用ajax異步請求修改本次分享的內(nèi)容，因為客戶端分享操作是一個同步操作，這時候使用ajax的回包會還沒有返回
  alert('用戶點(diǎn)擊分享到朋友圈');
  },
  success: function (res) {
  alert('已分享');
  },
  cancel: function (res) {
  alert('已取消');
  },
  fail: function (res) {
  alert(JSON.stringify(res));
  }
 });
 alert('已注冊獲取“分享到朋友圈”狀態(tài)事件');
 };
 
 // 2.3 監(jiān)聽“分享到QQ”按鈕點(diǎn)擊、自定義分享內(nèi)容及分享結(jié)果接口
 onMenuShareQQfunction () {
 wx.onMenuShareQQ({
  title: '菜鳥程序員成長之路！',
  desc: '關(guān)注java平臺開發(fā)，前后端框架技術(shù)，分享前后端開發(fā)資源，服務(wù)端教程技術(shù)，菜鳥程序員！',
  link: 'http://www.cuiyongzhi.com/',
  imgUrl: 'http://res.cuiyongzhi.com/2016/03/201603201591_339.png',
  trigger: function (res) {
  alert('用戶點(diǎn)擊分享到QQ');
  },
  complete: function (res) {
  alert(JSON.stringify(res));
  },
  success: function (res) {
  alert('已分享');
  },
  cancel: function (res) {
  alert('已取消');
  },
  fail: function (res) {
  alert(JSON.stringify(res));
  }
 });
 alert('已注冊獲取“分享到 QQ”狀態(tài)事件');
 };
 
 // 2.4 監(jiān)聽“分享到微博”按鈕點(diǎn)擊、自定義分享內(nèi)容及分享結(jié)果接口
 onMenuShareWeibofunction () {
 wx.onMenuShareWeibo({
  title: '菜鳥程序員成長之路！',
  desc: '關(guān)注java平臺開發(fā)，前后端框架技術(shù)，分享前后端開發(fā)資源，服務(wù)端教程技術(shù)，菜鳥程序員！',
  link: 'http://www.cuiyongzhi.com/',
  imgUrl: 'http://res.cuiyongzhi.com/2016/03/201603201591_339.png',
  trigger: function (res) {
  alert('用戶點(diǎn)擊分享到微博');
  },
  complete: function (res) {
  alert(JSON.stringify(res));
  },
  success: function (res) {
  alert('已分享');
  },
  cancel: function (res) {
  alert('已取消');
  },
  fail: function (res) {
  alert(JSON.stringify(res));
  }
 });
 alert('已注冊獲取“分享到微博”狀態(tài)事件');
 };
 
 // 2.5 監(jiān)聽“分享到QZone”按鈕點(diǎn)擊、自定義分享內(nèi)容及分享接口
 onMenuShareQZonefunction () {
 wx.onMenuShareQZone({
  title: '菜鳥程序員成長之路！',
  desc: '關(guān)注java平臺開發(fā)，前后端框架技術(shù)，分享前后端開發(fā)資源，服務(wù)端教程技術(shù)，菜鳥程序員！',
  link: 'http://www.cuiyongzhi.com/',
  imgUrl: 'http://res.cuiyongzhi.com/2016/03/201603201591_339.png',
  trigger: function (res) {
  alert('用戶點(diǎn)擊分享到QZone');
  },
  complete: function (res) {
  alert(JSON.stringify(res));
  },
  success: function (res) {
  alert('已分享');
  },
  cancel: function (res) {
  alert('已取消');
  },
  fail: function (res) {
  alert(JSON.stringify(res));
  }
 });
 alert('已注冊獲取“分享到QZone”狀態(tài)事件');
 };

③設(shè)備信息接口--這里是獲取設(shè)備網(wǎng)絡(luò)狀態(tài)，以防在頁面中存在視頻或者大流量文件播放的時候?qū)τ脩艚o出友好提示！

 // 3 設(shè)備信息接口
 // 3.1 獲取當(dāng)前網(wǎng)絡(luò)狀態(tài)
 getNetworkTypefunction () {
 wx.getNetworkType({
  success: function (res) {
  alert(res.networkType);
  var networkType = res.networkType; // 返回網(wǎng)絡(luò)類型2g，3g，4g，wifi
  if(networkType=='3g'){
   alert("您好，您的網(wǎng)絡(luò)狀態(tài)是3g網(wǎng)絡(luò)，這里將播放視頻文件會產(chǎn)生大流程!");
  }
  },
  fail: function (res) {
  alert(JSON.stringify(res));
  }
 });
 };

④地理位置接口，這里包含查看經(jīng)緯度對應(yīng)的地圖位置和獲取當(dāng)前位置的經(jīng)緯度，可用做地圖位置展示的第一步！

 // 4 地理位置接口
 // 4.1 查看地理位置
 openLocationfunction () {
 wx.openLocation({
  latitude: 23.099994,
  longitude: 113.324520,
  name: 'TIT 創(chuàng)意園',
  address: '廣州市海珠區(qū)新港中路 397 號',
  scale: 14,
  infoUrl: 'http://weixin.qq.com'
 });
 };
 
 // 4.2 獲取當(dāng)前地理位置
 getLocationfunction () {
 wx.getLocation({
  success: function (res) {
  alert(JSON.stringify(res));
  },
  cancel: function (res) {
  alert('用戶拒絕授權(quán)獲取地理位置');
  }
 });
 };

⑤界面操作接口，這里說的界面操作其實就是在微信瀏覽器中操作和改名的那右上角的【三個點(diǎn)】，對這里隱藏的菜單進(jìn)行操作和關(guān)閉微信瀏覽器！

 // 5 界面操作接口
 // 5.1 隱藏右上角菜單
 hideOptionMenufunction () {
 wx.hideOptionMenu();
 };
 
 // 5.2 顯示右上角菜單
 showOptionMenufunction () {
 wx.showOptionMenu();
 };
 
 // 5.3 批量隱藏菜單項
 hideMenuItemsfunction () {
 wx.hideMenuItems({
  menuList: [
  'menuItem:readMode', // 閱讀模式
  'menuItem:share:timeline', // 分享到朋友圈
  'menuItem:copyUrl' // 復(fù)制鏈接
  ],
  success: function (res) {
  alert('已隱藏“閱讀模式”，“分享到朋友圈”，“復(fù)制鏈接”等按鈕');
  },
  fail: function (res) {
  alert(JSON.stringify(res));
  }
 });
 };
 
 // 5.4 批量顯示菜單項
 showMenuItemsfunction () {
 wx.showMenuItems({
  menuList: [
  'menuItem:readMode', // 閱讀模式
  'menuItem:share:timeline', // 分享到朋友圈
  'menuItem:copyUrl' // 復(fù)制鏈接
  ],
  success: function (res) {
  alert('已顯示“閱讀模式”，“分享到朋友圈”，“復(fù)制鏈接”等按鈕');
  },
  fail: function (res) {
  alert(JSON.stringify(res));
  }
 });
 };
 
 // 5.5 隱藏所有非基本菜單項
 hideAllNonBaseMenuItemfunction () {
 wx.hideAllNonBaseMenuItem({
  success: function () {
  alert('已隱藏所有非基本菜單項');
  }
 });
 };
 
 // 5.6 顯示所有被隱藏的非基本菜單項
 showAllNonBaseMenuItemfunction () {
 wx.showAllNonBaseMenuItem({
  success: function () {
  alert('已顯示所有非基本菜單項');
  }
 });
 };
 
 // 5.7 關(guān)閉當(dāng)前窗口
 closeWindowfunction () {
 wx.closeWindow();
 };

⑥微信掃一掃接口，這個接口可以在頁面調(diào)用微信的掃一掃功能，其中參數(shù)needResult可以設(shè)置掃描之后的處理方式；

 // 6 微信原生接口
 wx.scanQRCode({
 needResult: 0, // 默認(rèn)為0，掃描結(jié)果由微信處理，1則直接返回掃描結(jié)果，
 scanType: ["qrCode","barCode"], // 可以指定掃二維碼還是一維碼，默認(rèn)二者都有
 success: function (res) {
 var result = res.resultStr; // 當(dāng)needResult 為 1 時，掃碼返回的結(jié)果
}
});

那么到這里微信JS-SDK方法實現(xiàn)中的簡答實現(xiàn)部分基本就講述完成了，后面將繼續(xù)為大家一篇篇帶來沒有講述的js方法實現(xiàn)，感謝你的翻閱，如有疑問可以留言一起討論！

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: