第九篇：微信公众平台开发实战Java版之如何实现自定义分享内容

最新推荐文章于 2023-04-07 17:50:18 发布

Luyifei666

最新推荐文章于 2023-04-07 17:50:18 发布

阅读量278

点赞数

分类专栏：微信公众号

微信公众号专栏收录该内容

10 篇文章 0 订阅

订阅专栏

第一部分：微信JS-SDK介绍

微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。

通过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信用户提供更优质的网页体验。

本次的内容：

实现：分享到朋友圈，qq，qq空间，微信朋友的功能。

基础接口

判断当前客户端版本是否支持指定JS接口

wx.checkJsApi({
    jsApiList: ['chooseImage'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
    success: function(res) {
        // 以键值对的形式返回，可用的api值true，不可用为false
        // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
    }
});

备注：checkJsApi接口是客户端6.0.2新引入的一个预留接口，第一期开放的接口均可不使用checkJsApi来检测。

获取“分享到朋友圈”按钮点击状态及自定义分享内容接口

wx.onMenuShareTimeline({
    title: '', // 分享标题
    link: '', // 分享链接
    imgUrl: '', // 分享图标
    success: function () { 
        // 用户确认分享后执行的回调函数
    },
    cancel: function () { 
        // 用户取消分享后执行的回调函数
    }
});

获取“分享给朋友”按钮点击状态及自定义分享内容接口

wx.onMenuShareAppMessage({
    title: '', // 分享标题
    desc: '', // 分享描述
    link: '', // 分享链接
    imgUrl: '', // 分享图标
    type: '', // 分享类型,music、video或link，不填默认为link
    dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
    success: function () { 
        // 用户确认分享后执行的回调函数
    },
    cancel: function () { 
        // 用户取消分享后执行的回调函数
    }
});

获取“分享到QQ”按钮点击状态及自定义分享内容接口

wx.onMenuShareQQ({
    title: '', // 分享标题
    desc: '', // 分享描述
    link: '', // 分享链接
    imgUrl: '', // 分享图标
    success: function () { 
       // 用户确认分享后执行的回调函数
    },
    cancel: function () { 
       // 用户取消分享后执行的回调函数
    }
});

获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口

wx.onMenuShareWeibo({
    title: '', // 分享标题
    desc: '', // 分享描述
    link: '', // 分享链接
    imgUrl: '', // 分享图标
    success: function () { 
       // 用户确认分享后执行的回调函数
    },
    cancel: function () { 
        // 用户取消分享后执行的回调函数
    }
});

获取“分享到QQ空间”按钮点击状态及自定义分享内容接口

wx.onMenuShareQZone({
    title: '', // 分享标题
    desc: '', // 分享描述
    link: '', // 分享链接
    imgUrl: '', // 分享图标
    success: function () { 
       // 用户确认分享后执行的回调函数
    },
    cancel: function () { 
        // 用户取消分享后执行的回调函数
    }
});

附录2-所有JS接口列表

版本1.0.0接口

onMenuShareTimeline
onMenuShareAppMessage
onMenuShareQQ
onMenuShareWeibo
onMenuShareQZone

附录3-所有菜单项列表

发送给朋友: "menuItem:share:appMessage"
分享到朋友圈: "menuItem:share:timeline"
分享到QQ: "menuItem:share:qq"
分享到Weibo: "menuItem:share:weiboApp"
收藏: "menuItem:favorite"
分享到FB: "menuItem:share:facebook"
分享到 QQ 空间/menuItem:share:QZone

详细的可以参照微信官方的介绍：微信JS-SDK说明文档

第二部分：分享方法的实现。

那么，我们如何来实现这个分享内容呢？

JSSDK使用步骤

步骤一：绑定域名

1. 先登录微信公众平台，登录后可在“开发者中心”查看对应的接口权限。

说明了有这个分享的权限。

2. 进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

js域名，一般不用http这样的开头。

步骤二：引入JS文件

在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.0.0.js

请注意，如果你的页面启用了https，务必引入 https://res.wx.qq.com/open/js/jweixin-1.0.0.js ，否则将无法在iOS9.0以上系统中成功使用JSSDK

如需使用摇一摇周边功能，请引入 jweixin-1.1.0.js

备注：支持使用 AMD/CMD 标准模块加载方法加载

<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

步骤三：通过config接口注入权限验证配置

所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用（同一个url仅需调用一次，对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性，所以使用pushState来实现web app的页面会导致签名失败，此问题会在Android6.2中修复）。

wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: '', // 必填，公众号的唯一标识
    timestamp: , // 必填，生成签名的时间戳
    nonceStr: '', // 必填，生成签名的随机串
    signature: '',// 必填，签名，见附录1
    jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});

注意，我这里只是动态获取，并没有做缓存，如果有需要的同学，需要做一些缓存。

如何获取以上的参数呢？

 
   
 View Code 

注意：以上需要替换成自己的appid和secret 。

步骤四：通过ready接口处理成功验证

wx.ready(function(){

    // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});

根据以上的步骤，我们写了一个页面：

 
   
 View Code 

步骤五：部署到服务器。然后访问到这个页面，用微信扫一扫。然后分享到我们设定的接口。

效果如下：

发给微信朋友的效果：

分享到朋友圈的效果：

分享到qq空间的效果：

分享给朋友的效果：

恭喜你，配置成功！！

其他文章关联：

第一篇：微信公众平台开发实战Java版之了解微信公众平台基础知识以及资料准备

第二篇：微信公众平台开发实战Java版之开启开发者模式，接入微信公众平台开发

第三篇：微信公众平台开发实战Java版之请求消息，响应消息以及事件消息类的封装

第四篇：微信公众平台开发实战Java版之完成消息接受与相应以及消息的处理

第五篇：微信公众平台开发实战Java版之如何获取公众号的access_token以及缓存access_token

第六篇：微信公众平台开发实战Java版之如何自定义微信公众号菜单

第七篇：微信公众平台开发实战Java版之如何获取微信用户基本信息

第八篇：微信公众平台开发实战Java版之如何网页授权获取用户基本信息

第九篇：微信公众平台开发实战Java版之如何实现自定义分享内容

其他：Web开发须知：URL编码与解码

Luyifei666

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
第九篇：微信公众平台开发实战Java版之如何实现自定义分享内容

第一部分：微信JS-SDK介绍微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。通过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信用户提供更优质的网页体验。本次的内容：实现：分享到朋友圈，qq，qq空间，微信朋友的功能。基础接口判断当前客户端版本是否...
复制链接

扫一扫