摘錄自別人的博客：
第一篇：微信內置瀏覽器的JsAPI(WeixinJSBridge續)
之前有寫過幾篇關於微信內置瀏覽器（WebView）中特有的Javascript API（Javascript Interface）的文章，不過隨着微信官方的調整，部分API已經不能直接使用，比如類似直接分享到朋友圈 WeixinJSBridge.invoke('shareTimeline',data,callback) 這樣的功能，直接調用，會得到一個訪問拒絕的response。后來重新調研了下，整理出來了一個WeixinAPI的Javascript類庫，分享出來，如果你對微信公眾平台開發感興趣，應該對你有用。
/**!
* 微信內置瀏覽器的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
};
});
|
下面，我們先來看一下這些API都應該怎么使用，先從最簡單的入手。
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">的方式打開。
期待官方能早日實現各平台API的統一吧！！！
至於API內部是怎么實現的，如果感興趣，那就看源碼吧，使用過程中如遇到什么Bug，請來這里反饋。
為了便於Api的維護與共享，已將其放到Github上了，大家這里走起：https://github.com/zxlie/WeixinApi
第二篇 微信內置JsAPI之WeixinJSBridge
在微信上，通過公眾平台推送給用戶的文章，是在微信內部直接打開的，用的無外乎就是一個UIWebView控件（IOS上，Android上也差不多）。但特殊的是，微信官方在這里面加了一個默認的Js API--WeixinJSBridge，通過它，能直接在該頁面上做這些操作：
1、將文章分享到微信朋友圈
2、將文章直接發送給微信上的好友
3、將文章分享到騰訊微博
4、關注指定用戶
以上這些操作，都是通過WeixinJSBridge.invoke接口來完成的，那么，這個WeixinJSBridge對象還有沒有提供一些別的方法可以讓我們來使用的？於是，我做了這么個測試，用來提取WeixinJSBridge對象中的其他接口：http://www.baidufe.com/demo/weixinjsapi.html 請用微信打開該網址，怕輸入麻煩的話，可以掃描如下二維碼：
如果你也是一個技術控，那就把下面這段兒代碼拿過去，自己玩兒吧：
/**
* 檢測微信JsAPI
* @param callback
*/
function
detectWeixinApi(callback){
if
(
typeof
window.WeixinJSBridge ==
'undefined'
||
typeof
window.WeixinJSBridge.invoke ==
'undefined'
){
setTimeout(
function
(){
detectWeixinApi(callback);
},200);
}
else
{
callback();
}
}
detectWeixinApi(
function
(){
var
html = [];
for
(
var
key
in
window.WeixinJSBridge) {
var
js =
'WeixinJSBridge.'
+ key +
' = '
+ window.WeixinJSBridge[key].toString();
js = js_beautify(js);
// 美化一下，看着舒服些
html.push(
'<pre class="brush:js;toolbar:false;">'
+ js +
'</pre>'
)
}
document.getElementById(
'WeixinJsApi'
).innerHTML = html.join(
''
);
// 代碼高亮
SyntaxHighlighter.highlight();
});
|
內容更新：
-----------------------------
比較多網友都在咨詢這個微信內置API，在這里更新一下文章吧：這個Api大部分接口都被官方限制使用了，具體原因無外乎是為了安全、為了盈利！如果你也還在尋找這個接口的使用方法，估計也沒有什么好的辦法了。
另外，如果你是在做微信公眾平台的話，我還寫了另外一篇關於這個WeixinJSBridge API的文章，里面有幾個API是官方提供的，穩定可用，鏈接：http://www.baidufe.com/item/c4bacb3bd66930f2e43e.html ，希望對你有用。
內容更新：2014
-----------------------------
在Android版本的微信環境中，依然可以通過如下兩種方式進行微信（公眾）號的推廣：
1、<a href="weixin://contacts/profile/微信號原始ID（如：gh_dd4b2c2ada8b）">Baidufe</a>
這種方法能直接打開該號的微信資料頁，直接關注；但獲取原始ID比較麻煩。
2、<a href="weixin://contacts/profile/微信號（如：www_baidufe_com）">Baidufe</a>
這種方法會打開“加入到通訊錄”的界面，然后再是資料頁
第三篇：微信WeixinJSBridge API續
之前寫了一篇關於這個WeixinJSBridge API的文章，文章地址 ，於是有很多網友都在過來咨詢這個API的使用，在這里有必要跟大家再說一下：這個API在以前公布的部分接口被官方和諧掉很久了， 比如一鍵關注、分享給好友、分享到朋友圈等。當然，你可能會發現微信官方推送的一些文章還能使用這些功能，粗略估計，官方是對這個API增加了白名單控制，判斷Referer，如果是微信官方的地址、或者是有合作的商家地址，則允許調用，否則，返回“access denied”！
截止目前，筆者還沒用發現還有什么辦法能繼續使用它！不過，官方和諧掉這個API其實也是說得過去的，因為在整個WebView的右上角，官方做了一個Navtive的按鈕，點開以后，包括分享給好友、分享到朋友圈這樣的功能都有，所以，官方也是在做一些引導。
當然，WeixinJSBridge這個API也並不是所有功能都被和諧掉了，相反，有好幾個功能還是相當有用的，可以正常使用，比如：
1、隱藏微信網頁右上角的按鈕（...按鈕）：開發者可以用這個功能來禁止當前頁面被分享
2、隱藏微信網頁底部的導航欄（比如前進后退和刷新）：這個導航欄會占用一定的區域，開發者可以認為用戶不會用到它，將其隱藏掉
3、在微信網頁中獲取用戶的網絡狀態：開發者可以利用這個API獲得用戶的網絡狀態，並提供不同的服務，比如視頻類，在wifi下提供高清視頻流，在2g網絡下提供普通清晰視頻流等等
下面分別通過簡單的幾行代碼，說明這幾個API的用法：
1、隱藏微信網頁右上角的按鈕
document.addEventListener(
'WeixinJSBridgeReady'
,
function
onBridgeReady() {
// 通過下面這個API隱藏右上角按鈕
WeixinJSBridge.call(
'hideOptionMenu'
);
});
document.addEventListener(
'WeixinJSBridgeReady'
,
function
onBridgeReady() {
// 通過下面這個API顯示右上角按鈕
WeixinJSBridge.call(
'showOptionMenu'
);
});
|
2、隱藏微信網頁底部的導航欄
document.addEventListener(
'WeixinJSBridgeReady'
,
function
onBridgeReady() {
// 通過下面這個API隱藏底部導航欄
WeixinJSBridge.call(
'hideToolbar'
);
});
document.addEventListener(
'WeixinJSBridgeReady'
,
function
onBridgeReady() {
// 通過下面這個API顯示底部導航欄
WeixinJSBridge.call(
'showToolbar'
);
});
|
3、在微信網頁中獲取用戶的網絡狀態
WeixinJSBridge.invoke(
'getNetworkType'
,{},
function
(e){
// 在這里拿到e.err_msg，這里面就包含了所有的網絡類型
alert(e.err_msg);
});
|
e.err_msg的取值如下所示：
network_type:wifi wifi網絡 network_type:edge 非wifi,包含3G/2G network_type:fail 網絡斷開連接 network_type:wwan 2g或者3g
可以戳這個鏈接測試一下：http://www.baidufe.com/demo/wxjsapi2.html
或者直接用微信掃描下面這個二維碼：
以上！分享給需要用到的網友。
轉自：http://www.cnblogs.com/gxg2008540/p/weixinjs.html