Git Product home page Git Product logo

weixinapi's Introduction

微信公众平台Js API(WeixinApi)

关于WeixinApi

1、WeixinApi为何诞生

以前顺便玩儿了下微信公众账号,做Web前端开发的,都对页面脚本充满好奇,所以研究了下,放到Blog上, 也正因为微信官方一直没有放出正式的Api提供给用户来用,所以大量的用户到我blog上去询问WeixinJSBridge相关的技术点,索性我就整理了一下, 起个名字叫WeixinApi开源到github来,提供给大家使用!

2、免责声明

此Api为非官方版,由于官方的限制,继续使用此Api还有可能会出现一些意向不到的问题,一切后果请自行承担!

3、WeixinApi可能停止更新

目前官方已经出了正式版本的SDK,详情可见微信JS-SDK说明文档, 所以大家还是尽早迁移到官方版本吧,这对大家来说是好事,以后出什么问题,官方渠道应该都会第一时间给出解决方案,稳定很多,也不至于经常被黑! 本API可能以后就不会频繁更新了,各位知晓!

目录

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

Weixin Api Demo

快速使用

// 定义微信分享的数据
var wxData = {
    "appId": "", // 服务号可以填写appId
    "imgUrl" : 'http://photocdn.sohu.com/20130122/Img364302298.jpg',
    "link" : 'http://www.baidufe.com',
    "desc" : '使用警告:此Api非官方版本,请各位尽量将分享功能迁移至腾讯官方版,会更稳定些!',
    "title" : "欢迎使用WeixinApi"
};

// 分享的回调
var wxCallbacks = {
    // 收藏操作是否触发回调,默认是开启的
    favorite : false,

    // 分享操作开始之前
    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);
    }
};
// 自定义分享到:微信好友、朋友圈、腾讯微博、QQ好友
WeixinApi.share(wxData,wxCallbacks);

可下载源码,部署sample/sample-new.html进行测试

详细Api列表

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

1、初始化等待分享

// 开发阶段,开启WeixinApi的调试模式
WeixinApi.enableDebugMode();

// 初始化WeixinApi,等待分享
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" : '使用警告:此Api非官方版本,请各位尽量将分享功能迁移至腾讯官方版,会更稳定些!',
        "title" : "欢迎使用WeixinApi"
    };

    // 分享的回调
    var wxCallbacks = {
        // 收藏操作不执行回调,默认是开启(true)的
        favorite : false,

        // 分享操作开始之前
        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);
});

可能有的朋友不知道appId从哪儿获取,请看这里:如何获取appId

分享的数据可以动态修改:

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标签实现就行,具体格式:

<a href="weixin://viewimage/`YourImageURL`">AnyThing</a>

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

<a href="weixin://viewimage/http://www.baidu.com/img/bdlogo.gif">
	<img src="http://www.baidu.com/img/bdlogo.gif">
</a>
<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">
</a>

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

WeixinApi.ready(function(Api) {	
	// 关闭窗口
    WeixinApi.closeWindow({
        success : function(resp){
            alert('关闭窗口成功!');
        },
        fail : function(resp){
            alert('关闭窗口失败');
        }
    });
});

7、判断当前网页是否在微信内置浏览器中打开

	// true or false
	var flag = WeixinApi.openInWeixin();

8、开启WeixinApi的错误监控

注意,这句代码务必放在WeixinApi.ready之前;上线的时候,根据实际需要,可删掉它

// 方法1:不带任何参数,将以alert方式提示出错信息
WeixinApi.enableDebugMode();

// 方法2:给一个callback,自己处理错误信息
WeixinApi.enableDebugMode(function(errObj){
    // errObj = {
    //     message : errorMessage,
    //     script : scriptURI,
    //     line : lineNumber,
    //     column : columnNumber
    // }
});

// 当然,你还可以做一件事:把这些错误信息上报到服务器

9、发送电子邮件

WeixinApi.sendEmail({
    subject : '邮件标题',
    body : '邮件正文'
},function(resp){
    // 注意这里可不要轻易alert,会卡死的。。。
});

10、禁止用户分享

// 先对Api进行初始化
WeixinApi.ready(function(Api) {
    // 禁止分享
    Api.disabledShare(function(){
        alert('当前页面禁止分享!');
    });
});

代码请参考 sample/sample-normal.html

常见问题

1、用了这个API怎么没生效

如果遇到这种情况,请先回到这里,扫描最上面的 二维码 Demo,首先验证Demo是否能运行正确;然后再参照demo.html调整自己的代码:

  • 1)、WeixinApi.js路径是否引用正确
  • 2)、WeixinApi.ready是否正确执行了?(可以在里面加一个alert,简单粗暴可依赖)
  • 3)、开启WeixinApi.enableDebugMode方便问题定位

2、Android上取消分享依然提示成功

传送门:为什么分享到朋友圈,取消了依然提示成功?

3、想自己做一个按钮直接分享

就我目前了解到的情况来看,是行不通的,官方都有做权限控制,感兴趣可以到这里去翻一下评论

4、怎样动态修改分享的信息:wxData

用到Api提供的async:true配置,具体可阅读这里的使用介绍

