在前面的文章中有介紹到我們?cè)谖⑿?web 開(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)單截圖如下：

http://wiki.jikexueyuan.com/project/java-wechat/images/54.png" alt="" />

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

較易實(shí)現(xiàn)：基礎(chǔ)接口、分享接口、設(shè)備信息接口、地理位置接口、界面操作接口、微信掃一掃接口；

較難實(shí)現(xiàn)：圖像接口、音頻接口、智能接口、微信小店接口、微信卡券接口、微信支付接口；（注：這里說(shuō)較難是因?yàn)樾枰蠖撕捅镜匚募浜辖涌?，這些接口后面會(huì)一篇篇文章具體詳解）

在這里我們將講述所有較易實(shí)現(xiàn)的接口的具體實(shí)現(xiàn)方法，在文章 http://www.cuiyongzhi.com/index.php/post/57.html 中講述過(guò)了如何配置和引入需要的 js，通過(guò)這些配置之后我們就可以開(kāi)始使用 js 的方法了！

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

/*
 * 注意：
 *  所有的 JS 接口只能在公眾號(hào)綁定的域名下調(diào)用，公眾號(hào)開(kāi)發(fā)者需要先登錄微信公眾平臺(tái)進(jìn)入“公眾號(hào)設(shè)置”的“功能設(shè)置”里填寫“JS 接口安全域名”。
 */
wx.ready(function () {
  //1. 判斷當(dāng)前版本是否支持指定 JS 接口，支持批量判斷，只需要將需要判斷的接口放入到 jsApiList 中即可
 checkJsApifunction () {
    wx.checkJsApi({
      jsApiList: [
        'getNetworkType',
        'previewImage'
      ],
      success: function (res) {
        alert(JSON.stringify(res));
      }
    });
  };

2.分享接口，這里包含：分享給朋友、分享到朋友圈、分享到 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)事件');
  };

3.設(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ò)類型 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));
      }
    });
  };

4.地理位置接口，這里包含查看經(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)獲取地理位置');
      }
    });
  };

5.界面操作接口，這里說(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();
  };

6.微信掃一掃接口，這個(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)可以留言一起討論！

上一篇：微信開(kāi)發(fā)準(zhǔn)備(二)--springmvc+mybatis 項(xiàng)目結(jié)構(gòu)的搭建下一篇：微信開(kāi)發(fā)準(zhǔn)備(一)--Maven 倉(cāng)庫(kù)管理新建 WEB 項(xiàng)目