今天在开发项目的时候,由于需要在微信中实现分享功能(分享成功后实现页面跳转并记录)。问度娘,找了很久,终于找到一个不错的方法。收藏起来以后备用,也希望对大家有所帮助!

在github的地址:https://github.com/maxzhang/WeixinAPI

我能做什么?

  1. 分享到微信朋友圈、微信好友或腾讯微博

  2. 调用微信客户端的图片播放组件

  3. 获取当前的网络状态

  4. 隐藏/显示右上角的菜单入口

  5. 隐藏/显示底部浏览器工具栏

  6. 关闭当前WebView页面

DEMO

http://jsbin.com/woluy/latest

微信扫描下面二维码查看例子:

API

1、API初始化

WeixinAPI 初始化,是后续所有 WeixinAPI 操作的起始,调用方法:

 var wxData = {    'appId': '', // 服务号可以填写appId,没有则留空
'imgUrl': '', // 分享显示的图标
'link': 'http://maxzhang.github.io', // 分享链接
'title': '大家好,我是cyt静风', // 分享标题
'desc': '大家好,我是cyt静风' // 分享内容};
WeixinAPI.ready(wxData);

你可以在ready动作之后的任何时候更改wxData对象,比如:

wxData.link = 'http://www.75team.com';

2、分享事件监听

支持的事件名称:

  • ready 准备分享

  • cancel 取消分享

  • ok 分享成功

  • fail 分享失败

  • complete 分享结束

默认事件监听应用到全局,不论哪个分享渠道都会执行回调函数。调用方法:

 WeixinAPI.on('ok', function() { alert('share success!'); });
WeixinAPI.on('fail', function() { alert('share failure!'); });

注:最新版本微信已经不再区分分享动作,分享只响应统一的"general_share"动作,以下接口只有在微信5.4以下版本才有效

除此之外,你还可监听特定动作的事件,支持:

  • timeline 朋友圈

  • appmessage 微信朋友

  • weibo 腾讯微博

调用方法:

 WeixinAPI.on('timeline:ok', function() { alert('share timeline success!'); });
WeixinAPI.on('timeline:fail', function() { alert('share timeline failure!'); });

3、移除事件监听

调用方法:

 function callback() {}
WeixinAPI.on('ok', callback);
WeixinAPI.off('ok', callback); // 取消监听

也可以一次性移除所有监听,调用方法:

WeixinAPI.off('ok');

4、调用微信客户端的图片播放组件

调用方法:

// 需要播放的图片url列表var urls = ['url1', 'url1', ..., 'urlN'];// 选一个作为当前展示的图片urlvar current = 'url';

WeixinAPI.imagePreview(current, urls);

5、获取当前的网络状态

Network 类型取值:

  • network_type:wifi wifi网络

  • network_type:edge 非wifi,包含3G/2G

  • network_type:fail 网络断开连接

  • network_type:wwan 2g或者3g

  • unknow 未知网络

调用方法:

 // 同步调用,30秒同步一次 WeixinJSBridge 返回的网络状态,所以会有误差
2 var networkType = WeixinAPI.getNetworkType();// 异步调用,能获取精确的网络状态
3 WeixinAPI.getNetworkType(function(networkType) {
4 alert(networkType);
});

6、隐藏/显示右上角的菜单入口

调用方法:

 WeixinAPI.showOptionMenu();
WeixinAPI.hideOptionMenu();

7、隐藏/显示底部浏览器工具栏,仅对公众号页面有效

调用方法:

 WeixinAPI.showToolbar();
WeixinAPI.hideToolbar();

8、关闭当前WebView页面

调用方法:

WeixinAPI.closeWindow();

Weixin API -- 微信js接口的更多相关文章

  1. 微信JS接口

      微信JS接口 分享到朋友圈 分享给朋友 分享到QQ 拍照或从手机相册中选图 识别音频并返回识别结果 使用微信内置地图查看位置来源:http://www.cnblogs.com/txw1958/p/ ...

  2. 微信JS接口汇总及使用详解

    这篇文章主要介绍了微信JS接口汇总及使用详解,十分的全面.详尽,包含分享到朋友圈,分享给朋友,分享到QQ,拍照或从手机相册中选图,识别音频并返回识别结果,使用微信内置地图查看位置等接口,有需要的小伙伴 ...

  3. md笔记——微信JS接口

    微信js接口 隐藏微信中网页右上角按钮 document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() { Weix ...

  4. 使用微信js接口的方法 ,以调用相机为例

    protected string GetTimeStamp_Str=""; protected string nonceStr_Str = ""; protec ...

  5. 微信js接口自定义分享内容

    最近客户有个要求,需要给网页添加微信分享功能,当然指的是用微信自带浏览器的时候,希望用户在最后一页点击分享的时候是分享的首页.曾经无意中看到过微信公众开发者平台提供了js接口,所以试着做了做,果然,跌 ...

  6. 关于微信js接口调用时,token效期问题

    如果一个应用的不同模块分配两个独立的公众号微官网使用,这时调用JS接口生成的token一定就冲突,原因是,token的有效期为两个小时. 解决方案: 将两个公众号的APPID与SERVERID分给不同 ...

  7. 微信支付配置信息,JSAPI接口,H5调用微信js接口支付,微信公众号支付

    微信支付已经做完了,没接触过微信的我,经历了非常艰难的3天,才把微信支付给做出来,对于专业的人来说,估计就是一小时就搞定的事情了,虽然说做了很长时间,但是确实也学到东西了,也收获了不少,下面跟大家分享 ...

  8. 微信JS SDK配置授权,实现分享接口

    微信开放的JS-SDK面向网页开发者提供了基于微信内的网页开发工具包,最直接的好处就是我们可以使用微信分享.扫一扫.卡券.支付等微信特有的能力.7月份的时候,因为这个分享的证书获取问题深深的栽了一坑, ...

  9. 微信js SDK接口

    微信JS-SDK说明文档 http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html 一.微信登录功能 在进行微信OAut ...

随机推荐

  1. [转载]AngularJS入门教程03:迭代器

    我们在上一步做了很多基础性的训练,所以现在我们可以来做一些简单的事情喽.我们要加入全文检索功能(没错,这个真的非常简单!).同时,我们也会写一个端到端测试,因为一个好的端到端测试可以帮上很大忙.它监视 ...

  2. IOS 设置子控件的frame(layoutSubviews and awakeFromNib)

      如果控件是通过xib或者storyboard创建出来的就会调用该方法 - (void)awakeFromNib :该方法只会调用一次 // 如果控件是通过xib或者storyboard创建出来的就 ...

  3. 实现带查询功能的ComboBox控件

    实现效果: 知识运用: ComboBox控件的AutoCompleteMode属性 public AutoCompleteMode AutoCompleteMode{get;set;} //属性值为枚 ...

  4. GCH文件

    GCH文件是将H文件当作CPP进行编译之后出现的结果, 在头文件进行编译后就会在文件夹中看到一个 “文件名.h.gch” 的文件. 那么在再次对gch文件进行编译的时候就会将gch当作cpp一样对待. ...

  5. BZOJ2287: 【POJ Challenge】消失之物(背包dp)

    题意 ftiasch 有 N 个物品, 体积分别是 W1, W2, ..., WN. 由于她的疏忽, 第 i 个物品丢失了. “要使用剩下的 N - 1 物品装满容积为 x 的背包,有几种方法呢?” ...

  6. swpan&expect交互脚本

    #!/usr/bin/expectset timeout 30set user USERNAMEset pass PASSWORDspawn sudo pg_dump npi -U admin -p ...

  7. nginx安装php环境

    1.php下载地址 https://secure.php.net/downloads.php(此次安装版本为7.0.33) 2.安装依赖的包 yum -y install libxml2 yum -y ...

  8. CSS3小知识

    1.边框圆角,边框阴影 border-radius:6px; // border-radius:50%; //圆形 box-shadow: 1px 1px 1px #666; //box-shadow ...

  9. JsRender (js模板引擎)

    最近学习了一下Jsrender模板渲染工具,非常不错,功能比较强大,官网说他是“简单直观 功能强大 可扩展的 快如闪电”确实如此.总结一下!! jsRender 三个最重要的概念:模板.容器和数据. ...

  10. PHP 计算代码运行所占内存和时间

    PHP 计算代码运行所占内存和时间 在PHP开发过程中,写出高质量的代码是很重要的,除了代码必须规范之外,性能也是不可忽视的一方面,那么如果检验一段代码是否高效呢,可通过以下一段php代码来粗略检测 ...