js使用微信分享功能

在使用微信分享(包括微信api里的其他方法)之前，需要有一些准备、比如要准备 appId、timestamp、nonceStr、signature 这四个数据，只有在有这四个字段后，我们才可以去使用微信的一些方法和功能，
但这些东西是不能写死的，得是活的，所以就麻烦后端同学配合了一下，将数据帮忙生成了一下，但在调研阶段还是使用的手动生成，生成后他把得到的这几个字段发给我，我拿到后放到对应的位置就可以了。但是在开发的时候，这个就要改成一个接口，通过ajax给我返回这些我需要的数据，当接口返回的数据被放到下面代码中放的字段位置后，如果不报错，就说明是ok的了。

准备工作代码：

 wx.config({debug: false, // 为true时，就是调试模式，会弹出一些信息，正确、错误都会弹。appId: ''xxxxxxxxx'', // 必填，公众号的唯一标识timestamp: ''1537372373'', // 必填，生成签名的时间戳nonceStr: ''sjwufnskfnskjfhjksfkjsfkjshfwk'', // 必填，生成签名的随机串signature: " 1ejsjsdjffklj0dj3uds3h3e",// 必填，签名，// 必填，把要使用的方法名放到这个数组中。jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage','onMenuShareQQ','onMenuShareQZone']});

这里需要注意的是，signature这个字段一定要生成正确，不然的话，就会报signature无效，就没法使用微信方法了，这个签名的生成需要根据当前页面url去生成，所以，一定要保证url的正确。

微信分享开放的几个方法有：分享给朋友、分享到朋友圈、分享到QQ、分享到QQ空间这四个方法，其他的暂时没有开放。

如何自定义分享内容呢？

wx.ready(function(){wx.checkJsApi({jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage','onMenuShareQQ','onMenuShareQZone'],success: function (res) { // alert(JSON.stringify(res));}});
}

这里是校验jsApiList的，如果可以使用，就会弹出xxxx:true这种提示，说明是可以使用这些方法的。

 // 分享到朋友圈
wx.onMenuShareTimeline({title:"宏远时代体育", // 分享标题link:'', // 分享链接imgUrl:"xxxxxxxxx",success: function (res) {},cancel: function (res) {},fail: function (res) {// alert(JSON.stringify(res));}});

// 分享给朋友
wx.onMenuShareAppMessage({title:"宏远时代体育", // 分享标题desc:'第一届SuperBA宏超篮球联赛，快来关注吧！', // 分享描述link:'', // 分享链接imgUrl: "xxxxxxxxxxxxxxx", // 分享图标type: '', // 分享类型,music、video或link，不填默认为linkdataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空success: function () {// 用户确认分享后执行的回调函数},cancel: function () {// 用户取消分享后执行的回调函数}
});

 // 分享到QQ
wx.onMenuShareQQ({title: "宏远时代体育", // 分享标题desc: '第一届SuperBA宏超篮球联赛，快来关注吧！', // 分享描述link: '', // 分享链接imgUrl: "xxxxxxxxxxxxxxx", // 分享图标success: function () {// 用户确认分享后执行的回调函数},cancel: function () {// 用户取消分享后执行的回调函数}});

 // 分享到QQ空间
wx.onMenuShareQZone({title: "宏远时代体育", // 分享标题desc: '第一届SuperBA宏超篮球联赛，快来关注吧！', // 分享描述link: '', // 分享链接imgUrl: "xxxxxxxxxxxxxxx", // 分享图标success: function () {// 用户确认分享后执行的回调函数},cancel: function () {// 用户取消分享后执行的回调函数}});

以上四个就是目前微信开放的几个分享方法，都有一个共同点，就是可以自定义title、图片等字段，区别是分享给朋友、qq、qq空间的时候，可以自定义分享描述，但是分享到朋友圈是没有这个字段的，这个没有自定义分享的链接，因为分享的就是当前页面，如果写了自定义链接以后，就无法二次分享了，因为这个链接写死的话，分享出去的地址，微信会默认增加参数，分别是fom(分享到哪里)和isappinstalled(代表用户是否安装了app)。

除了签名那块的问题之外，需要注意的几个问题：
1、苹果手机分享出去的时候，是有isappinstalled参数的，但是安卓手机分享出去，就只有form字段，没有isappinstalled字段的。
这个问题是因为我们有个需求，就是要区分是不是分享出去的链接，如果是，就显示个东西，当时开发测试时，只用了苹果手机去测，所以链接里面是两个参数都有，写了个判断就是有form并且有isappinstalled，后来在安卓上测试时，并没有执行这个判断里要执行的程序，就看了一下分享链接，果然没有isappinstalled，所以以后使用的时候要注意一下这一点。
2、分享到qq的时候，有时候是不会有自定义的图片的，他会默认去显示该公众号的二维码，这里也需要注意下。
3、一定要注意的是，微信公众号一定一定要配置js安全域名，否则分享是有问题的。比如自定义的一些内容无法显示。

js使用微信分享功能相关推荐

Java + JS实现微信分享功能
随着腾讯帝国的强大,越来越多的APP.第三方平台需要倚靠腾讯的产品发展壮大了.微信拥有上十亿用户基础,各大小公司自然不会放过这么优质的平台,所以现在以及未来都会有很多很多与微信集成的地方,比如今天演示 ...
微信分享功能问题-描述内容换行，导致js加载失败
jsContent内容存在换行符,导致js处理失败, 解决办法,在后台接口中替换'/r/n'为空,并截取前30位 weiXinJsSdk.setSharcontent(StringUtils.isNo ...
服务器静态页面分享微信,JS中静态页面如何实现微信分享功能
JS中静态页面如何实现微信分享功能发布时间:2021-07-06 11:09:02 来源:亿速云阅读:65 作者:小新这篇文章主要介绍了JS中静态页面如何实现微信分享功能,具有一定借鉴价值,感兴 ...
centos + nodejs + egg2.x 开发微信分享功能
前言近期把自用的微信公众号微信分享模块从 php 修改为 nodejs 的版本,虽然这是一个很小的功能,但仍然选择了 egg 框架,也算是为未来继续开发公众号,做点扩展的准备. 本文章仅为项目介绍, ...
vue项目做微信分享功能
vue项目做微信分享功能安装sdk npm install weixin-js-sdk --save 方法 1.新建js文件wxapi.js 2.在wxapi.js中引入sdk以及配置一些基本信息( ...
vue 如何调用微信分享_Vue开发添加微信分享功能（全局分享）
在Vue4.0开发微信公众号的时候,需要做微信分享功能.这个功能其实还算简单,具体的思路如下: 1.安装微信JSSDK和Axios(axios是http请求插件) 2.向后台请求微信配置参数 3.初始 ...
2015最新微信分享功能开发，自定义分享内容。
在2015年之前很长一段时间,微信分享功能,只需要页面埋几段js代码即可捕获用户点击分享按钮的事情,并且自定义. 但后来微信的新版本里已经屏蔽了次方法直接调用分享接口需要在服务端坐一点开发工作. 当 ...
java对接微信分享_Java编程调用微信分享功能示例
本文实例讲述了Java编程调用微信分享功能.分享给大家供大家参考,具体如下: 这篇文章介绍如何使用java开发微信分享功能,因为工作,已经开发完成,可使用. 如果想要自定义微信的分享功能,首先在自己的 ...
微信分享功能，手机分享图片不显示
问题原因猜想: a.图片大小和尺寸太大出不来:图片是150X150 的,近40K,后来给制作重新做图,30X30的10k不到,分享图片大小最好不要超过32k ,尺寸100x100以上就行,别太大了,太 ...
java如何调用微信功能_Java编程调用微信分享功能示例
本文实例讲述了java编程调用微信分享功能.分享给大家供大家参考,具体如下: 这篇文章介绍如何使用java开发微信分享功能,因为工作,已经开发完成,可使用. 如果想要自定义微信的分享功能,首先在自己的 ...

js使用微信分享功能

js使用微信分享功能相关推荐

最新文章

热门文章