微信分享（微信內建瀏覽器）
轉自：https://blog.csdn.net/kobe088124/article/details/54097593
/**!
* 微信內建瀏覽器的Javascript API，功能包括：
*
* 1、分享到微信朋友圈
* 2、分享給微信好友
* 3、分享到騰訊微博
* 4、隱藏/顯示右上角的選單入口
* 5、隱藏/顯示底部瀏覽器工具欄
* 6、獲取當前的網路狀態
* 7、調起微信客戶端的圖片播放元件
*
* @author zhaoxianlie(http://www.baidufe.com)
*/
var
WeixinApi = (
function
() {
/* 這裡省略了一堆程式碼……下面直接看呼叫介面 */
return
{
ready :wxJsBridgeReady,
shareToTimeline :weixinShareTimeline,
shareToWeibo :weixinShareWeibo,
shareToFriend :weixinSendAppMessage,
showOptionMenu :showOptionMenu,
hideOptionMenu :hideOptionMenu,
showToolbar :showToolbar,
hideToolbar :hideToolbar,
getNetworkType :getNetworkType,
imagePreview :imagePreview
};
});
1、假如我希望一開啟網頁後，就隱藏掉右上角的PopUp選單入口，並且隱藏掉瀏覽器下方的工具欄，同時還要獲得當前的網路狀態，那麼，我們的程式碼可以這樣來寫：
// 所有功能必須包含在 WeixinApi.ready 中進行
WeixinApi.ready(
function
(Api){
// 隱藏右上角popup選單入口
Api.hideOptionMenu();
// 隱藏瀏覽器下方的工具欄
Api.hideToolbar();
// 獲取網路狀態
Api.getNetworkType(
function
(network){
// 拿到 network 以後，做任何你想做的事
});
});
|
如示例程式碼中的註釋所示，所有的功能執行必須放在 WeixinApi.ready 方法中執行，就好比你用jQuery的時候，通常都需要使用 jQuery(document).ready(function(){ }) 一樣。為什麼要這樣做？相信不用我解釋大家都能明白，因為我們必須要保證在執行這些方法的時候，WeixinJsBridge API已經被加入到WebView上了！
2、再來看一個有關分享的例子，假如使用者在閱讀我的文章（或在使用我的產品）的過程中，發現它很有意思或有價值，一般都會將其收藏或分享（給好友、朋友圈、微博等）出去，那現在我就希望能監測到使用者的分享行為，比如：自定義使用者可分享的內容、甚至是在使用者分享之、分享被取消、分享失敗、分享成功、以及整個分享操作過程結束，我們都去做點兒什麼。那麼，這個程式碼我們可以這樣來寫：
// 所有功能必須包含在 WeixinApi.ready 中進行
WeixinApi.ready(
function
(Api){
// 微信分享的資料
var
wxData = {
"imgUrl"
:
'http://www.baidufe.com/fe/blog/static/img/weixin-qrcode-2.jpg'
,
"link"
:
'http://www.baidufe.com'
,
"desc"
:
'大家好，我是Alien，Web前端&Android客戶端碼農，喜歡技術上的瞎倒騰！歡迎多交流'
,
"title"
:
"大家好，我是趙先烈"
};
// 分享的回撥
var
wxCallbacks = {
// 分享操作開始之前
ready:
function
() {
// 你可以在這裡對分享的資料進行重組
},
// 分享被使用者自動取消
cancel:
function
(resp) {
// 你可以在你的頁面上給使用者一個小Tip，為什麼要取消呢？
},
// 分享失敗了
fail:
function
(resp) {
// 分享失敗了，是不是可以告訴使用者：不要緊，可能是網路問題，一會兒再試試？
},
// 分享成功
confirm:
function
(resp) {
// 分享成功了，我們是不是可以做一些分享統計呢？
},
// 整個分享過程結束
all:
function
(resp) {
// 如果你做的是一個鼓勵使用者進行分享的產品，在這裡是不是可以給使用者一些反饋了？
}
};
// 使用者點開右上角popup選單後，點選分享給好友，會執行下面這個程式碼
Api.shareToFriend(wxData, wxCallbacks);
// 點選分享到朋友圈，會執行下面這個程式碼
Api.shareToTimeline(wxData, wxCallbacks);
// 點選分享到騰訊微博，會執行下面這個程式碼
Api.shareToWeibo(wxData, wxCallbacks);
});
|
3、當然，如果你的業務需求相當複雜，比如，你的產品就是一個微信網頁遊戲（類似“2048數字遊戲微信版”），你希望使用者分享出去的資料是一個網頁截圖、或者需要將使用者當前的遊戲狀態回傳到伺服器動態生成可分享的內容；那麼這種情況我們又該怎麼做呢？來看下面這個示例程式碼吧：
// 所有功能必須包含在 WeixinApi.ready 中進行
WeixinApi.ready(
function
(Api){
// 分享的回撥
var
wxCallbacks = {
// 分享過程需要非同步執行
async :
true
,
// 分享操作開始之前
ready:
function
() {
var
self =
this
;
// 假設你需要在這裡發一個 ajax 請求去獲取分享資料
$.post(yourServerUrl,yourPostData,
function
(responseData){
// 可以解析reponseData得到wxData
var
wxData = responseData;
// 呼叫dataLoaded方法，會自動觸發分享操作
// 注意，當且僅當 async為true時，wxCallbacks.dataLoaded才會被初始化，並呼叫
self.dataLoaded(wxData);
});
}
/* cancel、fail、confirm、all 方法同示例2，此處略掉 */
};
// 使用者點開右上角popup選單後，點選分享給好友，會執行下面這個程式碼
Api.shareToFriend({}, wxCallbacks);
});
|
唯一的區別就是在wxCallbacks中，增加了配置項async為true，表示這個分享過程是非同步呼叫的，其實就是指的ready方法非同步執行，在這種情況下，我們需要在ready方法中顯式地呼叫wxCallbacks的dataLoaded方法，以保證分享過程能繼續往下執行。也許你會發現，這個wxCallbacks中，根本就沒有配置dataLoaded方法啊！是的，當async為true時，WeixinApi中我會自動對其進行初始化，dataLoaded方法需要一個引數，表示需要分享出去的資料！
4、當然，如果你非要去配置dataLoaded方法，也是沒有問題的，你的配置也會被執行，不會被覆蓋，執行順序是：使用者配置優先。
上面是直接給出使用方法，也許你現在開始關心每個方法的引數列表是什麼樣的了？我們以分享到朋友圈的方法為例，來看看引數都有哪些配置項：
/**
* 分享到微信朋友圈
* @param {Object} data 待分享的資訊
* @p-config {String} appId 公眾平臺的appId（服務號可用）
* @p-config {String} imageUrl 圖片地址
* @p-config {String} link 連結地址
* @p-config {String} desc 描述
* @p-config {String} title 分享的標題
*
* @param {Object} callbacks 相關回調方法
* @p-config {Boolean} async ready方法是否需要非同步執行，預設false
* @p-config {Function} ready(argv) 就緒狀態
* @p-config {Function} dataLoaded(data) 資料載入完成後呼叫，async為true時有用
* @p-config {Function} cancel(resp) 取消
* @p-config {Function} fail(resp) 失敗
* @p-config {Function} confirm(resp) 成功
* @p-config {Function} all(resp) 無論成功失敗都會執行的回撥
*/
WeixinApi.shareToTimeline(data,callbacks);
|
分享給微信好友以及分享到騰訊微博的引數列表都一樣，這裡就不羅列了。
5、如果你的文章中有很多圖片，那麼，點選圖片直接調起微信客戶端自帶的圖片播放元件，那必然是一件好事；對此，你可以這樣來做：
// 調起微信客戶端的圖片播放元件進行播放
WeixinApi.ready(
function
(Api){
var
srcList = [];
$.each($(
'img'
),
function
(i,item){
if
(item.src) {
srcList.push(item.src);
$(item).click(
function
(e){
// 通過這個API就能直接調起微信客戶端的圖片播放元件了
Api.imagePreview(
this
.src,srcList);
});
}
});
});
|
就這麼一段兒簡單的程式碼，一切都搞定了！不過，需要指出的是，Api.imagePreview的引數是會進行強檢測的：
/**
* 調起微信Native的圖片播放元件。
* 這裡必須對引數進行強檢測，如果引數不合法，直接會導致微信客戶端crash
*
* @param {String} curSrc 當前播放的圖片地址
* @param {Array} srcList 圖片地址列表
*/
function
imagePreview(curSrc,srcList) ;
需要指出的是，微信公眾平臺對Android、iOS平臺支援力度不統一，比較費勁，具體有：
iOS平臺下，分享出去的資料wxData中，imageUrl可以是DataURI格式的；但在Android平臺下，必須是全路徑的圖片地址
iOS平臺下，分享的回撥callback基本全都可以得到執行；但在Android平臺下，分享到微信朋友圈的callback無法得到執行（ready方法除外）
iOS平臺下，無法在非mp.weixin.qq.com域下的頁面中通過WeixinJSBridge.invoke('profile')的方式開啟某微訊號的資料頁面；Android平臺下則可以通過<a href="weixin://contacts/profile/微信ID">的方式開啟資料頁；WinPhone下，則是通過<a href="weixin://profile/微信ID">的方式開啟。
-