微信浏览器内置WeixinJSBridge API

稿件来源: 阳光企业网站管理系统   撰稿作者: 太阳光   发表日期: 2014-04-29   阅读次数: 12536   查看权限: 游客查看

微信浏览器是个特殊的环境,它内置了一些jsAPI却没公布出来,同时技术仍不成熟,部分接口在不同的环境下可能出现不能使用。

//加载完后执行,只在微信浏览内执行
document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
    // 分享给微信好友 (点击右上角发送给朋友时执行)
    var wxData = {
        "appId": "wx69d816f8fbc1066c", // 服务号可以填写appId
        "imgUrl" : 'http://www.scscms.com/weixin/images/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) {
            if(argv.err_msg != 'send_app_msg:cancel' && argv.err_msg != 'share_timeline:cancel') {
               //分享完毕回调
            }
            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) {
        if(argv.err_msg != 'send_app_msg:cancel' && argv.err_msg != 'share_timeline:cancel') {
            //分享完毕回调
        }
        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/images/1.jpg','http://www.scscms.com/weixin/images/2.jpg'];//图片列表
WeixinJSBridge.invoke('imagePreview', {
    '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

 

关键词: 腾讯微信,微信开发,WeixinJSBridge   编辑时间: 2014-11-07 17:29:18

  • 感到高兴

    2

    高兴
  • 感到支持

    4

    支持
  • 感到搞笑

    2

    搞笑
  • 感到不解

    4

    不解
  • 感到谎言

    0

    谎言
  • 感到枪稿

    3

    枪稿
  • 感到震惊

    1

    震惊
  • 感到无奈

    2

    无奈
  • 感到无聊

    0

    无聊
  • 感到反对

    0

    反对
  • 感到愤怒

    1

    愤怒
87.5%(7)
12.5%(1)
共有3 条评论 发言请遵守【相关规定

网友评论

会员头像
发 表同步腾讯微博    验证码:  点击更新请先登陆
  • 【游客】WeixinJSBridge.invoke("addContact", {webtype: "1",username: name}, function(e)  这个已经不能用了 [2014-12-03 22:42:23]
  • 【游客】res.err_msg="share_timeline:ok"这个回调有问题在安卓系统下,点击右上角的分享到朋友圈的时候就调用了,取消发送之后就没有调用,所以一直是OK状态,但是发送给好友的时候是正确的。 [2014-08-22 13:37:26]
  • 【游客】分享到朋友圈时,这里Android系统的回调函数返回的res.err_msg=“share_timeline:ok”,取消分享和分享都出现这个,ios没有这个问题,楼主碰到这个问题没? [2014-07-07 17:57:07]
关闭模块文章图片 article Pictrue
  • 我的妈妈爸爸
  • 基于koa2+mysql+vue2.0+Element阳光内容管理系统
  • 代码覆盖率工具 Istanbul 入门教程
  • 全栈工程师的武器——MEAN
  • 9款超炫的 CSS3 复选框(Checkbox)
  • 微信开发在线翻译功能
  • CSS3那些不为人知的高级属性
  • 给easyui的datebox添加清空事件
  • flash写字效果
  • kendoUI系列教程之DropDownList下拉菜单
  • kendoUI系列教程之datetimepicker日期时间选择
  • kendoUI系列教程之datepicker日期选择
  • kendoUI系列教程之combobox下拉列表框
  • kendoUI系列教程之colorpicker
  • kendoUI系列教程之calendar日历表
  • kendoUI系列教程之autocomplete自动补齐