微信公众号网页分享功能开发

大家好，又见面了，我是你们的朋友全栈君。

现在每天都可以看到很多微信分享的链接上面有网站或者商家的自定义的分享标题，和分享链接的描述及分享出去的图像，例如下面的分享出去的链接：

     上面这个是微信的js-SDK页面分享给微信好友在聊天列表中显示的视觉效果。

      微信JS-SDK Demo :这个是微信网页分享出去的标题。

     微信JS-SDK,帮助第三方为用户提供更优质的移动web服务：这个是被分享的这个页面的分享描述。

     微信图标：这个就是自己网站或者自己自定义的图像。

     上面这个是微信官方网页分享出去的定义描述，那么怎样实现自己网站网页的自定义分享的标题，描述及分享出去的显示图片呢，下面就具体的来探讨一下微信网页第三方分享自定的实现方式。

     关于微信网页分享自定义主要有两方面的工作需要我们来做，一是：分享页面的js分享代码的编写，二是：微信分享网页的链接地址签名。

     首先来看一下网页的连接地址签名，这个功能主要是在服务端来时实现。

     第一步：基础数据的准备，需要如下数据信息：

     APPID:微信公众号的id; APP_SECRECT:公众号号的密钥。签名的网站域名（这个建议配置在配置文件中）。

     第二步：微信签名数据的准备：

    appid,secret,url将这三个参数放入map中， 键值为：appid=微信公众号的id，secret=APP_SECRECT，url=网站的域名+网页的请求地址+请求的参数。

    代码的实现方式如下：

      1. controller层的代码实现： 

1. @RequestMapping(
   “cover”)

2. public String identifyCover(HttpServletRequest request, HttpServletResponse response)

3. //微信分享授权开始

4. String appId = ;
   //取项目中配置的公众号id

5. String secret = ;
   //取项目中配置的公众号密钥

6. //例如我们有一个分享的链接为：http://test.weixinfwenx.cn/project/fenxiang.do?id=1&name=2;

7. //那么domainAddr = http://test.weixinfwenx.cn,这个可以动态的配置在项目里，方便测试环境和生产

8. //域名的切换

9. String domainAddr =
   “”;
   //项目中配置的网站的域名

10. //这个取的是链接上的参数，例如在上面的这个链接中，id=1&name=2就是我们要动态去的参数，可能有人

11. //会想到，这个两个参数直接写在地址中不是挺简单的为啥还要动态去获取这个参数呢；在这里我们引出了一

12. //个微信二次分享的问题，就是别人转发的链接给你，然后你再转发给别人，在你转发给别人后这个链接的签

13. //名就会失败，为啥呢，因为经过再次转发的链接，微信会自动加上一些自己的参数，这样会导致页面上微信

14. //分享的链接和签名的链接不一致。直接导致自定义的标题和链接描述，显示失败，失败原因是微信默认的在

15. //我们的分享链接上加上了&from=singlemessage。

16. String str = request.getQueryString();

17. Map<String, String> map =
    new HashMap<String, String>();

18. map.put(
    “appid”, appId);

19. map.put(
    “secret”, secret);

20. String url = domainAddr +
    “/project/fenxiang.do?”+str; map.put(
    “url”, url);

21. //这个地址是传给页面使用

22. request.setAttribute(
    “fenxurl”, url);

23. //开始微信分享链接签名

24. Map<String, String> params = weixinService.weixinjsIntefaceSign(map);

25. request.setAttribute(
    “params”, params);

26. return
    “自己的页面”;

 2.service层的实现代码：

   接口：  

