微信网页开发(4)--使用JSSDK基础接口

程序员大阳

已于 2022-04-28 10:43:40 修改

阅读量1.9k

点赞数 1

分类专栏： # 公众号/支付/小程序文章标签：微信网页 JSSDK 接入基础接口

于 2022-01-25 13:33:58 首次发布

未经本人允许，请勿转载本人文章

本文链接：https://blog.csdn.net/woshisangsang/article/details/122679077

版权

公众号/支付/小程序专栏收录该内容

36 篇文章 37 订阅

订阅专栏

点此查看 微信公众号/微信网页/微信支付/企业微信/小程序开发合集及源代码下载

本文目录

1. JSSDK接口
2. 基础接口
3. 开发流程
3.1 绑定域名
4. 小结

1. JSSDK接口

微信提供了很多JSSDK接口，包括基础接口、分享接口、图像接口、音频接口、智能接口、设备信息、地理位置、摇一摇、界面操作、扫一扫、微信支付接口等等。

这些接口我们可以通过JS轻松的调用，方便我们开发微信相关业务。

2. 基础接口

基础接口用来判断，当前用户使用的微信，是否支持指定的接口。由于微信也是有很多历史版本的，在不同版本的更新过程中，逐渐支持更多的JSSDK，所以一些老版本的微信是不支持部分JSSDK接口的。

这就要求我们在使用前，先调用基础接口判断一下是否可以使用具体的JSSDK接口。

3. 开发流程

3.1 绑定域名

调用JSSDK的网页，需要在公众号的【JS接口安全域名】列表内，我们登录公众号，依次点击【设置与开发】-【公众号设置】-【功能设置】。为了方便开发，我们可以将【业务域名】、【JS接口安全域名】、【网页授权域名】都设置上，这样微信就会给域名网页开发的各种权限了。
在这里插入图片描述

3.2 引入JS文件

既然要调用JSSDK，首先得引入JSSDK所在的JS文件，所以在resources/static/wxpage.html页面编码如下：

<html>
<head>
<meta charset="utf-8">
</head>
<body>
	hello
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
</body>
</html>

3.3 通过config接口注入权限验证配置

注意JSSDK接口不是随便就能调用的，在页面初始化阶段，需要注入接口权限验证，上一篇我们其实已经实现了，即如下方法：

	/**
	 * 第三步,获取JSSDK配置信息
	 */
	@GetMapping("/wxJsapiSignature")
	@ResponseBody
	public WxJsapiSignature wxJsapiSignature(String url) throws Exception {
		return wxMpService.createJsapiSignature(url);
	}

所以我们在html页面修改：

	$(function() {
			// 向后端请求配置信息
			$.ajax({
				type : "GET",
				url : "/wx-server/wxJsapiSignature",
				data : {
					url : location.href.split('#')[0]
				},
				dataType : "json",
				success : function(res) {
					configInfo(res);
				}
			});
		});

		// 通过wx.config注入配置信息
		function configInfo(res) {
			wx.config({
				debug : false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
				appId : res.appId, // 必填，公众号的唯一标识
				timestamp : res.timestamp, // 必填，生成签名的时间戳
				nonceStr : res.nonceStr, // 必填，生成签名的随机串
				signature : res.signature,// 必填，签名
				jsApiList : [ 'checkJsApi' ]
			// 必填，需要使用的JS接口列表
			});
			// 处理成功后回调
			wx.ready(function() {
				console.log("处理成功:");
			});
			// 处理失败后回调
			wx.error(function(err) {
				console.log("处理失败:", err);
			});
		}

3.5 调用基础接口

接下来我们可以调用基础接口checkJsApi，测试可否使用chooseImage接口(拍照接口)了，注意代码需要放入wx.ready。

	// 通过wx.config注入配置信息
		function configInfo(res) {
			wx.config({
				debug : false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
				appId : res.appId, // 必填，公众号的唯一标识
				timestamp : res.timestamp, // 必填，生成签名的时间戳
				nonceStr : res.nonceStr, // 必填，生成签名的随机串
				signature : res.signature,// 必填，签名
				jsApiList : [ 'checkJsApi', 'updateAppMessageShareData' ]
			// 必填，需要使用的JS接口列表
			});
			// 处理成功后回调
			wx.ready(function() {
				console.log("处理成功:");
				wx.checkJsApi({
					jsApiList : [ 'chooseImage' ],
					success : function(checkRes) {
						console.log("checkRes:", checkRes);
					}
				});
			});
			// 处理失败后回调
			wx.error(function(err) {
				console.log("处理失败:", err);
			});
		}

然后我们访问：http://easypanda.oicp.io/wx-server/wxAuth，按上一篇的授权配置，会返回wxpage.html页面，从开发者工具控制台可以发现很多详细的提示信息，看到最后的处理成功。

绿色方框内显示的就是已获取到的权限。
在这里插入图片描述

4. 小结

接下来就可以进行具体JSSDK功能接口开发了。

程序员大阳

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
4
评论
微信网页开发(4)--使用JSSDK基础接口

本文目录1. JSSDK接口2. 基础接口3. 开发流程3.1 开发任务3.2 绑定域名3.3 引入JS文件3.4 通过config接口注入权限验证配置4. 小结1. JSSDK接口微信提供了很多JSSDK接口，包括基础接口、分享接口、图像接口、音频接口、智能接口、设备信息、地理位置、摇一摇、界面操作、扫一扫、微信支付接口等等。这些接口我们可以通过JS轻松的调用，方便我们开发微信相关业务。2. 基础接口基础接口用来判断，当前用户使用的微信，是否支持指定的接口。由于微信也是有很多历史版本的，在不同版
复制链接

扫一扫