微信瀏覽器內置WeixinJSBridge API

微信瀏覽器內置WeixinJSBridge API

微信瀏覽器是個特殊的環境，它內置了一些jsAPI卻沒公佈出來，同時技術仍不成熟，部分接口在不一樣的環境下可能出現不能使用。

//加載完後執行，只在微信瀏覽內執行  
document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {  
    // 分享給微信好友 (點擊右上角發送給朋友時執行)  
    var wxData = {  
        "appId": "wx69d816f8fbc1066c", // 服務號能夠填寫appId  
        "imgUrl" : 'http://www.scscms.com/weixin/p_w_picpaths/1.jpg',  
        "link" : 'http://www.scscms.com',  
        "desc" : '分享內容描述',  
        "title" : "分享標題"  
    };  
    WeixinJSBridge.on('menu:share:appmessage', function (argv) {  
        WeixinJSBridge.invoke('sendAppMessage', {  
            "appid":wxData.appId,  
            "img_url":wxData.imgUrl,  
            "link":wxData.link,  
            "desc":wxData.desc,  
            "title":wxData.title,  
            "img_width":"120",  
            "img_height":"120"  
        }, function (resp) {  
            alert(resp.err_msg);  
            // send_app_msg:cancel 用戶取消  
            // send_app_msg:fail　發送失敗  
            // send_app_msg:confirm 發送成功  
        });  
    });  
});

點擊後彈出分享界面，同時可輸入評論。接收到分別是兩條信息，評論先顯示，而後顯示分享的組合。若是你的域名在白名單中還能夠直接執行sendAppMessage分享，不然提示access_denied錯誤。以下：

//分享給朋友  
function sendAppMessage(title,desc,link,imgUrl){  
    WeixinJSBridge.invoke('sendAppMessage',{  
        "appid":'',//必須是正常的appid或者留空  
        "img_url":imgUrl,  
        "link":link,  
        "desc": desc,  
        "title":title  
    });  
}

如下是分享到朋友圈代碼：

    //分享到朋友圈  
    function weixinShareTimeline(title,desc,link,imgUrl){  
        WeixinJSBridge.invoke('shareTimeline',{  
            "img_url":imgUrl,  
            "link":link,  
            "desc": desc,  
            "title":title  
        });  
    }  
    //點右上角菜單分享時  
    document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {  
        WeixinJSBridge.on('menu:share:timeline', function (argv) {  
            weixinShareTimeline(title,desc,link,imgUrl);  
        });  
    });

分享到騰訊微博代碼：

function shareWeibo(content, url) {  
    WeixinJSBridge.invoke('shareWeibo', {  
        "content":content, //評論  
        "url":url //標題與概要圖片在此自動獲取  
    }, function (res) {  
        alert(res.err_msg);  
        //share_weibo:ok 分享成功  
        //share_weibo:cancel 用戶取消  
        //share_weibo:fail 分享失敗  
    });  
}  
//點擊右上角菜單分享時共用數據  
document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {  
    WeixinJSBridge.on('menu:share:weibo', function (argv) {  
        shareWeibo(content, url);  
    })  
});

而針對微信瀏覽器右上角按鈕及底部工具欄是能夠隱藏或者顯示的。

WeixinJSBridge.call('showOptionMenu');//顯示網頁右上角的按鈕  
WeixinJSBridge.call('hideOptionMenu');//隱藏網頁右上角的按鈕  
WeixinJSBridge.call('showToolbar');//顯示底部工具欄  
WeixinJSBridge.call('hideToolbar');//隱藏底部工具欄

還有在連接URL後面配置上 #wechat_webview_type=1 用微信打開就會自動隱藏底部工具欄。解決部分人但願進去就沒有底部工具欄要求。

同時透露一個沒公開的API，關閉微信瀏覽器返回微信聊天界面：

WeixinJSBridge.call('closeWindow');

獲取用戶的網絡鏈接類型：

WeixinJSBridge.invoke('getNetworkType', {}, function (e) {  
    alert(e.err_msg);  
    /*network_type:wifi     wifi網絡 
     * network_type:edge     非wifi,包含3G/2G 
     * network_type:fail     網絡斷開鏈接 
     * network_type:wwan     2g或者3g 
     */  
});

獲取不一樣的連接傳不一樣的數據是很是有利的。好比在edge連接下就別給我整大圖片出來。若是是wifi模式下你纔可整個大大的漂亮的圖片出來，還能夠調用微信的看圖片API哦：

//微信原生看圖  
var pic_list=['http://www.scscms.com/weixin/p_w_picpaths/1.jpg','http://www.scscms.com/weixin/p_w_picpaths/2.jpg'];//圖片列表  
WeixinJSBridge.invoke('p_w_picpathPreview', {  
    'current' : pic_list[0],  
    'urls' : pic_list  
});

微信中回覆文本連接地址會自動識別爲連接地址而造成可點擊的連接，在開發模式下或網頁快速回復發送<a href="url">文本</a>或者<a href='url'>文本</a>可正常顯示連接，但若是沒加引號將不正常顯示，還有在web微信裏都不能正常顯示html。

Android平臺下則能夠經過<a href="weixin://contacts/profile/微信ID或微信號">的方式打開資料頁，以便快速關注；WinPhone下，則是經過<a href="weixin://profile/微信ID">的方式打開。或者用下面代碼來關注指定賬號：

//關注指定的微信號  
function weixinAddContact(name){  
    WeixinJSBridge.invoke("addContact", {webtype: "1",username: name}, function(e) {  
        WeixinJSBridge.log(e.err_msg);  
        //e.err_msg:add_contact:added 已經添加  
        //e.err_msg:add_contact:cancel 取消添加  
        //e.err_msg:add_contact:ok 添加成功  
        //e.err_msg:system:access_denied 拒絕訪問  
        if(e.err_msg == 'add_contact:added' || e.err_msg == 'add_contact:ok'){  
            //關注成功，或者已經關注過  
        }  
    })  
}

問題是這些接口可不平民隨即可以調用的，反正我經常獲得的結果就是system:access_denied