微信中分享html5网页sdk,微信网页分享JS-SDK使用步骤

ps: 公众号必须开通微信认证，否则无法自定义分享

1.公众平台

绑定域名

登录微信公众平台，进入“公众号设置”-“功能设置”,然后填写“JS接口安全域名”。不用加http://只需要写域名即可，例：www.abc.com(也可以是一个路径)。

2.服务器

然后在微信公众平台下载域名验证文件MP_verify_xxx.txt文件，放到服务器的目录下(如果填写的是域名则放到服务器根目录下，例如：www.abc.com/MP_verify_xxx.txt，如果是路径就放到路径目录下，例：www.abc.com/xxx/MP_verify_xxx.txt)否则会报错：无法访问xxx指向的web服务器(或虚拟主机)的目录，请检查网络设置

报错

3.前端页面

引入js文件

在需要调用js接口的页面引入js文件http://res.wx.qq.com/open/js/jweixin-1.2.0.js，如果你的服务器是https请求的话请引入https://res.wx.qq.com/open/js/jweixin-1.2.0.js

通过config接口注入权限验证配置

所有需要使用JS-SDK的页面都需要先注入配置信息，下面是代码：

var config = data.payload;

//config为调用后台接口返回的数据,出于安全考虑，开发者必须在服务器端实现签名的逻辑。

wx.config({

debug: false,//开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。

appId: config.appId, // 必填，公众号的唯一标识

timestamp: parseInt(config.timestamp), // 必填，生成签名的时间戳

nonceStr: config.nonce, //必填， 生成签名的随机串

signature: config.signature, //必填，签名

jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareQZone'] //必填， JS接口列表，这里只填写了分享需要的接口

});

通过ready接口处理成功验证

wx.ready(function () {

wx_share('分享标题',分享地址,分享图标,'分享描述');

});

function wx_share(title, link, imgurl, desc) {

//朋友圈

wx.onMenuShareTimeline({

title: title, // 分享标题

link: link, // 分享链接

imgUrl: imgurl, // 分享图标

success: function() {

// 用户确认分享后执行的回调函数

},

cancel: function() {

// 用户取消分享后执行的回调函数

}

});

//微信好友

wx.onMenuShareAppMessage({

title: title, // 分享标题

desc: desc, // 分享描述

link: link, // 分享链接

imgUrl: imgurl, // 分享图标

type: 'link', // 分享类型,music、video或link，不填默认为link

dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空

success: function() {

// 用户确认分享后执行的回调函数

},

cancel: function() {

// 用户取消分享后执行的回调函数

}

});

//qq

wx.onMenuShareQQ({

title: title, // 分享标题

desc: desc, // 分享描述

link: link, // 分享链接

imgUrl: imgurl, // 分享图标

success: function() {

// 用户确认分享后执行的回调函数

},

cancel: function() {

// 用户取消分享后执行的回调函数

}

});

// qq空间

wx.onMenuShareQZone({

title: title, // 分享标题

desc: desc, // 分享描述

link: link, // 分享链接

imgUrl: imgurl, // 分享图标

success: function() {

// 用户确认分享后执行的回调函数

},

cancel: function() {

// 用户取消分享后执行的回调函数

}

});

}

通过error接口处理失败验证

wx.error(function(res){

// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。

});

最后