大家好,又见面了,我是你们的朋友全栈君。
微信网页开发
JS-SDK说明文档:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#0
绑定域名
登录微信公众平台进入“公众号设置”->“功能设置”,填写“JS接口安全域名”;设置JS接口安全域名后,公众号开发者可在该域名下调用微信开放的JS接口;
引入JS文件
在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.4.0.js
如需进一步提升服务稳定性,当上述资源不可访问时,可改访问:http://res2.wx.qq.com/open/js/jweixin-1.4.0.js (支持https)。
通过config接口注入权限验证配置
所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用(同一个url仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性,所以使用pushState来实现web app的页面会导致签名失败,此问题会在Android6.2中修复)。
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: '', // 必填,公众号的唯一标识
timestamp: , // 必填,生成签名的时间戳
nonceStr: '', // 必填,生成签名的随机串
signature: '',// 必填,签名
jsApiList: [] // 必填,需要使用的JS接口列表
});
通过ready接口处理成功验证
wx.ready(function(){
// config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
});
通过error接口处理失败验证
wx.error(function(res){
// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
});
接口调用说明
所有接口通过wx对象(也可使用jWeixin对象)来调用,参数是一个对象,除了每个接口本身需要传的参数之外,还有以下通用参数:
- success:接口调用成功时执行的回调函数。
- fail:接口调用失败时执行的回调函数。
- complete:接口调用完成时执行的回调函数,无论成功或失败都会执行。
- cancel:用户点击取消时的回调函数,仅部分有用户取消操作的api才会用到。
- trigger: 监听Menu中的按钮点击时触发的方法,该方法仅支持Menu中的相关接口。
备注:不要尝试在trigger中使用ajax异步请求修改本次分享的内容,因为客户端分享操作是一个同步操作,这时候使用ajax的回包会还没有返回。
以上几个函数都带有一个参数,类型为对象,其中除了每个接口本身返回的数据之外,还有一个通用属性errMsg,其值格式如下:
调用成功时:”xxx:ok” ,其中xxx为调用的接口名
用户取消时:”xxx:cancel”,其中xxx为调用的接口名
调用失败时:其值为具体错误信息
基础接口
判断当前客户端版本是否支持指定JS接口
wx.checkJsApi({
jsApiList: ['chooseImage'], // 需要检测的JS接口列表,所有JS接口列表见附录2,
success: function(res) {
// 以键值对的形式返回,可用的api值true,不可用为false
// 如:{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
}
});
示例
html及js调用微信jsapi接口
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试上传图片</title>
<script src="./js/jquery-1.12.4.min.js"></script>
<!--需要调用摄像头-->
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/javascript">
function chooseImg(){
var data = {
"reqHead": {
"token": "1dda44c1afc77e875fdfd1nd9fdc3f",
"transCode": "VYK00505",
"openId": "openId",
"transTime": "2018-02-12 15:28:02"
},
"reqBody": {
"url": location.href.split('#')[0]//当前页面url
}
};
$.ajax({
url:"http://***.***.com/examAction!examBank.action",//获取appId、时间戳、随机字符串、签名等参数接口
dataType:"json",
type:"post",
contentType : "application/json;charsetset=UTF-8",//必须
data : JSON.stringify(data),//必须
success:function(res){
wx.config({
debug: true,//开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId:res.resBody.appId, // 必填,公众号的唯一标识
timestamp: res.resBody.timestamp, // 必填,生成签名的时间戳
nonceStr: res.resBody.nonceStr, // 必填,生成签名的随机串
signature: res.resBody.signature,// 必填,签名,见附录1
jsApiList: ['chooseImage','previewImage','uploadImage','downloadImage']// 必填
});
wx.ready(function(){
//检查config是否正确
wx.checkJsApi({
jsApiList: [
'chooseImage',//拍照或从手机相册中选图接口
'previewImage',//预览图片接口
'uploadImage',//上传图片接口
'downloadImage'//下载图片接口
],
success: function (res) {//检查结果成功
//alert(JSON.stringify(res));
//alert(JSON.stringify(res.checkResult.getLocation));
if (res.checkResult.getLocation == false) {
alert('你的微信版本太低,不支持微信JS接口,请升级到最新的微信版本!');
return;
}else{
var localIds=[];
var serverIds=[];
wx.chooseImage({
count: 6, // 微信默认9
sizeType: ['original', 'compressed'],// 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'],// 可以指定来源是相册还是相机,默认二者都有
success: function (res) {
console.log(res);
serverIds=[];
medil_id="";
var imgUrl= "";
localIds = res.localIds;// 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
//console.log('已选择 ' + res.localIds.length + ' 张图片');
if(res.localIds.length == 0) {
console.log('请先使用微信的 chooseImage 接口选择图片');
return;
}
uploadImages(localIds);//调用长传图片接口
for(var i=0;i<localIds.length;i++){//展示图片
imgUrl+=localIds[i]+",";
$(".img_container").append('<div style="width:50%;padding: 0 5px;"><img width="100%" height="480px" style="margin-right: 10px;" src="'+localIds[i]+'"/></div>');
}
},
fail:function(res){
console.log("失败的原因"+res);
}
})
}
}
});
});
},
error:function(){
console.log("上传失败");
}
})
}
function uploadImages(localImagesIds) {
if (localImagesIds.length === 0) {
$.showPreloader('正在提交数据...');
}
var localId = localImagesIds[0];
//解决IOS无法上传的坑
if (localId.indexOf("wxlocalresource") != -1) {
localId = localId.replace("wxlocalresource", "wxLocalResource");
}
wx.uploadImage({//微信上传图片接口
localId: localId, // 需要上传的图片的本地ID,由chooseImage接口获得
isShowProgressTips: 2, // 默认为1,显示进度提示
success: function (res) {
var mediaId = res.serverId; // 返回图片的服务器端ID
//调用方法savePicture,将获取到的 mediaId 传入后台
/* $.post("<%=request.getContextPath()%>/my/savePicture",
{mediaId:mediaId},function(res){
if(res){
alert("上传成功!mediaId:"+mediaId);
}else{
}
}) */
// serverIds.push(res.serverId);
// localImagesIds.shift();//把数组的第一个元素从其中删除,并返回第一个元素的值。
// uploadImages(localImagesIds);
},
fail: function (res) {
console.log('上传失败,请重新上传!');
}
});
}
</script>
</head>
<body>
<div align="center">
<div onclick="chooseImg()" style=" background-color: aquamarine;width: 500px;height: 100px; line-height: 90px;">点击上传图片</div>
<div class="img_container"></div>
</div>
</body>
</html>
后台获取ACCESS_TOKEN和JSAPI_TICKET
JS-SDK使用权限签名算法
jsapi_ticket
生成签名之前必须先了解一下jsapi_ticket,jsapi_ticket是公众号用于调用微信JS接口的临时票据。正常情况下,jsapi_ticket的有效期为7200秒,通过access_token来获取。由于获取jsapi_ticket的api调用次数非常有限,频繁刷新jsapi_ticket会导致api调用受限,影响自身业务,开发者必须在自己的服务全局缓存jsapi_ticket 。
参考以下文档获取access_token(有效期7200秒,开发者必须在自己的服务全局缓存access_token):https://developers.weixin.qq.com/doc/offiaccount/Basic_Information/Get_access_token.html
用第一步拿到的access_token 采用http GET方式请求获得jsapi_ticket(有效期7200秒,开发者必须在自己的服务全局缓存jsapi_ticket):https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi
成功返回如下JSON:
{ "errcode":0, "errmsg":"ok", "ticket":"bxLdikRXVbTPdHSM05e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA", "expires_in":7200 }
获得jsapi_ticket之后,就可以生成JS-SDK权限验证的签名了。
签名算法
签名生成规则如下:参与签名的字段包括noncestr(随机字符串), 有效的jsapi_ticket, timestamp(时间戳), url(当前网页的URL,不包含#及其后面部分) 。对所有待签名参数按照字段名的ASCII 码从小到大排序(字典序)后,使用URL键值对的格式(即key1=value1&key2=value2…)拼接成字符串string1。这里需要注意的是所有参数名均为小写字符。对string1作sha1加密,字段名和字段值都采用原始值,不进行URL 转义。
即signature=sha1(string1)。 示例:
noncestr=Wm3WZYTPz0wzccnW jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg timestamp=1414587457 url=http://mp.weixin.qq.com?params=value
步骤1. 对所有待签名参数按照字段名的ASCII 码从小到大排序(字典序)后,使用URL键值对的格式(即key1=value1&key2=value2…)拼接成字符串string1:
jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW×tamp=1414587457&url=http://mp.weixin.qq.com?params=value
步骤2. 对string1进行sha1签名,得到signature:
0f9de62fce790f9a083d5c99e95740ceb90c27ed
注意事项
签名用的noncestr(js中驼峰标准大写S)和timestamp必须与wx.config中的nonceStr和timestamp相同。
签名用的url必须是调用JS接口页面的完整URL(请在当前页面alert(location.href.split(‘#’)[0])确认),包括’http(s)://’部分,以及’?’后面的GET参数部分,但不包括’#’hash后面的部分。
出于安全考虑,开发者必须在服务器端实现签名的逻辑。
第三方切记要对获取的accesstoken以及jsapi_ticket进行缓存以确保不会触发频率限制。
后端java获取签名
Map<String, String> result = new HashMap<String, String>();
//appId
result.put("appId", WX_APP_ID);
//时间戳
long timeStampSec = System.currentTimeMillis() / 1000;
String timestamp = String.format("%010d", timeStampSec);
result.put("timestamp", timestamp);
//随机串
String nonceStr = getRandomStr(8);
result.put("nonceStr", nonceStr);
//签名
result.put("signature", getWXSignature(url,timestamp,nonceStr));
//1.获取access_token,格式:{"access_token":"ACCESS_TOKEN","expires_in":7200},参考地址:https://developers.weixin.qq.com/doc/offiaccount/Basic_Information/Get_access_token.html
private static String getWXaccessToken(){
//获取access_token缓存到redis,设置缓存时间为7000秒
JedisCache jedis = JedisCache.getInstance();
jedis.setLocalAlias(JedisKeys.JEDIS_ALIAS1);
if(!jedis.exists(JedisKeys.ACCESS_TOKEN)){
String url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid="+WX_APP_ID+"&secret="+WX_SECRET;//获取access_token时grant_type参数填写client_credential
String tokenResult = HttpUtil.httpsGet(url);
if (StringUtils.isNotBlank(tokenResult)) {
System.out.println("获取access_token请求结果:" + tokenResult);
JSONObject tokenObj = JSON.parseObject(tokenResult);
String accessToken = tokenObj.getString("access_token");
System.out.println("获取到的access_token:" + accessToken);
//缓存ticket值,设置有效时间
jedis.set(JedisKeys.ACCESS_TOKEN, accessToken);
jedis.expire(JedisKeys.ACCESS_TOKEN, 7000);
}
}
return jedis.get(JedisKeys.ACCESS_TOKEN);
}
//2.使用access_token 采用http GET方式请求获得jsapi_ticket
private static String getWXJsapiTicket() {
JedisCache jedis = JedisCache.getInstance();
jedis.setLocalAlias(JedisKeys.JEDIS_ALIAS1);
if(!jedis.exists(JedisKeys.JSAPI_TICKET)){
//获取ticket的地址
String url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=" + getWXaccessToken() + "&type=jsapi";
String resp = HttpUtil.httpsGet(url);
if(StringUtils.isNotBlank(resp)){
System.out.println("获取jsapi_ticket请求结果:" + resp);
JSONObject resJson = JSONObject.parseObject(resp);
//请求结果ticket值
String ticket = resJson.getString("ticket");
System.out.println("获取到的ticket:" + ticket);
//缓存ticket值,设置有效时间
jedis.set(JedisKeys.JSAPI_TICKET, ticket);
jedis.expire(JedisKeys.JSAPI_TICKET, 7000);
}
}
return jedis.get(JedisKeys.JSAPI_TICKET);
}
//3.生成签名
private static String getWXSignature(String url,String timestamp,String nonceStr) {
//时间戳 timestamp
//随机字符串 nonceStr
//分享的网页的URL,不包含#及其后面部分
String[] urls = url.split("#");
String newUrl = urls[0];
if(newUrl.indexOf("http") != 0){
newUrl = "http://" + newUrl;
}
//对所有待签名参数按照字段名的ASCII 码从小到大排序(字典序)
String[] signArr = new String[]{"url=" + newUrl, "jsapi_ticket=" + getWXJsapiTicket(), "noncestr=" + nonceStr, "timestamp=" + timestamp};
Arrays.sort(signArr);
String signStr = StringUtils.join(signArr, "&");
//对signStr作sha1加密
return DigestUtils.sha1Hex(signStr);
}
//获取随机8位字符串
public static String getRandomStr(int length) {
String base = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
int randomNum;
char randomChar;
Random random = new Random();
// StringBuffer类型的可以append增加字符
StringBuffer str = new StringBuffer();
for (int i = 0; i < length; i++) {
// 可生成[0,n)之间的整数,获得随机位置
randomNum = random.nextInt(base.length());
// 获得随机位置对应的字符
randomChar = base.charAt(randomNum);
// 组成一个随机字符串
str.append(randomChar);
}
return str.toString();
}
http get请求
import org.apache.commons.httpclient.protocol.Protocol;
import org.apache.commons.httpclient.HttpClient;
import org.apache.commons.httpclient.methods.GetMethod;
import org.apache.commons.httpclient.params.HttpMethodParams;
import org.apache.commons.httpclient.HttpException;
import java.io.IOException;
public class HttpUtil {
private HttpUtil(){}
public static String httpsGet(String url){
HttpClient client = new HttpClient();
Protocol myhttps = new Protocol("https", new MySSLProtocolSocketFactory(), 443);
Protocol.registerProtocol("https", myhttps);
GetMethod getMethod = new GetMethod(url);
getMethod.setFollowRedirects(true);
getMethod.addRequestHeader("Content-Type","text/html;charset=UTF-8");
HttpMethodParams params = new HttpMethodParams();
params.setContentCharset("UTF-8");
getMethod.setParams(params);
try {
client.executeMethod(getMethod);
return getMethod.getResponseBodyAsString();
} catch (HttpException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
} catch (Exception e) {
e.printStackTrace();
}
return null;
}
}
常见错误及解决方法
调用config 接口的时候传入参数 debug: true 可以开启debug模式,页面会alert出错误信息。以下为常见错误及解决方法:
invalid url domain当前页面所在域名与使用的appid没有绑定,请确认正确填写绑定的域名,仅支持80(http)和443(https)两个端口,因此不需要填写端口号(一个appid可以绑定三个有效域名,见 ]目录1.1.1)。
invalid signature签名错误。建议按如下顺序检查:
确认签名算法正确,可用http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 页面工具进行校验。
确认config中nonceStr(js中驼峰标准大写S), timestamp与用以签名中的对应noncestr, timestamp一致。
确认url是页面完整的url(请在当前页面alert(location.href.split(‘#’)[0])确认),包括’http(s)://’部分,以及’?’后面的GET参数部分,但不包括’#’hash后面的部分。
确认 config 中的 appid 与用来获取 jsapi_ticket 的 appid 一致。
确保一定缓存access_token和jsapi_ticket。
确保你获取用来签名的url是动态获取的,动态页面可参见实例代码中php的实现方式。如果是html的静态页面在前端通过ajax将url传到后台签名,前端需要用js获取当前页面除去’#’hash部分的链接(可用location.href.split(‘#’)[0]获取,而且需要encodeURIComponent),因为页面一旦分享,微信客户端会在你的链接末尾加入其它参数,如果不是动态获取当前链接,将导致分享后的页面签名失败。
the permission value is offline verifying这个错误是因为config没有正确执行,或者是调用的JSAPI没有传入config的jsApiList参数中。建议按如下顺序检查:
确认config正确通过。
如果是在页面加载好时就调用了JSAPI,则必须写在wx.ready的回调中。
确认config的jsApiList参数包含了这个JSAPI。
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/139523.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...