Java微信公眾平臺開發(十五)--微信JSSDK的使用
阿新 • • 發佈：2019-01-11
轉自：http://www.cuiyongzhi.com/post/63.html
在前面的文章中有介紹到我們在微信web開發過程中常常用到的 【微信JSSDK中Config配置】 ，但是我們在真正的使用中我們不僅僅只是為了配置Config而已，而是要在我們的專案中真正去使用微信JS-SDK給我們帶來便捷，那麼這裡我們就簡述如何在微信web開發中使用必要的方法！微信的JS-SDk中為我們提供的方法很多，這裡我有一個簡單截圖如下：
在上圖的提供的所有口中我們可以按照介面實現的難易程度分成兩個部分：
-
較易實現：基礎介面、分享介面、裝置資訊介面、地理位置介面、介面操作介面、微信掃一掃介面；
-
較難實現：影象介面、音訊介面、智慧介面、微信小店介面、微信卡券介面、微信支付介面；（注：這裡說較難是因為需要後端和本地檔案配合介面，這些介面後面會一篇篇文章具體詳解）
在這裡我們將講述所有較易實現的介面的具體實現方法，在文章 http://www.cuiyongzhi.com/index.php/post/57.html 中講述過了如何配置和引入需要的js，通過這些配置之後我們就可以開始使用js的方法了！
①基礎介面-判斷當前瀏覽器是否支援某些js介面
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
/*
* 注意：
* 所有的JS介面只能在公眾號繫結的域名下呼叫，公眾號開發者需要先登入微信公眾平臺進入“公眾號設定”的“功能設定”裡填寫“JS介面安全域名”。
*/
wx.ready(
function() {
//1. 判斷當前版本是否支援指定 JS 介面，支援批量判斷，只需要將需要判斷的介面放入到jsApiList中即可
checkJsApifunction () {
wx.checkJsApi({
jsApiList: [
'getNetworkType'
,
'previewImage'
],
success:
function
(res) {
alert(JSON.stringify(res));
}
});
};
|
②分享介面，這裡包含：分享給朋友、分享到朋友圈、分享到qq、分享到微博、分享到qq空間(但是這裡要提醒要注意不要有誘導分享等違規行為，對於誘導分享行為將永久回收公眾號介面許可權)
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 |
// 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”狀態事件'
);
};
|
③裝置資訊介面--這裡是獲取裝置網路狀態，以防在頁面中存在視訊或者大流量檔案播放的時候對使用者給出友好提示！
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
// 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));
}
});
};
|
④地理位置介面，這裡包含檢視經緯度對應的地圖位置和獲取當前位置的經緯度，可用做地圖位置展示的第一步！
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
// 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(
'使用者拒絕授權獲取地理位置'
);
}
});
};
|
⑤介面操作介面，這裡說的介面操作其實就是在微信瀏覽器中操作和改名的那右上角的【三個點】，對這裡隱藏的選單進行操作和關閉微信瀏覽器！
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 | < |