SpringCloud : 接入 微信公众号平台获取JsSDK配置参数
Posted PHPdragon
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了SpringCloud : 接入 微信公众号平台获取JsSDK配置参数相关的知识，希望对你有一定的参考价值。
Java：
import com.phpdragon.wechat.proxy.config.WeChatConfig; import lombok.extern.slf4j.Slf4j; import me.chanjar.weixin.common.bean.WxJsapiSignature; import me.chanjar.weixin.common.error.WxErrorException; import me.chanjar.weixin.mp.api.WxMpService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.*; @Slf4j @RequestMapping("/system/") @RestController public class SystemController { @Autowired private WeChatConfig weChatConfig; /** * 获取JsSDK配置参数 * 参考：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#62 * * @param appId * @param currentUrl * @return * @throws WxErrorException */ @CrossOrigin @PostMapping("/getJsSdkConfig") public WxJsapiSignature getJsSdkConfig(@RequestParam("app_id") String appId, @RequestParam("current_url") String currentUrl) throws WxErrorException { WxMpService wxMpService = weChatConfig.getWxMpService(appId); return wxMpService.createJsapiSignature(currentUrl); } }
JS:
代码参考: Java微信公众平台开发(十一)--微信JSSDK中Config配置
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width" />
<title>JsSDK配置参数获取Demo</title>
<script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/vConsole/3.3.4/vconsole.min.js"></script>
<script>
//用于JS调试
var vConsole = new VConsole(); //初始化
</script> -->
<script type="text/javascript">
function getUrlParameter(name){
name = name.replace(/[]/,"\\[").replace(/[]/,"\\[").replace(/[]/,"\\\\\\]");
var regexS = "[\\\\?&]"+name+"=([^&#]*)";
var regex = new RegExp( regexS );
var results = regex.exec(window.parent.location.href );
if( results == null ) return ""; else {
return results[1];
}
};
function jssdk() {
$.ajax({
url : "https://www.phpdragon.com/system/getJsSdkConfig",
type : \'post\',
//contentType: "application/json",
dataType : \'json\',
data : {
\'current_url\' : location.href.split(\'#\')[0],
\'app_id\': getUrlParameter("app_id")
},
async:true,
success : function(rsp) {
wx.config({
debug : true,
appId : rsp.appId,
timestamp : rsp.timestamp,
nonceStr : rsp.nonceStr,
signature : rsp.signature,
jsApiList : [ \'checkJsApi\', \'onMenuShareTimeline\',
\'onMenuShareAppMessage\', \'onMenuShareQQ\',
\'onMenuShareWeibo\', \'hideMenuItems\',
\'showMenuItems\', \'hideAllNonBaseMenuItem\',
\'showAllNonBaseMenuItem\', \'translateVoice\',
\'startRecord\', \'stopRecord\', \'onRecordEnd\',
\'playVoice\', \'pauseVoice\', \'stopVoice\',
\'uploadVoice\', \'downloadVoice\', \'chooseImage\',
\'previewImage\', \'uploadImage\', \'downloadImage\',
\'getNetworkType\', \'openLocation\', \'getLocation\',
\'hideOptionMenu\', \'showOptionMenu\', \'closeWindow\',
\'scanQRCode\', \'chooseWXPay\',
\'openProductSpecificView\', \'addCard\', \'chooseCard\',
\'openCard\' ]
});
},
error : function(data){
alert("获取JsSDK参数异常:" + data);
}
});
}
function isWeiXin5() {
var ua = window.navigator.userAgent.toLowerCase();
var reg = /MicroMessenger\\/[5-9]/i;
return reg.test(ua);
}
$(function(){
jssdk();
});
function takePicture(){
wx.chooseImage({
count: 1, // 默认9
sizeType: [\'original\', \'compressed\'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: [\'album\', \'camera\'], // 可以指定来源是相册还是相机，默认二者都有
success: function (res) {
wx.uploadImage({
localId: localIds.toString(), // 需要上传的图片的本地ID，由chooseImage接口获得
isShowProgressTips: 1, // 默认为1，显示进度提示
success: function (res) {
var mediaId = res.serverId; // 返回图片的服务器端ID，即mediaId
//将获取到的 mediaId 传入后台 方法savePicture
$.post("<%=request.getContextPath()%>/savePicture",{mediaId:mediaId},function(res){
if(res.t == \'success\'){
}else{
alert(res.msg)
}
})
},
fail: function (res) {
alertModal(\'上传图片失败，请重试\')
}
});
},
fail: function (res) {
alertModal(\'上传图片失败，请重试2\')
},
error: function (res) {
alertModal(\'上传图片失败，请重试3\')
}
});
}
function checkJsApifunction () {
wx.checkJsApi({
jsApiList: [
\'getNetworkType\',
\'previewImage\',
"chooseImage",
"openLocation",
"getLocation",
],
success: function (res) {
alert(JSON.stringify(res));
}
});
}
</script>
</head>
<body>
<button onclick="takePicture()">拍照</button>
</body>
</html>
效果：
PS：
微信JSSDK中Config配置
Java开发微信公众号之整合weixin-java-tools框架开发微信公众号
从零实现 Spring Boot 2.0 整合 weixin-java-mp(weixin-java-tools) 获取 openId，用于微信授权
Demo 列表
以上是关于SpringCloud : 接入 微信公众号平台获取JsSDK配置参数的主要内容，如果未能解决你的问题，请参考以下文章