在前面的文章中有介紹到我們在微信web開發過程中常常用到的 【微信JSSDK中Config配置】 ，但是我們在真正的使用中我們不僅僅只是為了配置Config而已，而是要在我們的項目中真正去使用微信JS-SDK給我們帶來便捷，那么這里我們就簡述如何在微信web開發中使用必要的方法！微信的JS-SDk中為我們提供的方法很多，這里我有一個簡單截圖如下：
在上圖的提供的所有口中我們可以按照接口實現的難易程度分成兩個部分：
較易實現：基礎接口、分享接口、設備信息接口、地理位置接口、界面操作接口、微信掃一掃接口；
較難實現：圖像接口、音頻接口、智能接口、微信小店接口、微信卡券接口、微信支付接口；（注：這里說較難是因為需要后端和本地文件配合接口，這些接口后面會一篇篇文章具體詳解）
在這里我們將講述所有較易實現的接口的具體實現方法，在文章中講述過了如何配置和引入需要的js，通過這些配置之后我們就可以開始使用js的方法了！
①基礎接口-判斷當前瀏覽器是否支持某些js接口
注意：
所有的JS接口只能在公眾號綁定的域名下調用，公眾號開發者需要先登錄微信公眾平臺進入“公眾號設置”的“功能設置”里填寫“JS接口安全域名”。
wx.ready(function () {
//1. 判斷當前版本是否支持指定 JS 接口，支持批量判斷，只需要將需要判斷的接口放入到jsApiList中即可
checkJsApifunction () {
wx.checkJsApi({
jsApiList: [
'getNetworkType',
'previewImage'
],
success: function (res) {
alert(JSON.stringify(res));
}
});
};
②分享接口，這里包含：分享給朋友、分享到朋友圈、分享到qq、分享到微博、分享到qq空間(但是這里要提醒要注意不要有誘導分享等違規行為，對于誘導分享行為將永久回收公眾號接口權限)
// 2. 分享接口
// 2.1 監聽“分享給朋友”，按鈕點擊、自定義分享內容及分享結果接口
onMenuShareAppMessagefunction () {
wx.onMenuShareAppMessage({
title: '菜鳥程序員成長之路！',
desc: '關注java平臺開發，前后端框架技術，分享前后端開發資源，服務端教程技術，菜鳥程序員！',
link: 'http://www.cuiyongzhi.com/',
imgUrl: 'http://res.cuiyongzhi.com/2016/03/201603201591_339.png',
trigger: function (res) {
// 不要嘗試在trigger中使用ajax異步請求修改本次分享的內容，因為客戶端分享操作是一個同步操作，這時候使用ajax的回包會還沒有返回
alert('用戶點擊發送給朋友');
},
success: function (res) {
alert('已分享');
},
cancel: function (res) {
alert('已取消');
},
fail: function (res) {
alert(JSON.stringify(res));
}
});
alert('已注冊獲取“發送給朋友”狀態事件');
};
// 2.2 監聽“分享到朋友圈”按鈕點擊、自定義分享內容及分享結果接口
onMenuShareTimelinefunction () {
wx.onMenuShareTimeline({
title: '菜鳥程序員成長之路！',
link: 'http://www.cuiyongzhi.com/',
imgUrl: 'http://res.cuiyongzhi.com/2016/03/201603201591_339.png',
trigger: function (res) {
// 不要嘗試在trigger中使用ajax異步請求修改本次分享的內容，因為客戶端分享操作是一個同步操作，這時候使用ajax的回包會還沒有返回
alert('用戶點擊分享到朋友圈');
},
success: function (res) {
alert('已分享');
},
cancel: function (res) {
alert('已取消');
},
fail: function (res) {
alert(JSON.stringify(res));
}
});
alert('已注冊獲取“分享到朋友圈”狀態事件');
};
// 2.3 監聽“分享到QQ”按鈕點擊、自定義分享內容及分享結果接口
onMenuShareQQfunction () {
wx.onMenuShareQQ({
title: '菜鳥程序員成長之路！',
desc: '關注java平臺開發，前后端框架技術，分享前后端開發資源，服務端教程技術，菜鳥程序員！',
link: 'http://www.cuiyongzhi.com/',
imgUrl: 'http://res.cuiyongzhi.com/2016/03/201603201591_339.png',
trigger: function (res) {
alert('用戶點擊分享到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”狀態事件');
};
// 2.4 監聽“分享到微博”按鈕點擊、自定義分享內容及分享結果接口
onMenuShareWeibofunction () {
wx.onMenuShareWeibo({
title: '菜鳥程序員成長之路！',
desc: '關注java平臺開發，前后端框架技術，分享前后端開發資源，服務端教程技術，菜鳥程序員！',
link: 'http://www.cuiyongzhi.com/',
imgUrl: 'http://res.cuiyongzhi.com/2016/03/201603201591_339.png',
trigger: function (res) {
alert('用戶點擊分享到微博');
},
complete: function (res) {
alert(JSON.stringify(res));
},
success: function (res) {
alert('已分享');
},
cancel: function (res) {
alert('已取消');
},
fail: function (res) {
alert(JSON.stringify(res));
}
});
alert('已注冊獲取“分享到微博”狀態事件');
};
// 2.5 監聽“分享到QZone”按鈕點擊、自定義分享內容及分享接口
onMenuShareQZonefunction () {
wx.onMenuShareQZone({
title: '菜鳥程序員成長之路！',
desc: '關注java平臺開發，前后端框架技術，分享前后端開發資源，服務端教程技術，菜鳥程序員！',
link: 'http://www.cuiyongzhi.com/',
imgUrl: 'http://res.cuiyongzhi.com/2016/03/201603201591_339.png',
trigger: function (res) {
alert('用戶點擊分享到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”狀態事件');
};
③設備信息接口--這里是獲取設備網絡狀態，以防在頁面中存在視頻或者大流量文件播放的時候對用戶給出友好提示！
// 3 設備信息接口
// 3.1 獲取當前網絡狀態
getNetworkTypefunction () {
wx.getNetworkType({
success: function (res) {
alert(res.networkType);
var networkType = res.networkType; // 返回網絡類型2g，3g，4g，wifi
if(networkType=='3g'){
alert("您好，您的網絡狀態是3g網絡，這里將播放視頻文件會產生大流程!");
}
},
fail: function (res) {
alert(JSON.stringify(res));
}
});
};
④地理位置接口，這里包含查看經緯度對應的地圖位置和獲取當前位置的經緯度，可用做地圖位置展示的第一步！
// 4 地理位置接口
// 4.1 查看地理位置
openLocationfunction () {
wx.openLocation({
latitude: 23.099994,
longitude: 113.324520,
name: 'TIT 創意園',
address: '廣州市海珠區新港中路 397 號',
scale: 14,
infoUrl: 'http://weixin.qq.com'
});
};
// 4.2 獲取當前地理位置
getLocationfunction () {
wx.getLocation({
success: function (res) {
alert(JSON.stringify(res));
},
cancel: function (res) {
alert('用戶拒絕授權獲取地理位置');
}
});
};
⑤界面操作接口，這里說的界面操作其實就是在微信瀏覽器中操作和改名的那右上角的【三個點】，對這里隱藏的菜單進行操作和關閉微信瀏覽器！
// 5 界面操作接口
// 5.1 隱藏右上角菜單
hideOptionMenufunction () {
wx.hideOptionMenu();
};
// 5.2 顯示右上角菜單
showOptionMenufunction () {
wx.showOptionMenu();
};
// 5.3 批量隱藏菜單項
hideMenuItemsfunction () {
wx.hideMenuItems({
menuList: [
'menuItem:readMode', // 閱讀模式
'menuItem:share:timeline', // 分享到朋友圈
'menuItem:copyUrl' // 復制鏈接
],
success: function (res) {
alert('已隱藏“閱讀模式”，“分享到朋友圈”，“復制鏈接”等按鈕');
},
fail: function (res) {
alert(JSON.stringify(res));
}
});
};
// 5.4 批量顯示菜單項
showMenuItemsfunction () {
wx.showMenuItems({
menuList: [
'menuItem:readMode', // 閱讀模式
'menuItem:share:timeline', // 分享到朋友圈
'menuItem:copyUrl' // 復制鏈接
],
success: function (res) {
alert('已顯示“閱讀模式”，“分享到朋友圈”，“復制鏈接”等按鈕');
},
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 關閉當前窗口
closeWindowfunction () {
wx.closeWindow();
};
⑥微信掃一掃接口，這個接口可以在頁面調用微信的掃一掃功能，其中參數needResult可以設置掃描之后的處理方式；
// 6 微信原生接口
wx.scanQRCode({
needResult: 0, // 默認為0，掃描結果由微信處理，1則直接返回掃描結果，
scanType: ["qrCode","barCode"], // 可以指定掃二維碼還是一維碼，默認二者都有
success: function (res) {
var result = res.resultStr; // 當needResult 為 1 時，掃碼返回的結果
}
});
那么到這里微信JS-SDK方法實現中的簡答實現部分基本就講述完成了，后面將繼續為大家一篇篇帶來沒有講述的js方法實現，感謝你的翻閱，如有疑問可以留言一起討論！
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
