H5网页实现微信分享功能

一，首先在公众号管理后台“公众号设置”的“功能设置”里填写JS接口安全域名，域名需要通过ICP备案，没有备案域名可以用SAE、BAE等平台。此外，自定义分享功能需要通过微信认证才能使用，没有认证的可以跟关系好的朋友借用权限，在他的JS接口安全域名设置这里填上你的域名和共享同一个开发者ID。

二，在需要调用JS接口的页面引入微信JSSDK的JS文件 。这个文件在需要分享的页面是必须要引用的，单独特别重申一下，其他方面请阅读官方文档。

/*

* 注意：

* 1. 所有的JS接口只能在公众号绑定的域名下调用，公众号开发者需要先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

* 2. 如果发现在 Android 不能分享自定义内容，请到官网下载最新的包覆盖安装，Android 自定义分享接口需升级至 6.0.2.58 版本及以上。

* 3. 常见问题及完整 JS-SDK 文档地址：http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html

*

* 开发中遇到问题详见文档“附录5-常见错误及解决办法”解决，如仍未能解决可通过以下渠道反馈：

* 邮箱地址：weixin-open@qq.com

* 邮件主题：【微信JS-SDK反馈】具体问题

* 邮件内容说明：用简明的语言描述问题所在，并交代清楚遇到该问题的场景，可附上截屏图片，微信团队会尽快处理你的反馈。

*/

$(function() {

var url = location.href.split('#')[0];

//alert(url);

$.ajax({

url : "wap_sign_signature.htm",

data : {

"url" : url

},

dataType : "json",

timeout : 5000,

error : function(XMLHttpRequest, textStatus, errorThrown) {

if (textStatus == "timeout") { // 请求超时

} else {

}

},

success : function(data, textStatus) {

if (textStatus == "success") { // 请求成功

//alert(data.nonceStr);

//alert(data.timestamp);

//alert(data.signature);

wx.config({

debug : false,

appId : 'wxc4cf8e62667f92ea',

timestamp : data.timestamp,

nonceStr : data.nonceStr,

signature : data.signature,

jsApiList : [ 'onMenuShareAppMessage',

'onMenuShareTimeline' ]

});

}

}

});

});

/*

* 注意：

* 1. 所有的JS接口只能在公众号绑定的域名下调用，公众号开发者需要先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

* 2. 如果发现在 Android 不能分享自定义内容，请到官网下载最新的包覆盖安装，Android 自定义分享接口需升级至 6.0.2.58 版本及以上。

* 3. 完整 JS-SDK 文档地址：http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html

*

* 如有问题请通过以下渠道反馈：

* 邮箱地址：weixin-open@qq.com

* 邮件主题：【微信JS-SDK反馈】具体问题

* 邮件内容说明：用简明的语言描述问题所在，并交代清楚遇到该问题的场景，可附上截屏图片，微信团队会尽快处理你的反馈。

*/

// 发送给朋友并返回结果

/* wx.checkJsApi({

jsApiList: ['onMenuShareAppMessage','onMenuShareTimeline'],

success: function(res) {

alert(reg);

}})

// 以键值对的形式返回，可用的api值true，不可用为false// 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}});

}) */

wx.ready(function() {

/* wx.checkJsApi({

jsApiList: ['onMenuShareAppMessage'],

success:function(res){

alert(res.checkResult.chooseImage);

}

}) ; */

var title = "魔法妈咪学院入学啦！好妈咪快进来！";

var myurl = "http://diy-haier.highset.cn/index.jsp";

//分享给朋友

wx.onMenuShareAppMessage({

title : title, // 分享标题

desc : '海尔定制母婴家电，让你魔法加身，搞定养娃的大问题！', // 分享描述

link : myurl, // 分享链接

imgUrl : 'http://diy-haier.highset.cn/fx.jpg', // 分享图标

type : 'link', // 分享类型,music、video或link，不填默认为link

success : function() {

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

},

cancel : function() {

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

}

});

wx.onMenuShareTimeline({

title : title, // 分享标题

link : myurl, // 分享链接

imgUrl : 'http://diy-haier.highset.cn/fx.jpg', // 分享图标

success : function() {

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

},

cancel : function() {

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

}

});

});

wx.error(function(res) {

alert(res.errMsg);

});

三、需要一个提供appid的token认证的服务，

package cn.com.highset.controller;

import java.util.Map;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RequestMethod;

import org.springframework.web.bind.annotation.ResponseBody;

import cn.com.highset.weixin.util.Constants;

import cn.com.highset.weixin.util.JS_Sign;

import cn.com.sunnet.wx.api.WeiXinUtil;

@Controller

public class WeixinController {

/**

* 获取微信签名

*

*/

@RequestMapping(value = "wap_sign_signature.htm", method = {

RequestMethod.GET, RequestMethod.POST })

@ResponseBody

public Map WapSignSignatureAction(String url,

HttpServletRequest request, HttpServletResponse response)

throws Exception {

String accesstoken = (String) request.getSession().getAttribute(

"accesstoken_session");

if (accesstoken == null || "".equals(accesstoken)) {

WeiXinUtil util = new WeiXinUtil(Constants.APPID,

Constants.AppSecret);

accesstoken = util.getAccessToken();

request.getSession().setAttribute("accesstoken_session",

accesstoken);

request.getSession().setMaxInactiveInterval(7200);

}

Map js_data = JS_Sign.getJSSignMapResult(accesstoken,

url, request);

return js_data;

}

}

详细代码请参考该项目>>传送门