在前面的文章中有介紹到我們?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)可以留言一起討論!