1. public
   interface weixinService{

2. /**

3. * @Title: weixinjsIntefaceSign

4. * @Description: 微信js接口授权

5. * @param map

6. * @return

7. * @return: Map<String,String>

8. */

9. public Map<String,String> weixinjsIntefaceSign(Map<String,String> map);

接口实现类：

1. public
   class weixinServiceImpl implements weixinService{

2. public Map<String, String> weixinjsIntefaceSign(Map<String, String> map){

3. //查看缓存数据是否存在

4. String cacheAccess_token = jedis.get(
   “access_token”);

5. String cacheTicket = jedis.get(
   “ticket”);

6. //取出来为空的话则说明cacheAccess_token缓存过期，重新获取

7. if(
   null == cacheAccess_token){

8. ///start

9. //获取cacheAccess_token

10. //这段代码实际开发过程中要写成一个方法，我这里为了演示方便写在了一起。

11. StringBuffer buffer =
    new StringBuffer();

12. buffer.append(
    “https://api.weixin.qq.com/cgi-bin/token?”);

13. buffer.append(
    “appid=”+map.get(
    “appid”));

14. buffer.append(
    “&secret=”+map.get(
    “secret”));

15. buffer.append(
    “&grant_type=client_credential”);

16. String resultMsg = SendUtils.sendGet(buffer.toString(),
    “UTF-8”);

17. / end

19. JSONObject json =
    new JSONObject(resultMsg);

20. cacheAccess_token = json.getString(
    “access_token”);

21. jedis.set(
    “access_token”,cacheAccess_token,
    “NX”,
    “EX”,
    3600);
    //单位是秒

22. }

23. //取出来为空的话则说明cacheTicket缓存过期，重新获取

24. if(
    null == cacheTicket){

25. // start

26. 获得jsapi_ticket

27. StringBuffer buffer =
    new StringBuffer();

28. buffer.append(
    “https://api.weixin.qq.com/cgi-bin/ticket/getticket?”);

29. buffer.append(
    “access_token=”+access_token);

30. buffer.append(
    “&type=jsapi”);

31. String ticket = SendUtils.sendGet(buffer.toString(),
    “UTF-8”);

32. / end

34. JSONObject json2 =
    new JSONObject(ticket);

35. cacheTicket = json2.getString(
    “ticket”);

36. jedis.set(
    “ticket”,cacheTicket,
    “NX”,
    “EX”,
    3600);
    //单位是秒

37. }

38. //生成签名

39. SortedMap<Object,Object> params =
    new TreeMap<Object,Object>();

40. params.put(
    “timestamp”, Long.toString(
    new Date().getTime()/
    1000));

41. params.put(
    “noncestr”,
    this.CreateNoncestr());

42. params.put(
    “jsapi_ticket”,cacheTicket);

43. params.put(
    “url”,map.get(
    “url”));
    //url地址

44. StringBuffer sb =
    new StringBuffer();

45. Set es = params.entrySet();

46. Iterator it = es.iterator();

47. while(it.hasNext()) {

48. Map.Entry entry = (Map.Entry)it.next();

49. String k = (String)entry.getKey();

50. Object v = entry.getValue();

51. sb.append(k +
    “=” + v +
    “&”);

52. }

53. String signStr = sb.toString().substring(
    0, sb.toString().length()-
    1);

54. String sign = Sha1.getSha1Sign(signStr);
    //签名

55. Map<String, String> result =
    new HashMap<String,String>();

56. result.put(
    “timestamp”,(String)params.get(
    “timestamp”));

57. result.put(
    “noncestr”, (String)params.get(
    “noncestr”));

58. result.put(
    “signature”, sign);

59. result.put(
    “appId”,map.get(
    “appid”));

60. return result;

62. return
    null;

64. }

65. private String CreateNoncestr() {

66. String chars =
    “abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789”;

67. String res =
    “”;

68. for (
    int i =
    0; i <
    16; i++) {

69. Random rd =
    new Random();

70. res += chars.charAt(rd.nextInt(chars.length() –
    1));

71. }

72. return res;

73. }

74. }

辅助工具类：

1. /**

2. *

3. * 加密工具类

4. *

5. */

6. public
   class Sha1 {

7. public static String getSha1Sign(String decript) {

8. try {

9. MessageDigest digest = java.security.MessageDigest.getInstance(
   “SHA-1”);

10. try {

11. digest.update(decript.getBytes(
    “UTF-8”));

12. }
    catch (UnsupportedEncodingException e) {

13. // TODO Auto-generated catch block

14. e.printStackTrace();

15. }

16. byte messageDigest[] = digest.digest();

17. // Create Hex String

18. StringBuffer hexString =
    new StringBuffer();

19. // 字节数组转换为 十六进制 数

20. for (
    int i =
    0; i < messageDigest.length; i++) {

21. String shaHex = Integer.toHexString(messageDigest[i] &
    0xFF);

22. if (shaHex.length() <
    2) {

23. hexString.append(
    0);

24. }

25. hexString.append(shaHex);

26. }

27. return hexString.toString();

29. }
    catch (NoSuchAlgorithmException e) {

30. e.printStackTrace();

31. }

32. return
    “”;

33. }

34. }

http请求工具类：

1. /**

2. * http请求工具类

3. *

4. */

5. public
   class SendUtils {

6. public static String sendGet(String url,String charset){

7. //新建客户端

8. HttpClient httpclient =
   new HttpClient();

9. GetMethod getMethod =
   new GetMethod(url);

10. httpclient.getParams().setParameter(HttpMethodParams.HTTP_CONTENT_CHARSET, charset);

11. httpclient.executeMethod(getMethod);

12. String responseMsg = getMethod.getResponseBodyAsString();

13. return responseMsg;

14. }

15. }

 以上是服务器端的微信签名的实现代码，下面介绍一下分享页面中js的编写。

  第一步引入微信的js文件：

   <script src=”https://res.wx.qq.com/open/js/jweixin-1.0.0.js”></script>

 第二步：  

1. wx.config({

2. debug:
   false,

3. appId:
   ‘${params.appId}’,

4. timestamp:
   ‘${params.timestamp}’,

5. nonceStr:
   ‘${params.noncestr}’,

6. signature:
   ‘${params.signature}’,

7. jsApiList: [

8. ‘onMenuShareTimeline’,

9. ‘onMenuShareAppMessage’,

10. ‘onMenuShareQQ’,

11. ‘onMenuShareWeibo’,

12. ‘onMenuShareQZone’

13. ]

14. });

15. wx.ready(
    function(){

16. wx.checkJsApi({

17. jsApiList: [

18. ‘onMenuShareTimeline’,

19. ‘onMenuShareAppMessage’,

20. ‘onMenuShareQQ’,

21. ‘onMenuShareWeibo’,

22. ‘onMenuShareQZone’

23. ]

24. });

25. wx.checkJsApi({

26. jsApiList: [

27. ‘onMenuShareTimeline’,

28. ‘onMenuShareAppMessage’,

29. ‘onMenuShareQQ’,

30. ‘onMenuShareWeibo’,

31. ‘onMenuShareQZone’

32. ]

33. });

34. /*分享到朋友圈*/

35. wx.onMenuShareTimeline({

36. title:
    ‘计划书’,
    // 分享标题

37. desc:
    ‘保险让生活更美好！’,
    // 分享描述

38. link:
    ‘${fenxurl}’,
    // 分享链接

39. imgUrl:
    ‘${params.urlg}/PF_IDENTIFY/Cacheable/image/business/plan-cover/product_img.png’,
    // 分享图标

40. success:
    function () {

41. // 用户确认分享后执行的回调函数

42. },

43. cancel:
    function () {

44. // 用户取消分享后执行的回调函数

45. }

46. });

47. /*分享给朋友*/

48. wx.onMenuShareAppMessage({

49. title:
    ‘计划书’,
    // 分享标题

50. desc:
    ‘保险让生活更美好！’,
    // 分享描述

51. link:
    ‘${fenxurl}’,
    // 分享链接

52. imgUrl:
    ‘${params.urlg}/PF_IDENTIFY/Cacheable/image/business/plan-cover/product_img.png’,
    // 分享图标

53. type:
    ‘link’,
    // 分享类型,music、video或link，不填默认为link

54. dataUrl:
    ”,
    // 如果type是music或video，则要提供数据链接，默认为空

55. success:
    function () {

56. // 用户确认分享后执行的回调函数

57. alert(
    “您已分享”);

58. },

59. cancel:
    function () {

60. // 用户取消分享后执行的回调函数

61. alert(
    ‘您已取消分享’);

62. }

63. });

64. wx.onMenuShareQQ({

65. title:
    ‘计划书’,
    // 分享标题

66. desc:
    ‘保险让生活更美好！’,
    // 分享描述

67. link:
    ‘${fenxurl}’,
    // 分享链接

68. imgUrl:
    ‘${params.urlg}/PF_IDENTIFY/Cacheable/image/business/plan-cover/product_img.png’,
    // 分享图标

69. success:
    function () {

70. // 用户确认分享后执行的回调函数

71. },

72. cancel:
    function () {

73. // 用户取消分享后执行的回调函数

74. }

75. });

76. wx.onMenuShareWeibo({

77. title:
    ‘计划书’,
    // 分享标题

78. desc:
    ‘保险让生活更美好！’,
    // 分享描述

79. link:
    ‘${fenxurl}’,
    // 分享链接

80. imgUrl:
    ‘${params.urlg}/PF_IDENTIFY/Cacheable/image/business/plan-cover/product_img.png’,
    // 分享图标

81. success:
    function () {

82. // 用户确认分享后执行的回调函数

83. },

84. cancel:
    function () {

85. // 用户取消分享后执行的回调函数

86. }

87. });

88. wx.onMenuShareQZone({

89. title:
    ‘计划书’,
    // 分享标题

90. desc:
    ‘保险让生活更美好！’,
    // 分享描述

91. link:
    ‘${fenxurl}’,
    // 分享链接

92. imgUrl:
    ‘${params.urlg}/PF_IDENTIFY/Cacheable/image/business/plan-cover/product_img.png’,
    // 分享图标

93. success:
    function () {

94. // 用户确认分享后执行的回调函数

95. },

96. cancel:
    function () {

97. // 用户取消分享后执行的回调函数

98. }

99. });

100. });

至此整个微信的整个分享开发完成，上面的这些js文件，都必须放在页面上。