5、收藏的时候为什么也执行分享的回调了?

请在wxCallbacks中设置favorite:false,关闭收藏操作的callback

其他

1、更多互动

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

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

3、如果你觉得这个Api对你有用:

alien-alipay-qrcode-256.png

weixinapi's People

Contributors

neelie avatar qingpinhuang avatar shoaly avatar xuexb avatar zxlie avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

weixinapi's Issues

ISO调用时需要做特殊处理吗?

最近发现微信的发送和分享不能正常使用了。然后使用了WeixinApi。
现在的情况是在android的微信中可以发送分享。但是Iphone上不能使用。
具体想问Api.generalShare(wxData,wxCallbacks);这个方法,具体怎么使用。

完全不进入ready....

var wxCallbacks = {
favorite: false,

                ready: function() {
                    this.dataLoaded({
                                                       title : '在这里可以单独修改其中的title字段',
                                                     imgUrl : 'http://www.baidu.com/img/bdlogo.png'
                                           });
                },..................................

这段完全不走,问题:IOS一切正常 安卓无法分享

IOS下收藏报错

RT,即使是你给的DEMO,在分享的时候仍然会提示出错。
大致错误信息如下:
额,代码有错。。。
错误信息:TypeError: 'undefined' is not a function(evaluating 'j.generalShare(k,function(){})')
出错文件:..../WeixinApi.js
出错位置:(这里的信息根据不同的情况,抱错行不一样)

如果关闭调试模式,收藏不会报错,但是也不会收藏成功。
IPHONE4和IPHONE5都有一样的问题

关于是否在微信浏览器中打开的代码?

可否写的更详细一点。 实例代码:

//判断当前网页是否在微信内置浏览器中打开
var flag = WeixinApi.openInWeixin();

if(!flag){
    alert("请用微笑信打开此链接!");
    document.getElementById("page1").innerHTML="<div style='color:red;text-align:center;margin-top:50px;font-size:2em;'>非法操作你的动作已被监控!</div>";
}   

我的是这样的。

我试如下(不执行):

   // 代码准备完成
   WeixinApi.ready(function(Api){
//判断当前网页是否在微信内置浏览器中打开
var flag = WeixinApi.openInWeixin();

if(!flag){
    alert("XXXX");
     }
   }

关于closeWindow

@zxlie

请问有没有办法,在 用户点击关闭webview的时候,给出用户confirm提示,是否关闭窗口呢?

因为现在用户在页面中进行操作,往往会误点左上侧的x号,而关闭webview。。。。

分享内容及标题如果是动态的话处理很不方便

如题,比如我写个小游戏,分享的方案是由游戏结果而不同,这样的话,如果一开始就传入分享的方案就无法做到动态变化了!有提供支持吗?

我目前的处理是在handler方法中加入

    for(var k in theData){
                if($.isFunction(theData[k]))
                    theData[k] = theData[k]();
            }

这样在外部传入的是个方法,而不是字符就可以完成了,但实现方式并不让人满意。

ios6.0.2 没有执行ready方法!

ios扫描github上的二维码,进行朋友圈分享是可以看到 分享自定义图片的。
但按照github上面的代码,完整照搬,部署自己代码的时候,ios 6.0.2 没有执行ready里面的方法,分享朋友圈小图标是默认蓝色的那个,没显示自定义的图片!

配置文件的填写

wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: '', // 必填,公众号的唯一标识
timestamp: , // 必填,生成签名的时间戳
nonceStr: '', // 必填,生成签名的随机串
signature: '',// 必填,签名,见附录1
jsApiList: [] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});

请问appid和签名应该写什么呢?哪些随机生成的东西应该怎么生成呢?
为什么这个链接http://news.qq.com/zt2014/patients/mobile.html貌似没有做这些配置,显示的一样是正确的内容呢?大神们急救啊

可以增加一个分享前的事件,用来阻止用户分享

有个特殊的需求,某些页面不想隐藏右上角,但同时需要阻止用户的分享行为。
以前是这么写的

WeixinJSBridge.on('menu:share:timeline',function(){
    alert('私有页面,不要分享哦');
    return false;
})

