傳說中的WeixinJSBridge和微信rest接口

直接上圖，金山的APP“微信導航”，從界面上看有粉絲數等關鍵數據，實現了直接關注功能，莫不是rest接口？這江湖是大佬們的江湖，小嘍啰只有眼饞的份咯。

很早就聽說過WeixinJSBridge，不過官方貌似不提倡，先曬曬學習筆記

【Pockey】編輯整理

1. //通過關注微信好友   
   
2. function WeiXinAddContact(wxid, cb)   
   
3. {   
   
4.     if (typeof WeixinJSBridge == 'undefined') return false;   
   
5.         WeixinJSBridge.invoke('addContact', {   
   
6.             webtype: '1',   
   
7.             username: wxid   
   
8.         }, function(d) {   
   
9.             // 返回d.err_msg取值，d還有一個屬性是err_desc   
   
10.             // add_contact:cancel 用戶取消   
    
11.             // add_contact:fail　關注失敗   
    
12.             // add_contact:ok 關注成功   
    
13.             // add_contact:added 已經關注   
    
14.             WeixinJSBridge.log(d.err_msg);
    
15.             cb && cb(d.err_msg);
    
16.         });   
    
17. };   
    
18. //通過微信分享   
    
19. function WeiXinShareBtn() {   
    
20.    if (typeof WeixinJSBridge == "undefined") {   
    
21.         alert("請先通過微信xxxx");   
    
22.     } else {   
    
23.         WeixinJSBridge.invoke('shareTimeline', {   
    
24.             "title": "xxx",   
    
25.             "link": "xxxx",   
    
26.             "desc": "關注xxx",   
    
27.             "img_url": "xxxx"   
    
28.         });   
    
29.     }   
    
30. }   

復制代碼

1. 上面的代碼目前在微信內置瀏覽器才有效果
2. WeiXinAddContact中的微信wxid需要微信的原始id
例如商翼雲的微信id:i3eyun,原始id：gh_b15f77615e32，
在iphone版本的微信中使用兩種id都能完成正常的關注
但在android版本中如果使用i3eyun這個無法返回，一直停留在“正在關注。。。”，而修改成id：gh_b15f77615e32就正常了
3. 如果用戶希望用戶在打開頁面的時候，直接能彈出關注的對話框

1. //init   
   
2. function r(f){(typeof WeixinJSBridge == 'undefined'||(typeof WeixinJSBridge.invoke == 'undefined'))?setTimeout('r('+f+')',200):f()}   
   
3. r(function(){   
   
4.    WeiXinAddContact("gh_b15f77615e32");   
   
5. });

復制代碼

微 信內置瀏覽器會有WeixinJSBridge，但是需要一定的加載時間，WeixinJSBridge 有了之后 WeixinJSBridge.invoke也不一定有，所有看到r這個函數了把。。。（ps:每次打開都彈多不好意思阿，所以需要通過cookie來控 制，WeiXinAddContact回調狀態來設置cookie和通過cookie判斷是否要執行init的部分的r）


【Denis】分享

1. //分享到朋友圈
   
2. function weixinShareTimeline(title,desc,link,imgUrl){
   
3.         WeixinJSBridge.invoke('shareTimeline',{
   
4.                 "img_url":imgUrl,
   
5.                 //"img_width":"640",
   
6.                 //"img_height":"640",
   
7.                 "link":link,
   
8.                 "desc": desc,
   
9.                 "title":title
   
10.         });       
    
11. }
    
12. 
    
13. //發送給好友
    
14. function weixinSendAppMessage(title,desc,link,imgUrl){
    
15.         WeixinJSBridge.invoke('sendAppMessage',{
    
16.         //"appid":appId,
    
17.         "img_url":imgUrl,
    
18.         //"img_width":"640",
    
19.         //"img_height":"640",
    
20.         "link":link,
    
21.         "desc":desc,
    
22.         "title":title
    
23.         });
    
24. }
    
25. 
    
26. //分享到騰訊微博
    
27. function weixinShareWeibo(title,link){
    
28.         WeixinJSBridge.invoke('shareWeibo',{
    
29.                 "content":title + link,
    
30.                 "url":link
    
31.         });
    
32. }
    
33. 
    
34. //關注指定的微信號
    
35. function weixinAddContact(name){
    
36.         WeixinJSBridge.invoke("addContact", {webtype: "1",username: name}, function(e) {
    
37.                 WeixinJSBridge.log(e.err_msg);
    
38.                 //e.err_msg:add_contact:added 已經添加
    
39.                 //e.err_msg:add_contact:cancel 取消添加
    
40.                 //e.err_msg:add_contact:ok 添加成功
    
41.                 if(e.err_msg == 'add_contact:added' || e.err_msg == 'add_contact:ok'){
    
42.                     //關注成功，或者已經關注過
    
43.                 }
    
44.         })
    
45. }
    

復制代碼

【jodan179】分享
1. 在微信內置瀏覽器中可以調用weixin協議鏈接直接查看某個微信號的資料，例如：

1. <a href="weixin://profile/gh_b15f77615e32">商翼雲</a>

復制代碼

這里gh_xxxxxxxx就是用戶的原始ID,注意,必須使用原始ID.


2. 分享到朋友圈:

1. function ShareTofriends(img_url,link,title,desc) {
   
2.         //在HTML頁面內嵌入這一段JS代碼
   
3.     if(window.WeixinJSBridge){
   
4.         if( typeof(img_url) == 'undefined' || img_url == ""){
   
5.             var img_url = "xxxx";
   
6.         }
   
7.         if( typeof(link) == 'undefined' || link == ""){
   
8.             var img_url = window.location.href;
   
9.         }
   
10.         if ( typeof(title) == 'undefined' || title == "" ){
    
11.             var title = '點開看一下吧!';
    
12.         }
    
13.         if( typeof(desc) == 'undefined' || desc == ""){
    
14.             var desc = "wendoscoo";
    
15.         }
    
16.         WeixinJSBridge.invoke('shareTimeline',{
    
17.             "img_url": img_url,
    
18.             //"img_width": "640",
    
19.             //"img_height": "640",
    
20.             "link": link,
    
21.             "desc": desc,
    
22.             "title": title
    
23.         },function(res){
    
24.             // 返回res.err_msg,取值
    
25.             // share_timeline:cancel 用戶取消
    
26.             // share_timeline:fail　發送失敗
    
27.             // share_timeline:ok 發送成功
    
28.             WeixinJSBridge.log(res.err_msg);
    
29.         });
    
30.         return false;
    
31.     } else{
    
32.         alert("WeixinJSBridge對象不存在!!");
    
33.     }
    
34. };

復制代碼

然后同樣使用一個a標簽實現分享功能,加上onclick時間調用分享的JS函數就可以了

1. <a href="javascript:void(0);" onclick="ShareTOfriend('分享彈出窗的圖片URL地址','分享的頁面鏈接','分享彈出窗的標題','分享內容的描述')">分享到朋友圈</a>

復制代碼

相關功能尚未測試，后續情況將記錄在我的下一篇學習筆記中，敬請期待