传说中的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. function weixinSendAppMessage(title,desc,link,imgUrl){
14. WeixinJSBridge.invoke('sendAppMessage',{
15. //"appid":appId,
16. "img_url":imgUrl,
17. //"img_width":"640",
18. //"img_height":"640",
19. "link":link,
20. "desc":desc,
21. "title":title
22. });
23. }
24. //分享到腾讯微博
25. function weixinShareWeibo(title,link){
26. WeixinJSBridge.invoke('shareWeibo',{
27. "content":title + link,
28. "url":link
29. });
30. }
31. //关注指定的微信号
32. function weixinAddContact(name){
33. WeixinJSBridge.invoke("addContact", {webtype: "1",username: name}, function(e) {
34. WeixinJSBridge.log(e.err_msg);
35. //e.err_msg:add_contact:added 已经添加
36. //e.err_msg:add_contact:cancel 取消添加
37. //e.err_msg:add_contact:ok 添加成功
38. if(e.err_msg == 'add_contact:added' || e.err_msg == 'add_contact:ok'){
39. //关注成功，或者已经关注过
40. }
41. })
42. }

复制代码

【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>

复制代码