最全面最专业的微信公众平台开发教程:http://www.cnblogs.com/txw1958/p/weixin-js-sdk-demo.html
比较完整的分享教程:http://www.cnblogs.com/leinov/p/5256879.html
ajax调用服务器接口:
function GetWeiXinJsapiConfig() {
var url = encodeURIComponent(location.href.split('#')[0]);
alert('url is ' + url);
$.ajax({
type: "POST",
url: "/XXX/GetWeiXinJsapiConfig",
data: "{'curUrl': '" + url +
"'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data) {
console.log(data.d);
var configData = $.parseJSON(data.d);
console.log('sig is ' + configData.signature);
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: configData.appid, // 必填,公众号的唯一标识
timestamp: configData.timestamp, // 必填,生成签名的时间戳
nonceStr: configData.noncestr, // 必填,生成签名的随机串
signature: configData.signature, // 必填,签名,见附录1
jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});
wx.ready(function(){
alert('OK---');
wx.onMenuShareAppMessage({
title: shareTitle, // 分享标题
desc: descContent, // 分享描述
link: lineLink, // 分享链接
imgUrl: imgUrl, // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
});
wx.error(function(res){
// alert("err" + res);
});
},
error: function(data) {
var is_json;
var json;
try {
var json = $.parseJSON(data.responseText);
is_json = true;
} catch (e) {
is_json = false;
}
if (is_json) {
// add_json_error(data, json);
console.log(json.Message);
} else {
// Show the response text as plaintext.
var status = data.status;
var statusText = data.statusText;
// If we've hit a 400 (Bad Request), show the responseText.
if (status === 400) {
statusText += ": " + data.responseText;
}
console.log(status + " " + statusText);
}
},
complete: function() {
}
});
}
定义微信分享数据,一次定义,多处使用:
// 定义微信分享的数据
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);
初始化等待分享:
// 开发阶段,开启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);
});
隐藏右上角option menu入口
WeixinApi.ready(function(Api) {
// 隐藏
Api.hideOptionMenu();
// 显示
// Api.showOptionMenu();
});
隐藏底部工具栏
WeixinApi.ready(function(Api) {
// 隐藏
Api.hideToolbar();
// 显示
// Api.showToolbar();
});
获取当前的网络类型
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
*/
});
});
调起客户端图片播放组件
WeixinApi.ready(function(Api) {
// 需要播放的图片src list
var srcList = [src1, src2, ..., srcN];
// 选一个作为当前需要展示的图片src
var curSrc = src1;
// 调起
Api.imagePreview(curSrc, srcList);
});
关掉当前微信公众页面窗口
WeixinApi.ready(function(Api) {
// 关闭窗口
WeixinApi.closeWindow({
success : function(resp){
alert('关闭窗口成功!');
},
fail : function(resp){
alert('关闭窗口失败');
}
});
});
判断当前网页是否在微信内置浏览器中打开
// true or false
var flag = WeixinApi.openInWeixin();
发送电子邮件
WeixinApi.sendEmail({
subject : '邮件标题',
body : '邮件正文'
},function(resp){
// 注意这里可不要轻易alert,会卡死的。。。
});
禁止用户分享
// 先对Api进行初始化
WeixinApi.ready(function(Api) {
// 禁止分享
Api.disabledShare(function(){
alert('当前页面禁止分享!');
});
});
常见问题:
用了这个API怎么没生效
- 1)、
WeixinApi.js
路径是否引用正确 - 2)、
WeixinApi.ready
是否正确执行了?(可以在里面加一个alert,简单粗暴可依赖) - 3)、开启
WeixinApi.enableDebugMode
方便问题定位
想自己做一个按钮直接分享
就我目前了解到的情况来看,是行不通的,官方都有做权限控制
怎样动态修改分享的信息:wxData
用到Api提供的async:true
配置
关于分享的其它方法以及注意事项,请移步这位仁兄这里,有比较详细的答案:https://www.baidufe.com/item/f07a3be0b23b4c9606bb.html