1000字范文,内容丰富有趣,学习的好帮手!
1000字范文 > H5分享带缩略图 描述 微信内分享到好友 朋友圈等

H5分享带缩略图 描述 微信内分享到好友 朋友圈等

时间:2019-08-21 12:02:42

相关推荐

H5分享带缩略图 描述 微信内分享到好友 朋友圈等

准备工作

需要一个认证的微信公众号,一定要确定认证在登录微信公众平台https://mp.在公众号设置–>功能设置,填写设置Js接口安全域名

Js安全域名是需要把微信提供的文件,放在指定域名或者目录下面可以访问的。

配置信息

下载微信参考代码,主要是获取signature

http://demo.open./jssdk/sample.zip

在获取signature之前,需要获取accessToken 和 对应的Ticket,这两个方式都比较简单,不在列举生成签名的方式,就在微信的实例代码里面,不在赘述。

注意

获取签名等信息,必须通过服务器返回,不能再前端js生成对应生成的ticket,accessToken,注意要缓存,也有有效期,如果不缓存,访问量大的情况下,微信有可能封号。生成signature所需要的url必须是前端传入的模式,不能写死,写死的话,微信似乎有检测机制,不能正常的分享成功。

前端配置信息

引入微信分享的JS_SDK<script type="text/javascript" src="https://res./open/js/jweixin-1.2.0.js"></script>https://res./open/js/jweixin-1.2.0.js

注意,如果自己的域名模式是https模式,要使用https模式,不然会出现mixed content block,微信js不会执行JS-sdk中的方法要在获取signature之后再执行,不然有可能会执行错误等,同时分享的调用要在wx.ready方法体里面执行,即微信配置都okay的情况下在执行。

示例代码

$.get("获取微信signature的接口", {"url":location.href.split('#').toString()}).done(function (data) {// 注意这里的url,一定要这样写,也就是动态获取,不然也不会成功的。console.log(data);if (data.header.code == 200) {var wx_info = data.body.result.wx_info;if (wx_info.signature != null) {// 配置wx.config({debug: false, // 测试阶段,可以写为true,主要是为了测试是否配置成功appId: wx_info.appId,timestamp: wx_info.timestamp,nonceStr: wx_info.nonceStr,signature: wx_info.signature,jsApiList: ['checkJsApi', 'onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareQZone']});var title = "";var desc = "";// 分享的图片,最好是正方形,不是也没关系,但是一定是http模式,即绝对路径,而不是服务器路劲var imgUrl = "";// 这里的地址可以写死,也可以动态获取,但是一定不能带有微信分享后的参数,不然分享也是失败的var link = "";// 分享给朋友、QQ、微博var shareData = {"imgUrl": imgUrl,"title": title,"desc": desc,'link': link};// 分享到朋友圈var shareToTimeline = {"imgUrl": imgUrl,"title": title, 'link': link,"desc": desc}wx.ready(function() {wx.onMenuShareTimeline(shareToTimeline);wx.onMenuShareAppMessage(shareData);wx.onMenuShareQQ(shareData);wx.onMenuShareQZone(shareData);wx.error(function(res) {alert(res.errMsg);});});}}}).fail(function (msg) {console.log("error:" + msg);});

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。