1、安装js文件
npm install weixin-js-sdk --save
2、在main.js中引用
//引入微信js
import wx from 'weixin-js-sdk';
Vue.prototype.$wx = wx;
3、调取后端数据配置wx.config
注意url是当前页面的url,到端口号,如当前页面http://192.168.2.41:9528/#/withPrefabricatedBarCodePage
url则为http://192.168.2.41:9528/
getWXconfig() {
var url = location.href.split("#")[0];
this.$getData("frame/qua/wxuser/getWXconfig?url=" + url, "POST").then(
(res) => {
console.log(res);
this.$wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: res.appId, // 必填,公众号的唯一标识
timestamp: res.timeStamp, // 必填,生成签名的时间戳
nonceStr: res.nonceStr, // 必填,生成签名的随机串
signature: res.signature, // 必填,签名
jsApiList: ["checkJsApi", "scanQRCode"], // 必填,需要使用的JS接口列表
});
}
);
},
4、 以下几个方法都是对官方文档中的例子稍加修改
示例代码:
http://demo.open.weixin.qq.com/jssdk/sample.zip
备注:链接中包含php、java、nodejs以及python的示例代码供第三方参考,第三方切记要对获取的accesstoken以及jsapi_ticket进行缓存以确保不会触发频率限制
//获取微信config配置信息
@PassToken
@ApiOperation(value="")
@ResponseBody
@RequestMapping(value="/getWXconfig",produces="application/json;charset=utf-8",method= RequestMethod.POST)
public Map<String, String> getWXconfig(String url){
String accessToken = getAccessToken();
String jsapi_ticket = getTicket(accessToken);
// 注意 URL 一定要动态获取,不能 hardcode
// String url = "http://192.168.2.127/lxtz/tzjt/essayDetails.html?rowGuid=e855fba1-f80f-7170-ba92-76f842f0418d";
// String url = request.getRequestURL().toString();
// Map<String, String[]> parameterMap = request.getParameterMap();
// String rowGuid = request.getParameter("rowGuid");
// String urlGuid = url+"?rowGuid="+rowGuid;
Map<String, String> ret = Sign.sign(jsapi_ticket, url);
for (Map.Entry entry : ret.entrySet()) {
System.out.println(entry.getKey() + ", " + entry.getValue());
}
ret.put("appId",appid);
return ret;
}
public String getAccessToken(){
String url = "https://api.weixin.qq.com/cgi-bin/token";
Map<String,String> params = new HashMap<>();
params.put("grant_type","client_credential");
params.put("appid",appid);
params.put("secret",appsecret);
// logger.info("获取accessToken接口参数:"+JSONObject.toJSONString(params));
String res = "";
try {
res = HttpUtil.sendGet(url, params);
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
JSONObject obj = JSONObject.parseObject(res);
String access_token = obj.getString("access_token");
return access_token;
}
public String getTicket(String accessToken){
String url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket";
Map<String,String> params = new HashMap<>();
params.put("type","jsapi");
params.put("access_token",accessToken);
logger.info("获取JsapiTicket接口参数:"+JSONObject.toJSONString(params));
String res = "";
try {
res = HttpUtil.sendGet(url, params);
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
JSONObject obj = JSONObject.parseObject(res);
String ticket = obj.getString("ticket");
return ticket;
}
public static Map<String, String> sign(String jsapi_ticket, String url) {
Map<String, String> ret = new HashMap<String, String>();
String nonce_str = create_nonce_str();
String timestamp = create_timestamp();
String string1;
String signature = "";
//注意这里参数名必须全部小写,且必须有序
string1 = "jsapi_ticket=" + jsapi_ticket +
"&noncestr=" + nonce_str +
"×tamp=" + timestamp +
"&url=" + url;
System.out.println(string1);
try
{
MessageDigest crypt = MessageDigest.getInstance("SHA-1");
crypt.reset();
crypt.update(string1.getBytes("UTF-8"));
signature = byteToHex(crypt.digest());
}
catch (NoSuchAlgorithmException e)
{
e.printStackTrace();
}
catch (UnsupportedEncodingException e)
{
e.printStackTrace();
}
// ret.put("appId",appid);
ret.put("url", url);
ret.put("jsapi_ticket", jsapi_ticket);
ret.put("nonceStr", nonce_str);
ret.put("timestamp", timestamp);
ret.put("signature", signature);
return ret;
}