需求: 定义微信分享 "标题","图片","描述文字","分享链接"
微信分享有着病毒式的推广效果, 今天接触到了公司的这样需求, 写点总结.
1. 阅读微信分享接口文档, 地址:
2. 在页面载入 JS 文件 地址: https://res.wx.qq.com/open/js/jweixin-1.0.0.js 或者 http://res.wx.qq.com/open/js/jweixin-1.0.0.js(按需加载)
3. 通过 config 接口注入权限验证配置 (微信 config 中的值都是后台传入的公众号中的值) 代码:
JavaScript 代码
- wx.config({
- debug: false, // 测试的时候用 true
- appId: data.appId,
- timestamp: data.timestamp,
- nonceStr: data.nonceStr,
- signature: data.signature,
- jsApiList: data.jsApiList,
- });
- <script type="text/javascript">
- var accessUrl = "https://www.caijinquan.cn/share/getMicroMsgInfoCrossDomain.action";
- var sourcePath = Windows.location.href;
- var realPath = encodeURI(sourcePath.split('#')[0]);
- $.JSONP({
- url: accessUrl,
- data: {
- urlPath: realPath
- },
- callbackParameter: "callback",
- success: function(data) {
- if(null != data) {
- wx.config({
- debug: false,
- appId: data.appId,
- timestamp: data.timestamp,
- nonceStr: data.nonceStr,
- signature: data.signature,
- jsApiList: data.jsApiList,
- });
- // alert("appId:"+data.appId)
- // alert("时间戳:"+data.timestamp)
- // alert("随机串:"+data.nonceStr)
- // alert("签名"+data.signature)
- // alert("需要使用的 JS 接口列表"+data.jsApiList)
- wx.ready(function() {
- // 2. 分享接口
- // 2.1 监听 "分享给朋友", 按钮点击, 自定义分享内容及分享结果接口
- wx.onMenuShareAppMessage({
- title: '注册就送 8888 体验金, 千万现金收益等你拿!', // 分享标题
- desc: '财金圈理财是短期高收益的一站式财富管理平台. 资金由支付公司全程托管, 安全, 便捷, 稳健收益', // 分享描述
- link: 'https://static.caijinquan.com/yaoqing/welfare.html', // 分享链接
- imgUrl: 'https://static.caijinquan.com/yaoqing/images_s/share.png', // 分享图标
- type: 'link', // 分享类型, music,video 或 link, 不填默认为 link
- });
- // 2.2 监听 "分享到朋友圈" 按钮点击, 自定义分享内容及分享结果接口
- wx.onMenuShareTimeline({
- title: '注册就送 8888 体验金, 千万现金收益等你拿!', // 分享标题
- link: 'https://static.caijinquan.com/yaoqing/welfare.html', // 分享链接
- imgUrl: 'https://static.caijinquan.com/yaoqing/images_s/share.png', // 分享图标
- });
- // 2.3 监听 "分享到 QQ" 按钮点击, 自定义分享内容及分享结果接口
- wx.onMenuShareQQ({
- title: '注册就送 8888 体验金, 千万现金收益等你拿!', // 分享标题
- desc: '财金圈理财是短期高收益的一站式财富管理平台. 资金由支付公司全程托管, 安全, 便捷, 稳健收益', // 分享描述
- link: 'https://static.caijinquan.com/yaoqing/welfare.html', // 分享链接
- imgUrl: 'https://static.caijinquan.com/yaoqing/images_s/share.png', // 分享图标
- });
- // 2.4 监听 "分享到微博" 按钮点击, 自定义分享内容及分享结果接口
- wx.onMenuShareWeibo({
- title: '注册就送 8888 体验金, 千万现金收益等你拿!', // 分享标题
- desc: '财金圈理财是短期高收益的一站式财富管理平台. 资金由支付公司全程托管, 安全, 便捷, 稳健收益', // 分享描述
- link: 'https://static.caijinquan.com/yaoqing/welfare.html', // 分享链接
- imgUrl: 'https://static.caijinquan.com/yaoqing/images_s/share.png', // 分享图标
- });
- //2.5 监听分享到 QQ 空间
- wx.onMenuShareQZone({
- title: '注册就送 8888 体验金, 千万现金收益等你拿!', // 分享标题
- desc: '财金圈理财是短期高收益的一站式财富管理平台. 资金由支付公司全程托管, 安全, 便捷, 稳健收益', // 分享描述
- link: 'https://static.caijinquan.com/yaoqing/welfare.html', // 分享链接
- imgUrl: 'https://static.caijinquan.com/yaoqing/images_s/share.png', // 分享图标
- });
- }) //ready 结束
- } //if 结束
- }
- });
- </script>
内容不难, 写完这带代码报错了
度娘了一下, 是说公众号中 JS 安全域名不对, 登录公众账号修改后, 分享就 OK 了. 东西不难算是一个进步, 希望和大家多学习!
来源: http://www.qdfuns.com/article/16987/0c483dd26e33c2476c05e6098fec7b94.html