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")@ResponseBodypublic 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功能接口开发了。

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

基于vue-cli的微信网页开发中的js-sdk的使用
参考文档:微信公众平台.踩坑记录一.简介 JS-SDK需要向服务端获取签名,且获取签名中需要的参数包括所在页面的url,但由于单页应用的路由特殊,其中涉及到iOS和android微信客户端浏览器内核 ...
微信网页开发调用微信jssdk接口遇到的坑以及最终解决方法（持续更新）
1.微信网页开发调用jssdk时报permission denied 大致是两个原因 (1)首先注册时未将你所调用的接口名字添加至jsApiList (2)第二个就是你的这个公众号没有权限使用这个ap ...
微信网页开发，JS-SDK说明文档（openLocation地图错误）
2019独角兽企业重金招聘Python工程师标准>>> 获取微信信息,我这是php代码 //获取微信信息public function getSignPackage() {$appI ...
微信公众号开发（二）基础接口
微信公众号开发(二)基础接口未经认证的订阅号只有基础接口的权限,基础接口主要包括三个部分:接收用户消息.发送被动响应消息和接收事件推送消息,开发者需要对用户消息在5秒内立即做出回应,微信服务器在五秒 ...
微信网页开发--仿美团、饿了么红包分享
需求这个月,公司做了一个3.8女王节的活动.当时的需求是一个水果接龙的小游戏.比如,我发起了一条接龙,然后我把这个链接分享出去,A点击这个链接就可以看见我输入的水果,然后A再分享这个链接给B,B就可 ...
微信网页开发——随手笔记
一.公众号设置 1.账号详情: 公众号的头像.二维码.名称都是必须填写的,如果没有这些信息,是不能进行网页开发的. 2.功能设置 JS接口安全域名: ...
微信网页开发wx.chooseImage多图上传、预览（已解决）
需求: 1.调用微信jsSDK选图或者拍照(选图支持选多图) 2.选图或者拍照后提供预览,但不把图片下载到服务器 3.提交表单的时候再一并提交,把图片下载到服务器 4.支持编辑页面删除已选图片(此图已 ...
H5微信网页开发总结（授权，分享，地图）
H5微信网页开发总结(网页授权,JS-SDK分享.地图) 目录: 网页授权分享地图参考文档https://developers.weixin.qq.com/doc/offiaccount/OA_ ...
微信网页开发配置整理
真是人越大记忆越差,断断续续做了几个微信小程序和微信h5项目,然鹅小程序的开发流程有些都忘了,最近刚做完一个微信h5网页开发的项目,所以赶紧记录下开发中需要注意的点,给自己往后回顾,同时也给第一次接入 ...

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

本文目录