快捷導(dǎo)航

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

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

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

在前面的文章中有介紹到我們?cè)谖⑿舧eb開(kāi)發(fā)過(guò)程中常常用到的【微信JSSDK中Config配置】，但是我們?cè)谡嬲氖褂弥形覀儾粌H僅只是為了配置Config而已，而是要在我們的項(xiàng)目中真正去使用微信JS-SDK給我們帶來(lái)便捷，那么這里我們就簡(jiǎn)述如何在微信web開(kāi)發(fā)中使用必要的方法！微信的JS-SDk中為我們提供的方法很多，這里我有一個(gè)簡(jiǎn)單截圖如下：

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

較易實(shí)現(xiàn)：基礎(chǔ)接口、分享接口、設(shè)備信息接口、地理位置接口、界面操作接口、微信掃一掃接口；
較難實(shí)現(xiàn)：圖像接口、音頻接口、智能接口、微信小店接口、微信卡券接口、微信支付接口；（注：這里說(shuō)較難是因?yàn)樾枰蠖撕捅镜匚募浜辖涌冢@些接口后面會(huì)一篇篇文章具體詳解）
在這里我們將講述所有較易實(shí)現(xiàn)的接口的具體實(shí)現(xiàn)方法，在文章中講述過(guò)了如何配置和引入需要的js，通過(guò)這些配置之后我們就可以開(kāi)始使用js的方法了！

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