我觉得大神你的api也可以增加一个前置事件以便实现这样的需求,在下先自己动手改改了:

    //WexinApi.js  129行左右
    // 监听分享操作
    WeixinJSBridge.on(cmd.menu, function (argv) {
        //增加前置回调before
        if(callbacks.before && callbacks.before(argv,data) == false){
            return false;
        }
        //over
        callbacks.dataLoaded = callbacks.dataLoaded || new Function();

调用:

   // 分享的回调
    var wxCallbacks = {
        //分享之前
        before : function(){
            alert('禁止分享本页面');
            return false;
        },
        ......

怎样让微信用户关注微信公众账号

以前让用户关注微信公众平台的话 1.Android: 只需要点击这里添加微无锡公众号 但现在不行了 如果变成点击这里添加微无锡公众号这样子是可以的;2.iOS的话以前是调用WeixinJSBridge 的方法 WeixinJSBridge.invoke('profile',{
'username':'gh_2c6803f90bbc', /* 你的公众号原始ID /
'scene':'57'
},function(resp){
alert(resp.err_msg); /
在这里,我们把err_msg输出 */
}); 这样是可以的,但现在不可以了,请问有什么其他方式可以直接在iOS的微信里面关注么?谢谢

最新的版本遇到问题求助

最新的6.0.2中IOS系统正常,Android系统初始化分享时无法获取到给定的内容,不知道是什么问题,不知是否有遇到相同问题?

解決 async:true , dataLoaded 針對 Send to Chat 沒反應的辦法

問題: 當使用 Async 時Send到Chat 有些字段沒有刷新

解決辦法:
line 124 下面 : 加上

cmd.menu == 'menu:share:appmessage' ||

完整如下:

                 if (cmd.menu == 'menu:share:timeline' ||
                        cmd.menu == 'menu:share:appmessage' ||
                        (cmd.menu == 'menu:general:share' && argv.shareTo == 'timeline')) {
                        theData = {
                            "appid":theData.appId ? theData.appId : '',
                            "img_url":theData.imgUrl,
                            "link":theData.link,
                            "desc":theData.title,
                            "title":theData.desc,
                            "img_width":"640",
                            "img_height":"640"
                        };
                    }

請參考!

新增一个从微信webview里面打开微信内置地图的API

先提一个意见,建立@zxlie 将这个API构建成CommonJS模型,采用这种方式:

var WechatAPI = {};
WechatAPI.shareToTimeline = function(){...}
...
// 所有方法对象暴露在WechatAPI之中就好了,显得更加清晰,而不是return一个{....}。
// module.exports = WechatAPI;   //seajs模块化增加此行

这种方式显得更加规范,也符合模块化js标准,便于seajs,requejs等整合。
以上纯属个人建议,仅供参考,谢谢。

下面贡献一个微信打开地图的API,不保证100%能用,是从大众点评的地址里面挖出来的。

/**
 * 从网页里直接调起微信地图
 * @param lat   经度
 * @param lng   纬度
 * @param poiName   地址名称
 * @param poiAddress    详细地址
 * @param infoUrl 查看位置界面底部的超链接
 * @param scale 地区缩放级别
 */
WechatAPI.openLocation = function (detail) {
    var callback = detail.callback || {};
    WeixinJSBridge.invoke('openLocation', {
        "latitude": detail.lat,//纬度
        "longitude": detail.lng,//经度
        "name": detail.name, //POI名称
        "address": detail.address, //地址
        "scale": (typeof detail.scale == "undefined") ? 14 : detail.scale, //地图缩放级别
        "infoUrl": (typeof detail.infoUrl == "undefined") ? "" : detail.infoUrl //查看位置界面底部的超链接
    }, function (res) {
        // 返回res.err_msg,取值
        // open_location:ok 打开成功
        // open_location:invalid_coordinate 非法的经纬度
        WeixinJSBridge.log(res.err_msg);
        if (res.err_msg == "system:function_not_exist") {
            gotoUpdate();
            return;
        }
        if (res.err_msg != "open_location:ok") {
            callback(res.err_msg);
        }
    });
}

api不能用了!!!!

试了一下作者的demo页面,也不能用了。是微信禁止了这个api吗。希望作者能尽快给出新的的api

shareToTimeline desc

分享到朋友圈内容desc好像显示不出来,是不是api 有调整了。
分享给朋友也是这样。

我把内容写到title 里面就可以了

WP8手机里面有bug

已知的bug:
1、openInWeixin无法正常检测是否是在微信中打开
2、shareToTimeline,shareToWeibo,shareToFriend的所有回调事件无法执行,初步检测有可能是微信WeixinJSBridge没有回调invoke注册的函数

环境Windows Phone 8.1

IOS8.0中无法使用

亲测几部不同版本的IOS系统手机,均无法掉起分享。
android的可以。
某些特殊的域。

“分享到朋友圈"到底能不能用?

我在博主原文章( http://www.baidufe.com/item/f07a3be0b23b4c9606bb.html )下面看到博主说【在网页上设置一个按钮,用户通过点击按钮将网页内容分享到朋友圈,而不是通过点击手机右上角的方式】实现不了,那weixinApi.js里面提供的“分享到朋友圈”的功能是什么?
我试了下这个貌似执行不了:

addEvent('shareTimeline',function(el,e){
        WeixinApi.shareToTimeline({
            "appid": '',
            "img_url":'',
            "link":'http://www.baidu.com',
            "desc":'desc',
            "title":'title', // 注意这里要分享出去的内容是desc
            "img_width":"640",
            "img_height":"640"
        },{
            confirm:function(){
                alert('cg')
            }
        })
    })

请问有没有打开手机拍照的接口?

作者你好,首先感谢您整理的这份代码。其中有一个功能是打开扫描二维码,我觉得非常好,那请问官方有没有直接js打开手机拍照的接口呢?

函数命名问题建议

我觉得使用shareToTimelineshareToFriend这个命名不太好,我第一次理解就是这个方法可以直接分享到用户的好友圈,而不用用户在右上角添加option按钮。

我的建议可以是addShareToTimelineListening这样感觉更直观

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.