微信官方文档
步骤一：绑定域名
先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
备注：登录后可在“开发者中心”查看对应的接口权限。
步骤二：引入JS文件
在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.2.0.js
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
备注：支持使用 AMD/CMD 标准模块加载方法加载
步骤三：通过config接口注入权限验证配置
所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用（同一个url仅需调用一次，对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性，所以使用pushState来实现web app的页面会导致签名失败，此问题会在Android6.2中修复）。
步骤四：通过ready接口处理成功验证
wx.ready(function(){
// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});
步骤五：通过error接口处理失败验证
wx.error(function(res){
// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
});
接口调用说明
所有接口通过wx对象(也可使用jWeixin对象)来调用，参数是一个对象，除了每个接口本身需要传的参数之外，还有以下通用参数：
1.success：接口调用成功时执行的回调函数。
2.fail：接口调用失败时执行的回调函数。
3.complete：接口调用完成时执行的回调函数，无论成功或失败都会执行。
4.cancel：用户点击取消时的回调函数，仅部分有用户取消操作的api才会用到。
5.trigger: 监听Menu中的按钮点击时触发的方法，该方法仅支持Menu中的相关接口。
备注：不要尝试在trigger中使用ajax异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返回。
以上几个函数都带有一个参数，类型为对象，其中除了每个接口本身返回的数据之外，还有一个通用属性errMsg，其值格式如下：
调用成功时：”xxx:ok” ，其中xxx为调用的接口名
用户取消时：”xxx:cancel”，其中xxx为调用的接口名
调用失败时：其值为具体错误信息
接下来用开源框架weixin4j进行开发
一、先引入maven依赖
<dependency>
<groupId>com.foxinmy</groupId>
<artifactId>weixin4j-mp</artifactId>
<version>RELEASE</version>
</dependency>
二、在classpath路径下创建weixin4j.properties
#weixin4j.account={"id":"wxf0838883619fb11d","secret":"facf775150fb75023bcd4607a304c89d","components":[{"id":"应用组件的id","secret":"应用组件的secret"}],"mchId":"微信商户号 微信支付时需要填入","certificateKey":"加载支付证书文件的密码 如果不填写则默认获取mchId作为密码","certificateFile":"微信支付某些接口(退款等)需要的ca证书存放的路径,classpath路径下可以这么写classpath:xxxxx.p12,为空时则获取classpath根目录下的ca.p12文件","paySignKey":"微信支付中调用API的密钥 微信支付时需要填入"}
# weixin4j的配置文件:如果没有请构造相应参数传入 如果有请保证在classpath的根目录下
# 公众号信息 请按需填写
weixin4j.account={"id":"公众号APPID","secret":"公众号APPsecret",\
"components":[{"id":"应用组件的id","secret":"应用组件的secret"}],\
"mchId":"商户ID",\
"certificateKey":"默认商户ID",\
"certificateFile":"classpath:apiclient_cert.p12//退款的证书文件路径",\
"paySignKey":"支付密钥"}
三、在sping的配置文件中配置weixin4j的核心API
<!-- 注入weixin4j核心类，并使用redis管理token -->
<bean id="weixinProxy" class="com.foxinmy.weixin4j.mp.WeixinProxy">
<constructor-arg>
<bean class="com.foxinmy.weixin4j.cache.RedisCacheStorager" />
</constructor-arg>
</bean>
<!-- 微信支付接口代理 start -->
<bean id="weixinPayProxy" class="com.foxinmy.weixin4j.payment.WeixinPayProxy" />
<!-- 微信支付接口代理 end -->
四、开始写后台接口
package net.seedor.controller.wechat;
import com.foxinmy.weixin4j.exception.WeixinException;
import com.foxinmy.weixin4j.jssdk.JSSDKAPI;
import com.foxinmy.weixin4j.jssdk.JSSDKConfigurator;
import com.foxinmy.weixin4j.mp.WeixinProxy;
import com.foxinmy.weixin4j.token.TokenManager;
import com.foxinmy.weixin4j.type.TicketType;
import net.seedor.pojo.ExecuteResult;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;
/**
* Date : 2018/4/11
* Author : zp.x
* Email : Z9Show@163.com
* 微信分享
*/
@CrossOrigin(origins = "*", maxAge = 3600)
@RestController
@RequestMapping("/js_sdk")
public class WeChatJSSDKController {
private final Logger log = LoggerFactory.getLogger(this.getClass());
@Autowired
private WeixinProxy weixinProxy; //注入weixin4j核心API
@RequestMapping(value = "/config" , method = RequestMethod.GET)
public ResponseEntity<ExecuteResult> getJssdkJsonConfig(@RequestParam("url") String url) {
JSSDKConfigurator jssdkConfigurator = jssdkConfigurator();
TokenManager ticketTokenManager = ticketTokenManager();
try {
//将公众号开发中所有的api全部添加进去。
jssdkConfigurator.apis(JSSDKAPI.MP_ALL_APIS);
//生成配置信息
String jsonConfig = jssdkConfigurator.toJSONConfig(url);
//weixin4j在生成签名的时候没有提供ticket打印功能，如果想使用微信官方的签名校验，请使用票据管理器获取ticket票据
log.info("jssdk ticket:" + ticketTokenManager.getAccessToken());
result.setData(jsonConfig);
} catch (WeixinException e) {
e.printStackTrace();
return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(result);
}
return ResponseEntity.ok(result);
}
public TokenManager ticketTokenManager() {
//通过WeixinProxy对象获取Jsapi的票据管理对象
return weixinProxy.getTicketManager(TicketType.jsapi);
}
public JSSDKConfigurator jssdkConfigurator() {
//new一个JSSDK配置工具，该工具需要传入票据管理对象，这里传入的同时直接开启JSSDK的debug模式
return new JSSDKConfigurator(ticketTokenManager()).debugMode();
}
}
五、在需要自定义分享的页面写JS
<%-- 微信分享JS --%>
<script type="text/javascript">
$(function (){
var config = {
debug: '', // 开启调试模式
appId: '', // 必填，公众号的唯一标识
timestamp: '', // 必填，生成签名的时间戳
nonceStr: '', // 必填，生成签名的随机串
signature: '',// 必填，签名，见附录1
jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
};
$.ajax({
url: '<%=basePath %>js_sdk/config',
type: 'GET',
dataType: 'json',
async:false,
data: {url: window.location.href}
}).success(function(date){
var json = JSON.parse(date.data);
config.debug = false;
config.appId = json.appId;
config.timestamp = json.timestamp;
config.nonceStr = json.nonceStr;
config.signature = json.signature;
config.jsApiList = json.jsApiList;
});
wx.config(config);
wx.ready(function(){
// 微信分享的数据
var shareData = {
title: '百度', // 分享标题
link: 'www.baidu.com',//window.location.href, // 分享链接
imgUrl: '', // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
alert("分享成功");
},
cancel: function () {
// 用户取消分享后执行的回调函数
alert("不分享拉倒");
}
}
//分享接口
<%-- 发送给好友 --%>
wx.onMenuShareAppMessage(shareData);
<%-- 分享到朋友圈 --%>
wx.onMenuShareTimeline(shareData);
<%-- 分享到QQ --%>
wx.onMenuShareQQ(shareData);
<%-- 分享到weibo --%>
wx.onMenuShareWeibo(shareData);
<%-- 分享到QQ空间 --%>
wx.onMenuShareQZone(shareData);
});
wx.error(function(res){
console.log("error:" + res);
});
})
</script>
==end==