注意：
所有的JS接口只能在公眾號(hào)綁定的域名下調(diào)用，公眾號(hào)開(kāi)發(fā)者需要先登錄微信公眾平臺(tái)進(jìn)入“公眾號(hào)設(shè)置”的“功能設(shè)置”里填寫(xiě)“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ī)行為，對(duì)于誘導(dǎo)分享行為將永久回收公眾號(hào)接口權(quán)限)

 // 2. 分享接口
 // 2.1 監(jiān)聽(tīng)“分享給朋友”，按鈕點(diǎn)擊、自定義分享內(nèi)容及分享結(jié)果接口
 onMenuShareAppMessagefunction () {
 wx.onMenuShareAppMessage({
  title: '菜鳥(niǎo)程序員成長(zhǎng)之路！',
  desc: '關(guān)注java平臺(tái)開(kāi)發(fā)，前后端框架技術(shù)，分享前后端開(kāi)發(fā)資源，服務(wù)端教程技術(shù)，菜鳥(niǎo)程序員！',
  link: 'http://www.cuiyongzhi.com/',
  imgUrl: 'http://res.cuiyongzhi.com/2016/03/201603201591_339.png',
  trigger: function (res) {
  // 不要嘗試在trigger中使用ajax異步請(qǐng)求修改本次分享的內(nèi)容，因?yàn)榭蛻舳朔窒聿僮魇且粋€(gè)同步操作，這時(shí)候使用ajax的回包會(huì)還沒(méi)有返回
  alert('用戶點(diǎn)擊發(fā)送給朋友');
  },
  success: function (res) {
  alert('已分享');
  },
  cancel: function (res) {
  alert('已取消');
  },
  fail: function (res) {
  alert(JSON.stringify(res));
  }
 });
 alert('已注冊(cè)獲取“發(fā)送給朋友”狀態(tài)事件');
 };
 
 // 2.2 監(jiān)聽(tīng)“分享到朋友圈”按鈕點(diǎn)擊、自定義分享內(nèi)容及分享結(jié)果接口
 onMenuShareTimelinefunction () {
 wx.onMenuShareTimeline({
  title: '菜鳥(niǎo)程序員成長(zhǎng)之路！',
  link: 'http://www.cuiyongzhi.com/',
  imgUrl: 'http://res.cuiyongzhi.com/2016/03/201603201591_339.png',
  trigger: function (res) {
  // 不要嘗試在trigger中使用ajax異步請(qǐng)求修改本次分享的內(nèi)容，因?yàn)榭蛻舳朔窒聿僮魇且粋€(gè)同步操作，這時(shí)候使用ajax的回包會(huì)還沒(méi)有返回
  alert('用戶點(diǎn)擊分享到朋友圈');
  },
  success: function (res) {
  alert('已分享');
  },
  cancel: function (res) {
  alert('已取消');
  },
  fail: function (res) {
  alert(JSON.stringify(res));
  }
 });
 alert('已注冊(cè)獲取“分享到朋友圈”狀態(tài)事件');
 };
 
 // 2.3 監(jiān)聽(tīng)“分享到QQ”按鈕點(diǎn)擊、自定義分享內(nèi)容及分享結(jié)果接口
 onMenuShareQQfunction () {
 wx.onMenuShareQQ({
  title: '菜鳥(niǎo)程序員成長(zhǎng)之路！',
  desc: '關(guān)注java平臺(tái)開(kāi)發(fā)，前后端框架技術(shù)，分享前后端開(kāi)發(fā)資源，服務(wù)端教程技術(shù)，菜鳥(niǎo)程序員！',
  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('已注冊(cè)獲取“分享到 QQ”狀態(tài)事件');
 };
 
 // 2.4 監(jiān)聽(tīng)“分享到微博”按鈕點(diǎn)擊、自定義分享內(nèi)容及分享結(jié)果接口
 onMenuShareWeibofunction () {
 wx.onMenuShareWeibo({
  title: '菜鳥(niǎo)程序員成長(zhǎng)之路！',
  desc: '關(guān)注java平臺(tái)開(kāi)發(fā)，前后端框架技術(shù)，分享前后端開(kāi)發(fā)資源，服務(wù)端教程技術(shù)，菜鳥(niǎo)程序員！',
  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('已注冊(cè)獲取“分享到微博”狀態(tài)事件');
 };
 
 // 2.5 監(jiān)聽(tīng)“分享到QZone”按鈕點(diǎn)擊、自定義分享內(nèi)容及分享接口
 onMenuShareQZonefunction () {
 wx.onMenuShareQZone({
  title: '菜鳥(niǎo)程序員成長(zhǎng)之路！',
  desc: '關(guān)注java平臺(tái)開(kāi)發(fā)，前后端框架技術(shù)，分享前后端開(kāi)發(fā)資源，服務(wù)端教程技術(shù)，菜鳥(niǎo)程序員！',
  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('已注冊(cè)獲取“分享到QZone”狀態(tài)事件');
 };

③設(shè)備信息接口--這里是獲取設(shè)備網(wǎng)絡(luò)狀態(tài)，以防在頁(yè)面中存在視頻或者大流量文件播放的時(shí)候?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ò)類(lèi)型2g，3g，4g，wifi
  if(networkType=='3g'){
   alert("您好，您的網(wǎng)絡(luò)狀態(tài)是3g網(wǎng)絡(luò)，這里將播放視頻文件會(huì)產(chǎn)生大流程!");
  }
  },
  fail: function (res) {
  alert(JSON.stringify(res));
  }
 });
 };

④地理位置接口，這里包含查看經(jīng)緯度對(duì)應(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 號(hào)',
  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)獲取地理位置');
  }
 });
 };

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

 // 5 界面操作接口
 // 5.1 隱藏右上角菜單
 hideOptionMenufunction () {
 wx.hideOptionMenu();
 };
 
 // 5.2 顯示右上角菜單
 showOptionMenufunction () {
 wx.showOptionMenu();
 };
 
 // 5.3 批量隱藏菜單項(xiàng)
 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 批量顯示菜單項(xiàng)
 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 隱藏所有非基本菜單項(xiàng)
 hideAllNonBaseMenuItemfunction () {
 wx.hideAllNonBaseMenuItem({
  success: function () {
  alert('已隱藏所有非基本菜單項(xiàng)');
  }
 });
 };
 
 // 5.6 顯示所有被隱藏的非基本菜單項(xiàng)
 showAllNonBaseMenuItemfunction () {
 wx.showAllNonBaseMenuItem({
  success: function () {
  alert('已顯示所有非基本菜單項(xiàng)');
  }
 });
 };
 
 // 5.7 關(guān)閉當(dāng)前窗口
 closeWindowfunction () {
 wx.closeWindow();
 };

⑥微信掃一掃接口，這個(gè)接口可以在頁(yè)面調(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 時(shí)，掃碼返回的結(jié)果
}
});

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

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

您可能感興趣的文章: