1、API能实现什么?

1、分享到微信朋友圈
2、分享给微信好友
3、分享到腾讯微博
4、新的分享接口,包含朋友圈、好友、微博的分享(for iOS)
5、隐藏/显示右上角的菜单入口
6、隐藏/显示底部浏览器工具栏
7、获取当前的网络状态
8、调起微信客户端的图片播放组件
9、关闭公众平台Web页面

你可以用微信的“扫一扫”来打开下面这个二维码体验一把:

2、如何使用?

使用起来比较简单,具体可参考demo.html中的实现

1)、分享

WeixinApi.ready(function(Api) {

    // 微信分享的数据
var wxData = {
"appId": "", // 服务号可以填写appId
"imgUrl" : 'http://www.baidufe.com/fe/blog/static/img/weixin-qrcode-2.jpg',
"link" : 'http://www.baidufe.com',
"desc" : '大家好,我是Alien,Web前端&Android客户端码农,喜欢技术上的瞎倒腾!欢迎多交流',
"title" : "大家好,我是赵先烈"
}; // 分享的回调
var wxCallbacks = {
// 分享操作开始之前
ready : function() {
// 你可以在这里对分享的数据进行重组
alert("准备分享");
},
// 分享被用户自动取消
cancel : function(resp) {
// 你可以在你的页面上给用户一个小Tip,为什么要取消呢?
alert("分享被取消,msg=" + resp.err_msg);
},
// 分享失败了
fail : function(resp) {
// 分享失败了,是不是可以告诉用户:不要紧,可能是网络问题,一会儿再试试?
alert("分享失败,msg=" + resp.err_msg);
},
// 分享成功
confirm : function(resp) {
// 分享成功了,我们是不是可以做一些分享统计呢?
alert("分享成功,msg=" + resp.err_msg);
},
// 整个分享过程结束
all : function(resp,shareTo) {
// 如果你做的是一个鼓励用户进行分享的产品,在这里是不是可以给用户一些反馈了?
alert("分享" + (shareTo ? "到" + shareTo : "") + "结束,msg=" + resp.err_msg);
}
}; // 用户点开右上角popup菜单后,点击分享给好友,会执行下面这个代码
Api.shareToFriend(wxData, wxCallbacks); // 点击分享到朋友圈,会执行下面这个代码
Api.shareToTimeline(wxData, wxCallbacks); // 点击分享到腾讯微博,会执行下面这个代码
Api.shareToWeibo(wxData, wxCallbacks); // iOS上,可以直接调用这个API进行分享,一句话搞定
Api.generalShare(wxData,wxCallbacks);
});

2)、隐藏右上角option menu入口

WeixinApi.ready(function(Api) {
// 隐藏
Api.hideOptionMenu(); // 显示
// Api.showOptionMenu();
});

3)、隐藏底部工具栏

WeixinApi.ready(function(Api) {
// 隐藏
Api.hideToolbar(); // 显示
// Api.showToolbar();
});

4)、获取当前的网络类型

WeixinApi.ready(function(Api) {
Api.getNetworkType(function(network){
/**
* network取值:
*
* network_type:wifi wifi网络
* network_type:edge 非wifi,包含3G/2G
* network_type:fail 网络断开连接
* network_type:wwan 2g或者3g
*/
});
});

5)、调起客户端图片播放组件

WeixinApi.ready(function(Api) {
// 需要播放的图片src list
var srcList = [src1, src2, ..., srcN];
// 选一个作为当前需要展示的图片src
var curSrc = src1;
// 调起
Api.imagePreview(curSrc, srcList);
});

调起客户端图片播放组件,还有一种更屌的方法,不需要依赖这个WeixinApi,直接a标签实现就行,具体格式:

AnyThing

我们可以用A标签来嵌套这个img,具体Demo如下:

<a href="weixin://viewimage/http://www.baidu.com/img/bdlogo.gif">
<img src="http://www.baidu.com/img/bdlogo.gif">

<a href="weixin://viewimage/http://tb2.bdstatic.com/tb/static-common/img/search_logo_big_6a13b553.gif">
<img src="http://tb2.bdstatic.com/tb/static-common/img/search_logo_big_6a13b553.gif">

6)、关掉当前微信公众页面窗口

WeixinApi.ready(function(Api) {
// 关闭窗口
Api.closeWindow();
});

3、其他

详细的使用场景,可以到这里获取:http://www.baidufe.com/item/f07a3be0b23b4c9606bb.html

注意:这只是发烧版本,非微信官方出品!有问题可大家一起来讨论,我很乐意与大家一起来完善这个API。

