H5页面分享微信自定义分享title和img

Posted on 2017-11-19 16:36  陈小鑫  阅读(6799)  评论(0编辑  收藏  举报

前端开发H5 需分享到朋友圈和发给好友,想自定义分享的title和图表还有简短一句话,还需调用微信的api

首先需获取到微信的appId,timestamp,nonceStr,signature

微信JS-SDK说明文档https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

//微信分享代码

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

wx.config({

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

appId: appid, // 必填,公众号的唯一标识

timestamp: timestamp, // 必填,生成签名的时间戳

nonceStr: nonceStr, // 必填,生成签名的随机串

signature: signature,// 必填,签名,见附录1

jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2

});

wx.ready(function () {
wx.onMenuShareTimeline({
title: '分享标题', // 分享标题
link: 'http://papastyle.cn’, // 分享链接
imgUrl: 'http://papastyle.cn/images/logo.jpg', // 分享图标
success: function () {

},
cancel: function () {

}
});

wx.onMenuShareAppMessage({
title: '分享标题', // 分享标题
desc: ' ,我正在参加"活动",请为我投票!', // 分享描述
link: 'http://papastyle.cn', // 分享链接
imgUrl: 'http://papastyle.cn/images/logo.jpg', // 分享图标
type: '', // 分享类型,music、video或link,不填默认为link
dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
success: function () {
// 用户确认分享后执行的回调函数

},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});

});