H5网页实现微信分享功能
-
一，首先在公众号管理后台“公众号设置”的“功能设置”里填写JS接口安全域名，域名需要通过ICP备案，没有备案域名可以用SAE、BAE等平台。此外，自定义分享功能需要通过微信认证才能使用，没有认证的可以跟关系好的朋友借用权限，在他的JS接口安全域名设置这里填上你的域名和共享同一个开发者ID。
-
二，在需要调用JS接口的页面引入微信JSSDK的JS文件 。这个文件在需要分享的页面是必须要引用的，单独特别重申一下，其他方面请阅读官方文档。
<script type="text/javascript"
src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script type="text/javascript">
/*
* 注意：
* 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' ]
});
}
}
});
});
</script>
<script type="text/javascript">
/*
* 注意：
* 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);
});
</script>
- 三、需要一个提供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<String, String> 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<String, String> js_data = JS_Sign.getJSSignMapResult(accesstoken,
url, request);
return js_data;
}
}
详细代码请参考该项目>>传送门
网友评论