一个不错的微信应用JS API库的更多相关文章

  1. 一个不错的在线的js调试器

    一个不错的在线的js调试器,可见即可得: http://jsbin.com/

  2. 微信支付JS API使用心得

    微信的接口真的很坑爹,只返回成功或失败,从来不会告诉你为什么失败.这个微信支付的js接口也是调了一个下午才成功,期间踩了不少坑,在这里总结一下,而且把支付接口封装成了一个js文件,这样以后调用就很方便 ...

  3. 微信支付.NET版开发总结(JS API),好多坑,适当精简

    前2天,做一个手机网页的微信支付的项目,费了好些周折,记录一下.接下来,按照开发步骤,细数一下,我遇到的那些坑. [坑1]官方邮件中下载的demo只有PHP版本,其他版本没有给链接.可能让人误以为只有 ...

  4. 微信支付.NET版开发总结(JS API),好多坑,适当精简。

    前2天,做一个手机网页的微信支付的项目,费了好些周折,记录一下.接下来,按照开发步骤,细数一下,我遇到的那些坑. [坑1]官方邮件中下载的demo只有PHP版本,其他版本没有给链接.可能让人误以为只有 ...

  5. 微信支付开发(3) JS API支付

    由于微信支付接口更新,本文档已过期,请查看新版微信支付教程.地址 http://www.cnblogs.com/txw1958/category/624506.html 本文介绍如何使用JS API支 ...

  6. geoserver图层属性查询及查询结果转换为arcgis js api能使用的格式

    一个项目使用了ArcGIS JS API开发GIS展示层,但GIS服务使用了Geoserver,这时加载Geoserver数据和查询数据就和之前完全不一样了,以下介绍下我使用ArcGIS JS API ...

  7. Node.js API 初解读(三)

    目录 Node.JS API 初解读三 Node.JS API 初解读三 Version: NodeJs v6.2.0 一. DNS (Domain Name Server) [域名服务器] 1.简介 ...

  8. 手绘风格的 JS 图表库:Chart.xkcd

    本文作者:HelloGitHub-kalifun 图表库千万个今天 HelloGitHub 给大家推荐个很有"特色"的图表库:一个手绘风格的 JS 图表库 -- Chart.xkc ...

  9. 微信客户端自带的Js Api:WeixinJSBridge

    <!DOCTYPE html> <html> <head> <title>微信WeixinJSBridge API</title> < ...

随机推荐

  1. [BZOJ4484][JSOI2015]最小表示[拓扑排序+bitset]

    题意 给你一个 \(n\) 个点 \(m\) 条边的 \(\rm DAG\) ,询问最多能够删除多少条边,使得图的连通性不变 \(n\leq 3\times 10^4\ ,m\leq 10^5\) . ...

  2. [VB.NET][C#]WAV格式文件头部解析

    简介 WAV 为微软开发的一种声音文件格式,它符合 RIFF(Resource Interchange File Format)文件规范,用于保存 Windows 平台的音频信息资源. 第一节 文件头 ...

  3. TCP/IP理解

    目录 1.概述 2.TCP/IP寻址及其协议族 3.TCP/IP 邮件 1.概述 介绍:什么是TCP/IP? TCP/IP协议是对计算机必须遵守的规则的描述,遵守了规则才能通信. 应用: 浏览器与服务 ...

  4. @RestController注解

    @RestController注解其实就是@@Controller和@ResponseBody的组合:RESTFUL风格 看下源码: 当@ResponseBody放到Controller类上,改Con ...

  5. Netty源码分析第5章(ByteBuf)---->第6节: 命中缓存的分配

    Netty源码分析第6章: ByteBuf 第六节: 命中缓存的分配 上一小节简单分析了directArena内存分配大概流程, 知道其先命中缓存, 如果命中不到, 则区分配一款连续内存, 这一小节带 ...

  6. ofo容器pass架构分享

    一.我们先要了解一下,为什么企业需要一个paas平台?或者可以说paas到底能做什么? 1.1 我们先来了解一下paas到底是什么? PaaS是Platform-as-a-Service的缩写,意思是 ...

  7. day13 内置函数

    参考资料: https://www.processon.com/view/link/5b4ee15be4b0edb750de96ac 内置函数: 作⽤域相关: locals()     返回当前作用域 ...

  8. 笨办法学Python - 习题11-12: Asking Questions & Prompting People

    目录 1.习题 11: 提问 2.习题 12: 提示别人 3.总结 1.习题 11: 提问 学习目标:了解人机交互场景,熟悉raw_input 的用法. 1.在 Python2.x 中 raw_inp ...

  9. jdk10 var定义变量的由来

    百家号03-1714:11 题图:by jordhammond from instagram 本文选自聊聊架构公众号,略有修改 以前我们 Java 程序员经常会对其他语言中的 var 关键字耿耿于怀, ...

  10. Beta发布 _thunder_文案+美工展示

    作业要求:https://edu.cnblogs.com/campus/nenu/SWE2017FALL/homework/1366 团队介绍:thunder 组成员及各位博客地址: 1.王航:htt ...