公众号网页JS-SDK使用，含V3版本微信支付

最新推荐文章于 2024-06-14 09:24:10 发布

lootaa

最新推荐文章于 2024-06-14 09:24:10 发布

阅读量1.6k

点赞数

分类专栏：微信服务号开发文章标签：微信微信小程序微信开放平台微信公众平台小程序

本文链接：https://blog.csdn.net/m0_58095675/article/details/127719416

版权

微信服务号开发专栏收录该内容

21 篇文章 8 订阅

订阅专栏

洛塔服务号回复015获取代码。

功能说明

逐个测试了如下功能，好多有坑的地方。同时准备工作（含支付相关的）也都备注上了。

判断当前客户端版本是否支持指定 JS 接口
分享给朋友或朋友圈
拍照或从手机相册中选图
预览图片
上传图片
下载图片
开始录音
停止录音
监听录音自动停止
播放语音
暂停播放
停止播放
监听语音播放完毕
上传语音
下载语音
识别音频并返回识别结果
获取网络状态
使用微信内置地图查看位置
获取地理位置
关闭当前网页窗口
批量隐藏功能按钮
批量显示功能按钮
隐藏所有非基础按钮
显示所有功能按钮
调起微信扫一扫
微信支付
共享收货地址

准备工作

设置安全域名

公众号后台–>设置与开发–>功能设置–>JS接口安全域名

引入js

前端引入微信的js

<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

为了方便发送post请求，测试代码还引入了jquery

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

后台配置config

前端的config各个参数，特别是签名，需要从后台获取。最好的方式是请求一个url，然后后台将所有config对应数据都返回。本例为了方便，连同url的所有参数，都固定到后台了。真实业务可根据需要调整。
引入用到了部分加密包和获取随机字符串，需要maven引入

        <dependency>
			<groupId>org.apache.commons</groupId>
			<artifactId>commons-lang3</artifactId>
		</dependency>
		<dependency>
			<groupId>commons-codec</groupId>
			<artifactId>commons-codec</artifactId>
		</dependency>

后台Java代码如下

	/**
	 * 完整项目源码可关注公众号"lootaayun"（洛塔），回复015获取
	 */
	@PostMapping("wx15")
	public JSONObject jssdkParam() throws Exception {
		// 先获取access_token，这部分正式环境需要配置定时获取，每天2000次调用限制
		String url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=" + APPID + "&secret=" + SECRET;
		String result = Jsoup.connect(url).ignoreContentType(true).method(Method.GET).execute().body();
		System.out.println(result);
		String accessToken = JSON.parseObject(result).getString("access_token");	
		
		// 获取jsapi_ticket，这部分需要正式环境定时获取，7200秒内有效
		url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=" + accessToken + "&type=jsapi";
		result = Jsoup.connect(url).ignoreContentType(true).method(Method.GET).execute().body();
		System.out.println(result);
		String ticket = JSON.parseObject(result).getString("ticket");	
		
		// 签名
		String noncestr = RandomStringUtils.randomAlphanumeric(8);
		long timestamp = System.currentTimeMillis()/1000;
		String signurl = "http://test.lootaa.com/wx15.html"; //如果signurl带有#，则只取#之前的部分
		String param = "jsapi_ticket=" + ticket + "&noncestr=" + noncestr + "&timestamp=" + timestamp + "&url=" + signurl;
		System.out.println(param);
		String signature = DigestUtils.sha1Hex(param);
		System.out.println(signature);
		
		JSONObject data = new JSONObject();
		data.put("appId", APPID);
		data.put("timestamp", timestamp);
		data.put("nonceStr", noncestr); //这个参数比较特殊，后台用的是noncestr，前端S要大写，用的nonceStr
		data.put("signature", signature);
		
		return data;
	}

前端config配置

前端直接调用上面后台写好的接口，将数据放到config中。
其中，jsApiList仅需要放入需要的部分，测试代码将几乎全部的都加上了。

$.post("http://test.lootaa.com/lootaa-wechat/wx15", {}, function(info){
	wx.config({
		  debug: true, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印。
		  appId: info.appId, // 必填，公众号的唯一标识
		  timestamp: info.timestamp, // 必填，生成签名的时间戳
		  nonceStr: info.nonceStr, // 必填，生成签名的随机串
		  signature: info.signature,// 必填，签名
		  jsApiList: ["updateAppMessageShareData", 
			  "updateTimelineShareData",
			  "chooseImage",
			  "previewImage",
			  "uploadImage",
			  "downloadImage",
			  "startRecord",
			  "stopRecord",
			  "onVoiceRecordEnd",
			  "playVoice",
			  "pauseVoice",
			  "stopVoice",
			  "onVoicePlayEnd",
			  "uploadVoice",
			  "downloadVoice",
			  "translateVoice",
			  "getNetworkType",
			  "openLocation",
			  "getLocation",
			  "startSearchBeacons",
			  "stopSearchBeacons",
			  "onSearchBeacons",
			  "closeWindow",
			  "hideMenuItems",
			  "showMenuItems",
			  "hideAllNonBaseMenuItem",
			  "showAllNonBaseMenuItem",
			  "scanQRCode",
			  "openProductSpecificView",
			  "openAddress"] // 必填，需要使用的 JS 接口列表
	});
}, "json");

写ready

一旦wx.config执行成功，就会自动调用wx.ready，这里面可以加入业务逻辑，比如设置分享内容、监听录音自动完成回调等。

wx.ready(function () {
     // 这里加入wx.config执行后逻辑
});

逐个测试接口

在html的body中加入几个按钮，用来进行功能测试

<body>
<button type="submit" id="btn1">判断当前客户端版本是否支持指定 JS 接口</button>
<button type="submit" id="btn2">分享给朋友或朋友圈</button>
<button type="submit" id="btn3">拍照或从手机相册中选图</button>
<button type="submit" id="btn4">预览图片</button>
<button type="submit" id="btn5">上传图片</button>
<button type="submit" id="btn6">下载图片</button>
<button type="submit" id="btn7">开始录音</button>
<button type="submit" id="btn8">停止录音</button>
<button type="submit" id="btn9">监听录音自动停止</button>
<button type="submit" id="btn10">播放语音</button>
<button type="submit" id="btn11">暂停播放</button>
<button type="submit" id="btn12">停止播放</button>
<button type="submit" id="btn13">监听语音播放完毕</button>
<button type="submit" id="btn14">上传语音</button>
<button type="submit" id="btn15">下载语音</button>
<button type="submit" id="btn16">识别音频并返回识别结果</button>
<button type="submit" id="btn17">获取网络状态</button>
<button type="submit" id="btn18">使用微信内置地图查看位置</button>
<button type="submit" id="btn19">获取地理位置</button>
<button type="submit" id="btn20">关闭当前网页窗口</button>
<button type="submit" id="btn21">批量隐藏功能按钮</button>
<button type="submit" id="btn22">批量显示功能按钮</button>
<button type="submit" id="btn23">隐藏所有非基础按钮</button>
<button type="submit" id="btn24">显示所有功能按钮</button>
<button type="submit" id="btn25">调起微信扫一扫</button>
<button type="submit" id="btn26">微信支付</button>
<button type="submit" id="btn27">共享收货地址</button>

<br/>
<img id="img1" width="150px"></img>
</body>

1.判断当前客户端版本是否支持指定 JS 接口

请求参数中jsApiList可以放入几乎全部需要测试的接口。

	$("#btn1").click(function(){
		wx.ready(function(){
			wx.checkJsApi({
				jsApiList: ['updateAppMessageShareData'], // 需要检测的 JS 接口列表
				success: function(res) {
					alert(JSON.stringify(res))
				}
			});
		});
	});

2.分享给朋友或朋友圈

之前分享的接口都即将废弃了，虽然还能用，但估计命不久矣，就不再测试。当前分享接口实际上只是设置分享的图片、文字、详情、链接等，而不能打开分享页面，最终还是需要从右上角三个点点点地方进入。
这个测试代码放到了ready方法中，即wx.config完成后直接设置好要分享时候显示的东西。

有个大坑：要想看到分享效果，只能从公众号菜单打开链接，或者点击别人通过菜单分享过来的链接，直接打开url地址的话，分享出去的只能是个url，而没有设置的效果。所以需要在公众号菜单中先添加测试的链接。

ready中分享设置内容如下

	wx.ready(function () {
		  wx.updateAppMessageShareData({ 
		    title: '分享给朋友', // 分享标题
		    desc: '这里是分享描述文字信息', // 分享描述
		    link: 'http://test.lootaa.com/wx15.html', // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
		    imgUrl: 'https://profile.csdnimg.cn/3/7/F/0_m0_58095675', // 分享图标
		    success: function () {
		      // 设置成功
		    }
		  })
		  
		  wx.updateTimelineShareData({ 
		    title: '分享朋友圈', // 分享标题
		    link: 'http://test.lootaa.com/wx15.html', // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
		    imgUrl: 'https://profile.csdnimg.cn/3/7/F/0_m0_58095675', // 分享图标
		    success: function () {
		      // 设置成功
		    }
  		  })
	});

3.拍照或从手机相册中选图

这个功能就比较简单了，选择或者拍照完成后，返回的图片是个列表。即localIds，每个localId都可以设置成img的src，会正常显示。
本例为了方便后续测试，将localId赋值给了一个全局变量，方便后续测试上传这个图片。

	$("#btn3").click(function(){
		wx.ready(function(){
			wx.chooseImage({
				  count: 3, // 默认9
				  sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
				  sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
				  success: function (res) {
				  		var localIds = res.localIds; // 返回选定照片的本地 ID 列表，localId可以作为 img 标签的 src 属性显示图片
				  		uploadImageLocalId = localIds[0];
				  		// alert(localIds.length);
				  		alert(uploadImageLocalId)
				  		$("#img1").attr("src", localIds[0]);
				  }
			});
		});
	});

4.预览图片

预览就是多张图片可以左右滑动查看。

	$("#btn4").click(function(){
		wx.ready(function(){
			wx.previewImage({
				current: "https://profile.csdnimg.cn/3/7/F/0_m0_58095675",  当前显示图片的 http 链接
				urls: ['https://profile.csdnimg.cn/3/7/F/0_m0_58095675', 'http://test.lootaa.com/123.jpg'] // 需要预览的图片 http 链接列表
			});
		});
	});

5.上传图片

请求参数需要用到图片对应的localId，也就是拍照或从手机相册中选图成功后返回的localId，因为上面已经给赋值了，直接使用。

上传完成后会返回一个serverId，这个可以理解成素材部分的media_id，后台可以用来下载素材，前端也可以用这个进行下载。

	$("#btn5").click(function(){
		if(!uploadImageLocalId) {
			alert("先点击-拍照或从手机相册中选图")
			return;
		}
		wx.ready(function(){
			wx.uploadImage({
				localId: uploadImageLocalId, // 需要上传的图片的本地ID，由 chooseImage 接口获得
				isShowProgressTips: 1, // 默认为1，显示进度提示
				success: function (res) {
				    var serverId = res.serverId; // 返回图片的服务器端ID，也就是素材id media_id
				    downloadmageServerId = serverId;
				    alert(serverId)
				}
			});
		});
	});

6.下载图片

正常业务逻辑应该是上传图片获取到对应的serverId，保存到后台中。这个serverId可以用来进行图片下载。
本例为了测试方便，下载的serverId就是刚刚上传完成后的，做个了全局变量。

	$("#btn6").click(function(){
		if(!downloadmageServerId) {
			alert("先点击-上传图片")
			return;
		}
		wx.ready(function(){
			wx.downloadImage({
				serverId: downloadmageServerId, // 需要下载的图片的服务器端ID，由 uploadImage 接口获得
				isShowProgressTips: 1, // 默认为1，显示进度提示
				success: function (res) {
					var localId = res.localId; // 返回图片下载后的本地ID
				    alert(localId)
				    $("#img1").attr("src", localId);
				}
			});
		});
	});

7.开始录音

首次录音的时候，会提示是否授权。

	$("#btn7").click(function(){
		wx.ready(function(){
			wx.startRecord();
		});
	});

8.停止录音

如果录音的时间不足1分钟，则可以正常调用停止录音；如果超过了1分钟，则需要监听录音自动停止。
下面是不足1分钟时候正常调用停止录音。

	$("#btn8").click(function(){
		wx.ready(function(){
			wx.stopRecord({
				  success: function (res) {
				    var localId = res.localId;
				    alert(localId);
				    voiceLocalId = localId;
				  }
			});
		});
	});

9.监听录音自动停止

因为是自动监听，自然是不能放到按钮触发事件上的。本例是放在了wx.ready中，如果监听到了，也就拿到了录音的id。

	wx.ready(function () {
		  wx.updateAppMessageShareData({ 
		    title: '分享给朋友', // 分享标题
		    desc: '这里是分享描述文字信息', // 分享描述
		    link: 'http://test.lootaa.com/wx15.html', // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
		    imgUrl: 'https://profile.csdnimg.cn/3/7/F/0_m0_58095675', // 分享图标
		    success: function () {
		      // 设置成功
		    }
		  })
		  
		  wx.updateTimelineShareData({ 
		    title: '分享朋友圈', // 分享标题
		    link: 'http://test.lootaa.com/wx15.html', // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
		    imgUrl: 'https://profile.csdnimg.cn/3/7/F/0_m0_58095675', // 分享图标
		    success: function () {
		      // 设置成功
		    }
  		  })
  		  
  		  wx.onVoiceRecordEnd({
  			// 录音时间超过一分钟没有停止的时候会执行 complete 回调
  		    complete: function (res) {
  		      var localId = res.localId;
  		      alert(localId);
  		      voiceLocalId = localId;
  		 	}
  		  });

	});

10.播放语音

请求参数中的localId也就是前面录音的响应结果。真实业务情况可能需要经过后台，本例仅为了测试，设置了一个全局变量。

	$("#btn10").click(function(){
		wx.ready(function(){
			wx.playVoice({
				localId: voiceLocalId
			});
		});
	});

11.暂停播放

	$("#btn11").click(function(){
		wx.ready(function(){
			wx.pauseVoice({
				localId: voiceLocalId
			});
		});
	});

12.停止播放

	$("#btn12").click(function(){
		wx.ready(function(){
			wx.stopVoice({
				localId: voiceLocalId
			});
		});
	});

13.监听语音播放完毕

既然是监听，还是放在ready方法中

	wx.ready(function () {
		  wx.updateAppMessageShareData({ 
		    title: '分享给朋友', // 分享标题
		    desc: '这里是分享描述文字信息', // 分享描述
		    link: 'http://test.lootaa.com/wx15.html', // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
		    imgUrl: 'https://profile.csdnimg.cn/3/7/F/0_m0_58095675', // 分享图标
		    success: function () {
		      // 设置成功
		    }
		  })
		  
		  wx.updateTimelineShareData({ 
		    title: '分享朋友圈', // 分享标题
		    link: 'http://test.lootaa.com/wx15.html', // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
		    imgUrl: 'https://profile.csdnimg.cn/3/7/F/0_m0_58095675', // 分享图标
		    success: function () {
		      // 设置成功
		    }
  		  })
  		  
  		  wx.onVoiceRecordEnd({
  			// 录音时间超过一分钟没有停止的时候会执行 complete 回调
  		    complete: function (res) {
  		      var localId = res.localId;
  		      alert(localId);
  		      voiceLocalId = localId;
  		 	}
  		  });
		  
		  wx.onVoicePlayEnd({
	  		    success: function (res) {
	  		      var localId = res.localId;
	  		      alert('播放完毕-' + localId);
	  		 	}
	      });


	});

14.上传语音

上传成功后获取到的serverId，也就是素材里面的media_id，前后端均可以用来下载。

	$("#btn14").click(function(){
		wx.ready(function(){
			wx.uploadVoice({
				  localId: voiceLocalId, // 需要上传的音频的本地ID，由 stopRecord 接口获得
				  isShowProgressTips: 1, // 默认为1，显示进度提示
				  success: function (res) {
				    var serverId = res.serverId; // 返回音频的服务器端ID
				    alert(serverId)
				    downloadVoiceServerId = serverId;
				  }
			});
		});
	});

15.下载语音

	$("#btn15").click(function(){
		wx.ready(function(){
			wx.downloadVoice({
				serverId: downloadVoiceServerId, // 需要下载的音频的服务器端ID，由 uploadVoice 接口获得
				isShowProgressTips: 1, // 默认为1，显示进度提示
				success: function (res) {
					var localId = res.localId; // 返回音频的本地ID
				    alert(localId)
				}
			});
		});
	});

16.识别音频并返回识别结果

也就类似于微信中的语音翻译功能。

	$("#btn16").click(function(){
		wx.ready(function(){
			wx.translateVoice({
				localId: voiceLocalId, // 需要识别的音频的本地Id，由录音相关接口获得
				isShowProgressTips: 1, // 默认为1，显示进度提示
				success: function (res) {
					alert(res.translateResult); // 语音识别的结果
				}
			});
		});
	});

17.获取网络状态接口

	$("#btn17").click(function(){
		wx.ready(function(){
			wx.getNetworkType({
				success: function (res) {
					var networkType = res.networkType; // 返回网络类型2g，3g，4g，wifi
					alert(networkType);
				}
			});
		});
	});

18.使用微信内置地图查看位置

请求参数里面有个infoUrl，这个字段毛线用没有，设置了也没有效果。
经测试，此处设置的坐标应该用gcj02形式。
注意经纬度不要写反。

纬度：90 ~ -90
经度：180 ~ -180

	// 坐标使用的是gcj02
	$("#btn18").click(function(){
		wx.ready(function(){
			wx.openLocation({
				  latitude: 39.90923, // 纬度，浮点数，范围为90 ~ -90
				  longitude: 116.397428, // 经度，浮点数，范围为180 ~ -180。
				  name: '天安门', // 位置名
				  address: '北京市东城区天安门', // 地址详情说明
				  scale: 13, // 地图缩放级别,整型值,范围从1~28。默认为最大
				  infoUrl: '经测试发现这个参数无效，写啥都没用' // 在查看位置界面底部显示的超链接,可点击跳转
			});
		});
	});

19.获取地理位置

type支持gcj02和wgs84，wgs84的精度和gcj02比要差上一些。

高德地图定位出来的是gcj02
返回结果中的accuracy不知道干什么用的，小程序定位也有返回这个

	$("#btn19").click(function(){
		wx.ready(function(){
			wx.getLocation({
				type: 'gcj02', // 默认为wgs84的 gps 坐标，如果要返回直接给 openLocation 用的火星坐标，可传入'gcj02'
				success: function (res) {
				    var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
				    var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
				    var speed = res.speed; // 速度，以米/每秒计
				    var accuracy = res.accuracy; // 位置精度
				    alert(latitude + ":" + longitude + ":" + speed + ":" + accuracy)
				}
			});
		});
	});

20.关闭当前网页窗口

	$("#btn20").click(function(){
		wx.ready(function(){
			wx.closeWindow();
		});
	});

21.批量隐藏功能按钮

此处说的功能按钮，就是点击右上角三个点点点出来的按钮，可以控制显示隐藏。
其中，基本类的不支持，其他类的都可以控制。

	$("#btn21").click(function(){
		wx.ready(function(){
			wx.hideMenuItems({
			  menuList: ["menuItem:share:QZone"] // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮
			});
		});
	});

基本类

举报: “menuItem:exposeArticle”

调整字体: “menuItem:setFont”

日间模式: “menuItem:dayMode”

夜间模式: “menuItem:nightMode”

刷新: “menuItem:refresh”

查看公众号（已添加）: “menuItem:profile”

查看公众号（未添加）: “menuItem:addContact”

传播类

发送给朋友: “menuItem:share:appMessage”

分享到朋友圈: “menuItem:share:timeline”

分享到QQ: “menuItem:share:qq”

分享到Weibo: “menuItem:share:weiboApp”

收藏: “menuItem:favorite”

分享到FB: “menuItem:share:facebook”

分享到 QQ 空间 “menuItem:share:QZone”

保护类

编辑标签: “menuItem:editTag”

删除: “menuItem:delete”

复制链接: “menuItem:copyUrl”

原网页: “menuItem:originPage”

阅读模式: “menuItem:readMode”

在 QQ 浏览器中打开: “menuItem:openWithQQBrowser”

在 Safari 中打开: “menuItem:openWithSafari”

邮件: “menuItem:share:email”

一些特殊公众号: “menuItem:share:brand”

22.批量显示功能按钮

	$("#btn22").click(function(){
		wx.ready(function(){
			wx.showMenuItems({
				  menuList: ["menuItem:share:QZone"] // 要显示的菜单项
			});
		});
	});

23.隐藏所有非基础按钮

	$("#btn23").click(function(){
		wx.ready(function(){
			wx.hideAllNonBaseMenuItem();
		});
	});

24.显示所有功能按钮

	$("#btn24").click(function(){
		wx.ready(function(){
			wx.showAllNonBaseMenuItem();
		});
	});

25.调起微信扫一扫

	$("#btn25").click(function(){
		wx.ready(function(){
			wx.scanQRCode({
				  needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
				  scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
				  success: function (res) {
				    var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
				  }
			});
		});
	});

26.微信支付

我用的v3版本，这个地方比较麻烦，先只写一写支付相关的，回调用来接收数据，具体验签步骤就不写了。
前端代码比较简单，参数都是从后台获得，所以重点还是后台怎么处理数据。前端代码如下：

	$("#btn26").click(function(){
		$.post("http://test.lootaa.com/lootaa-wechat/wx15Pay", {}, function(info){
			alert(JSON.stringify(info))
			wx.ready(function(){
				wx.chooseWXPay({
					  timestamp: info.timestamp, // 支付签名时间戳，注意微信 jssdk 中的所有使用 timestamp 字段均为小写。但最新版的支付后台生成签名使用的 timeStamp 字段名需大写其中的 S 字符
					  nonceStr: info.nonceStr, // 支付签名随机串，不长于 32 位
					  package: info.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
					  signType: info.signType, // 微信支付V3的传入 RSA ,微信支付V2的传入格式与V2统一下单的签名格式保持一致
					  paySign: info.paySign, // 支付签名
					  success: function (res) {
					    // 支付成功后的回调函数
					    alert(res)
					  }
				});
			});
		}, "json");
	});

后端的业务：

准备工作：有支付商户号、下载好了证书、拿到了要支付用户的openid、有申请了微信支付的公众号。
代码引入包：生成随机数、使用腾讯提供的封装包

        <dependency>
			<groupId>org.apache.commons</groupId>
			<artifactId>commons-lang3</artifactId>
		</dependency>		
		<dependency>
		  <groupId>com.github.wechatpay-apiv3</groupId>
		  <artifactId>wechatpay-java</artifactId>
		  <version>0.2.0</version>
		</dependency>

生成prepayId
config中需要的几个量要提前准备。证书就是本地生成后保存起来的，一个三个文件，两个pem，一个p12，如果丢失了可以后台重置。
merchantId：就是商户号
privateKeyFromPath：私钥证书路径，如果没有修改过名称，就是apiclient_key.pem
merchantSerialNumber：证书的序列号，这个在微信商户后台，具体位置是账户中心–>API安全–>右侧管理证书–>查看对应证书的序列号
wechatPayCertificatesFromPath：这个是个坑，默认是没有的，需要用命令行生成下。

下载jar包：https://github.com/wechatpay-apiv3/CertificateDownloader/releases
使用下载的jar包执行（执行完成后会在-o设置的目录生成一个新的文件）：java -jar CertificateDownloader-1.2.0-jar-with-dependencies.jar【这个就是下载的jar包，如果名称不对的话对应调整】 -k abcdefghijklmnopqrstuvwxyz123456【这个是后台设置的APIv3密钥，在账户中心-API安全中】 -m 1603200180【这个是商户号】 -f /Users/lootaa/Desktop/cert/apiclient_key.pem【这个是本地的私钥文件】 -s 14FC9A65B064E3E20ED6780C945F968D026F4E7B【这个是证书序列号，前面有介绍位置】 -o /Users/lootaa/Desktop/cert【这个是生成的文件保存地址】

		Config config = new RSAConfig.Builder().merchantId("1603200180")
				.privateKeyFromPath("/usr/local/lootaa/cert/apiclient_key.pem")
				.merchantSerialNumber("14FC9A65B064E3E20ED6780C945F968D026F4E7B")
				.wechatPayCertificatesFromPath("/usr/local/lootaa/cert/wechatpay_26C0FD2C4CCA40CE9F313FF052890CF7E2EF2C33.pem").build();

		JsapiService service = new JsapiService.Builder().config(config).build();

		PrepayRequest request = new PrepayRequest();
		Amount amount = new Amount();
		amount.setTotal(100);
		request.setAmount(amount);
		request.setAppid(APPID);
		request.setMchid("1603200180");
		request.setDescription("测试商品标题");
		request.setNotifyUrl("http://test.lootaa.com/lootaa-wechat/wx15PayResult");
		request.setOutTradeNo(System.currentTimeMillis() + "");
		Payer payer = new Payer();
		payer.setOpenid("ohUHp6iaFJq6SISTVwHS5lkb9Pb8");
		request.setPayer(payer);

		PrepayResponse response = service.prepay(request);
		System.out.println(response.getPrepayId());

生成paySign
前面的prepayId只是一个参数，需要用来进行加密，得到最终的paySign。
待加密的四个参数中，APPID即为公众号的appid，timeStamp是10位时间戳，nonceStr是随机字符串，prepayId比较特殊，前面需要拼接上prepay_id=，四个参数的后面都需要加上换行符。

		String nonceStr = RandomStringUtils.randomAlphanumeric(8);
		long timeStamp = System.currentTimeMillis() / 1000;
		String param = APPID + "\n" + timeStamp + "\n" + nonceStr + "\nprepay_id=" + response.getPrepayId() + "\n";
		System.out.println(param);
		String privateKeyStr = IOUtil.loadStringFromPath("/usr/local/lootaa/cert/apiclient_key.pem");
		privateKeyStr = privateKeyStr.replace("-----BEGIN PRIVATE KEY-----", "")
                    .replace("-----END PRIVATE KEY-----", "")
                    .replaceAll("\\s+", "");
        KeyFactory kf = KeyFactory.getInstance("RSA");
        PrivateKey privateKey = kf.generatePrivate(new PKCS8EncodedKeySpec(Base64.getDecoder().decode(privateKeyStr)));
		Signature sign = Signature.getInstance("SHA256withRSA");
		sign.initSign(privateKey);
        sign.update(param.getBytes("UTF-8"));
        String paySign = Base64.getEncoder().encodeToString(sign.sign());

返回全部参数
为了前端使用方便，建议一直。其中timestamp都是小写，nonceStr的S是大写，package前面必须加上prepay_id=，signType是固定值RSA，paySign的S是大写。

		JSONObject data = new JSONObject();
		data.put("timestamp", timeStamp);
		data.put("nonceStr", nonceStr);
		data.put("package", "prepay_id=" + response.getPrepayId());
		data.put("signType", "RSA");
		data.put("paySign", paySign);

支付成功回调
也支持http格式的，测试没有问题。当然正式环境还是要用https更好。此处测试没有做验签，单纯打印下结果查看预期。

	@PostMapping("wx15PayResult")
	public void wx15PayResult(@RequestBody JSONObject param ) throws Exception {
		// {"summary":"支付成功","event_type":"TRANSACTION.SUCCESS","create_time":"2022-11-06T05:49:09+08:00","resource":{"original_type":"transaction","algorithm":"AEAD_AES_256_GCM","ciphertext":"rkuWN/QWKgvaRcGHVwIWIrc0/gOC6KY8YyIZRyngfXXbYglbcGzlfEdkkRG8zK/CJYO74sb8hwUoyPOxRihpFemWLuwOI4YHCF4VFwlKWDM+szzQgBr5AqU1ypA7E0/WjJauS87hYvBK4J/tPANzsSAmAoSIgngQUphijYO2dQneUsJi2W8J4xbuwiaHIivLS1l82HqdixsolVRl+tQ4inwlLZDbuojrMz+RadbcuwZgvR49y8DJcuIYoIj+5F/UI9XyiS4PVPhCTGf1oGvRP8ZFpNK4ckUNTAiPNGm31Pu1ExfcNWdnly1m31V23uM6faD4gTDUxTh24Pqvac1HApZy7bmHcvq6PiMHCZBhMD6VWrWH5RbeZmGIzpNq5aYJsctVTVP/WFh5TuZpTpI5440P0YsQJdLxA4uUQl0vysrAhatpLwwJuaxz/yFuIyLIWk+B7VJk9XGQG5gUTst1g2vOkVpDfhzUK9r5HZadTND68mUoyF4T3ZozYCLVkVrmuF1oGRn00dlUli4GJx50l2eMVxu2rcDJgprNZmvzVhp2j0Q71mQ1j/jMcf52pRVd","associated_data":"transaction","nonce":"0r28NWUGLpML"},"resource_type":"encrypt-resource","id":"61f55bc0-42b0-579e-872c-ac5a218fa7f8"}
		System.out.println(param);
		
	}

全部完整的代码在本篇文末。

27. 共享收货地址

这个不建议用，我测试是能打开地址列表，但是选择后不会执行success方法，也就是选择地址也用不上。

	$("#btn27").click(function(){
		wx.ready(function(){
			wx.openAddress({
				  success: function (res) {
					  alert("可以选择但是不会回调这里，感觉这个接口没有用。bug");
				    var userName = res.userName; // 收货人姓名
				    var postalCode = res.postalCode; // 邮编
				    var provinceName = res.provinceName; // 国标收货地址第一级地址（省）
				    var cityName = res.cityName; // 国标收货地址第二级地址（市）
				    var countryName = res.countryName; // 国标收货地址第三级地址（国家）
				    var detailInfo = res.detailInfo; // 详细收货地址信息
				    var nationalCode = res.nationalCode; // 收货地址国家码
				    var telNumber = res.telNumber; // 收货人手机号码
				  }
			});
		});
	});

全部Java代码

package com.lootaa.wechat;

import java.security.KeyFactory;
import java.security.PrivateKey;
import java.security.Signature;
import java.security.spec.PKCS8EncodedKeySpec;
import java.util.Base64;

import org.apache.commons.codec.digest.DigestUtils;
import org.apache.commons.lang3.RandomStringUtils;
import org.jsoup.Connection.Method;
import org.jsoup.Jsoup;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;

import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import com.wechat.pay.java.core.Config;
import com.wechat.pay.java.core.RSAConfig;
import com.wechat.pay.java.core.util.IOUtil;
import com.wechat.pay.java.service.payments.jsapi.JsapiService;
import com.wechat.pay.java.service.payments.jsapi.model.Amount;
import com.wechat.pay.java.service.payments.jsapi.model.Payer;
import com.wechat.pay.java.service.payments.jsapi.model.PrepayRequest;
import com.wechat.pay.java.service.payments.jsapi.model.PrepayResponse;

/**
 * 公众号JS-SDK使用
 * 前置条件：设置与开发-->功能设置-->JS接口安全域名
 */
@RestController
public class Test015 {

	public static final String APPID = "wx276049d6a7551dca";
	public static final String SECRET = "cbe109fdf6f399bd72ed3a4afafa21b1";
	
	/**
	 * 完整项目源码可关注公众号"lootaayun"（洛塔），回复015获取
	 */
	@PostMapping("wx15")
	public JSONObject jssdkParam() throws Exception {
		// 先获取access_token，这部分正式环境需要配置定时获取，每天2000次调用限制
		String url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=" + APPID + "&secret=" + SECRET;
		String result = Jsoup.connect(url).ignoreContentType(true).method(Method.GET).execute().body();
		System.out.println(result);
		String accessToken = JSON.parseObject(result).getString("access_token");	
		
		// 获取jsapi_ticket，这部分需要正式环境定时获取，7200秒内有效
		url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=" + accessToken + "&type=jsapi";
		result = Jsoup.connect(url).ignoreContentType(true).method(Method.GET).execute().body();
		System.out.println(result);
		String ticket = JSON.parseObject(result).getString("ticket");	
		
		// 签名
		String noncestr = RandomStringUtils.randomAlphanumeric(8);
		long timestamp = System.currentTimeMillis()/1000;
		String signurl = "http://test.lootaa.com/wx15.html"; //如果signurl带有#，则只取#之前的部分
		String param = "jsapi_ticket=" + ticket + "&noncestr=" + noncestr + "&timestamp=" + timestamp + "&url=" + signurl;
		System.out.println(param);
		String signature = DigestUtils.sha1Hex(param);
		System.out.println(signature);
		
		JSONObject data = new JSONObject();
		data.put("appId", APPID);
		data.put("timestamp", timestamp);
		data.put("nonceStr", noncestr); //这个参数比较特殊，后台用的是noncestr，前端S要大写，用的nonceStr
		data.put("signature", signature);
		
		return data;
	}
	
	@PostMapping("wx15Pay")
	public JSONObject payParam() throws Exception {
		Config config = new RSAConfig.Builder().merchantId("1603200180")
				.privateKeyFromPath("/usr/local/lootaa/cert/apiclient_key.pem")
				.merchantSerialNumber("14FC9A65B064E3E20ED6780C945F968D026F4E7B")
				.wechatPayCertificatesFromPath("/usr/local/lootaa/cert/wechatpay_26C0FD2C4CCA40CE9F313FF052890CF7E2EF2C33.pem").build();

		JsapiService service = new JsapiService.Builder().config(config).build();

		PrepayRequest request = new PrepayRequest();
		Amount amount = new Amount();
		amount.setTotal(100);
		request.setAmount(amount);
		request.setAppid(APPID);
		request.setMchid("1603200180");
		request.setDescription("测试商品标题");
		request.setNotifyUrl("http://test.lootaa.com/lootaa-wechat/wx15PayResult");
		request.setOutTradeNo(System.currentTimeMillis() + "");
		Payer payer = new Payer();
		payer.setOpenid("ohUHp6iaFJq6SISTVwHS5lkb9Pb8");
		request.setPayer(payer);

		PrepayResponse response = service.prepay(request);
		System.out.println(response.getPrepayId());
		
		// 签名
		String nonceStr = RandomStringUtils.randomAlphanumeric(8);
		long timeStamp = System.currentTimeMillis() / 1000;
		String param = APPID + "\n" + timeStamp + "\n" + nonceStr + "\nprepay_id=" + response.getPrepayId() + "\n";
		System.out.println(param);
		String privateKeyStr = IOUtil.loadStringFromPath("/usr/local/lootaa/cert/apiclient_key.pem");
		privateKeyStr = privateKeyStr.replace("-----BEGIN PRIVATE KEY-----", "")
                    .replace("-----END PRIVATE KEY-----", "")
                    .replaceAll("\\s+", "");
        KeyFactory kf = KeyFactory.getInstance("RSA");
        PrivateKey privateKey = kf.generatePrivate(new PKCS8EncodedKeySpec(Base64.getDecoder().decode(privateKeyStr)));
		Signature sign = Signature.getInstance("SHA256withRSA");
		sign.initSign(privateKey);
        sign.update(param.getBytes("UTF-8"));
        String paySign = Base64.getEncoder().encodeToString(sign.sign());
		
		JSONObject data = new JSONObject();
		data.put("timestamp", timeStamp);
		data.put("nonceStr", nonceStr);
		data.put("package", "prepay_id=" + response.getPrepayId());
		data.put("signType", "RSA");
		data.put("paySign", paySign);
		
		return data;
	}
	
	@PostMapping("wx15PayResult")
	public void wx15PayResult(@RequestBody JSONObject param ) throws Exception {
		// {"summary":"支付成功","event_type":"TRANSACTION.SUCCESS","create_time":"2022-11-06T05:49:09+08:00","resource":{"original_type":"transaction","algorithm":"AEAD_AES_256_GCM","ciphertext":"rkuWN/QWKgvaRcGHVwIWIrc0/gOC6KY8YyIZRyngfXXbYglbcGzlfEdkkRG8zK/CJYO74sb8hwUoyPOxRihpFemWLuwOI4YHCF4VFwlKWDM+szzQgBr5AqU1ypA7E0/WjJauS87hYvBK4J/tPANzsSAmAoSIgngQUphijYO2dQneUsJi2W8J4xbuwiaHIivLS1l82HqdixsolVRl+tQ4inwlLZDbuojrMz+RadbcuwZgvR49y8DJcuIYoIj+5F/UI9XyiS4PVPhCTGf1oGvRP8ZFpNK4ckUNTAiPNGm31Pu1ExfcNWdnly1m31V23uM6faD4gTDUxTh24Pqvac1HApZy7bmHcvq6PiMHCZBhMD6VWrWH5RbeZmGIzpNq5aYJsctVTVP/WFh5TuZpTpI5440P0YsQJdLxA4uUQl0vysrAhatpLwwJuaxz/yFuIyLIWk+B7VJk9XGQG5gUTst1g2vOkVpDfhzUK9r5HZadTND68mUoyF4T3ZozYCLVkVrmuF1oGRn00dlUli4GJx50l2eMVxu2rcDJgprNZmvzVhp2j0Q71mQ1j/jMcf52pRVd","associated_data":"transaction","nonce":"0r28NWUGLpML"},"resource_type":"encrypt-resource","id":"61f55bc0-42b0-579e-872c-ac5a218fa7f8"}
		System.out.println(param);
		
	}
	
}

全部前端代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script>
$.post("http://test.lootaa.com/lootaa-wechat/wx15", {}, function(info){
	wx.config({
		  debug: true, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印。
		  appId: info.appId, // 必填，公众号的唯一标识
		  timestamp: info.timestamp, // 必填，生成签名的时间戳
		  nonceStr: info.nonceStr, // 必填，生成签名的随机串
		  signature: info.signature,// 必填，签名
		  jsApiList: ["updateAppMessageShareData", 
			  "updateTimelineShareData",
			  "chooseImage",
			  "previewImage",
			  "uploadImage",
			  "downloadImage",
			  "startRecord",
			  "stopRecord",
			  "onVoiceRecordEnd",
			  "playVoice",
			  "pauseVoice",
			  "stopVoice",
			  "onVoicePlayEnd",
			  "uploadVoice",
			  "downloadVoice",
			  "translateVoice",
			  "getNetworkType",
			  "openLocation",
			  "getLocation",
			  "startSearchBeacons",
			  "stopSearchBeacons",
			  "onSearchBeacons",
			  "closeWindow",
			  "hideMenuItems",
			  "showMenuItems",
			  "hideAllNonBaseMenuItem",
			  "showAllNonBaseMenuItem",
			  "scanQRCode",
			  "openProductSpecificView",
			  "openAddress"] // 必填，需要使用的 JS 接口列表
	});
}, "json");

var uploadImageLocalId = '';
var downloadmageServerId = '';
var voiceLocalId = '';
var downloadVoiceServerId = '';

$(function(){
	wx.ready(function () {
		  wx.updateAppMessageShareData({ 
		    title: '分享给朋友', // 分享标题
		    desc: '这里是分享描述文字信息', // 分享描述
		    link: 'http://test.lootaa.com/wx15.html', // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
		    imgUrl: 'https://profile.csdnimg.cn/3/7/F/0_m0_58095675', // 分享图标
		    success: function () {
		      // 设置成功
		    }
		  })
		  
		  wx.updateTimelineShareData({ 
		    title: '分享朋友圈', // 分享标题
		    link: 'http://test.lootaa.com/wx15.html', // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
		    imgUrl: 'https://profile.csdnimg.cn/3/7/F/0_m0_58095675', // 分享图标
		    success: function () {
		      // 设置成功
		    }
  		  })
  		  
  		  wx.onVoiceRecordEnd({
  			// 录音时间超过一分钟没有停止的时候会执行 complete 回调
  		    complete: function (res) {
  		      var localId = res.localId;
  		      alert(localId);
  		      voiceLocalId = localId;
  		 	}
  		  });
		  
		  wx.onVoicePlayEnd({
	  		    success: function (res) {
	  		      var localId = res.localId;
	  		      alert('播放完毕-' + localId);
	  		 	}
	      });


	}); 
	
	$("#btn1").click(function(){
		wx.ready(function(){
			wx.checkJsApi({
				jsApiList: ['updateAppMessageShareData'], // 需要检测的 JS 接口列表
				success: function(res) {
					alert(JSON.stringify(res))
				}
			});
		});
	});
	
	$("#btn2").click(function(){
		alert('已经放到ready中，右上角直接分享可查看到效果');
	});
	
	$("#btn3").click(function(){
		wx.ready(function(){
			wx.chooseImage({
				  count: 3, // 默认9
				  sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
				  sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
				  success: function (res) {
				  		var localIds = res.localIds; // 返回选定照片的本地 ID 列表，localId可以作为 img 标签的 src 属性显示图片
				  		uploadImageLocalId = localIds[0];
				  		// alert(localIds.length);
				  		alert(uploadImageLocalId)
				  		$("#img1").attr("src", localIds[0]);
				  }
			});
		});
	});
	
	$("#btn4").click(function(){
		wx.ready(function(){
			wx.previewImage({
				current: "https://profile.csdnimg.cn/3/7/F/0_m0_58095675",  当前显示图片的 http 链接
				urls: ['https://profile.csdnimg.cn/3/7/F/0_m0_58095675', 'http://test.lootaa.com/123.jpg'] // 需要预览的图片 http 链接列表
			});
		});
	});
	
	$("#btn5").click(function(){
		if(!uploadImageLocalId) {
			alert("先点击-拍照或从手机相册中选图")
			return;
		}
		wx.ready(function(){
			wx.uploadImage({
				localId: uploadImageLocalId, // 需要上传的图片的本地ID，由 chooseImage 接口获得
				isShowProgressTips: 1, // 默认为1，显示进度提示
				success: function (res) {
				    var serverId = res.serverId; // 返回图片的服务器端ID，也就是素材id media_id
				    downloadmageServerId = serverId;
				    alert(serverId)
				}
			});
		});
	});
	
	$("#btn6").click(function(){
		if(!downloadmageServerId) {
			alert("先点击-上传图片")
			return;
		}
		wx.ready(function(){
			wx.downloadImage({
				serverId: downloadmageServerId, // 需要下载的图片的服务器端ID，由 uploadImage 接口获得
				isShowProgressTips: 1, // 默认为1，显示进度提示
				success: function (res) {
					var localId = res.localId; // 返回图片下载后的本地ID
				    alert(localId)
				    $("#img1").attr("src", localId);
				}
			});
		});
	});
	
	$("#btn7").click(function(){
		wx.ready(function(){
			wx.startRecord();
		});
	});
	
	$("#btn8").click(function(){
		wx.ready(function(){
			wx.stopRecord({
				  success: function (res) {
				    var localId = res.localId;
				    alert(localId);
				    voiceLocalId = localId;
				  }
			});
		});
	});
	
	$("#btn9").click(function(){
		alert('录音超过1分钟自动调用onVoiceRecordEnd，代码在ready中');
	});
	
	$("#btn10").click(function(){
		wx.ready(function(){
			wx.playVoice({
				localId: voiceLocalId
			});
		});
	});
	
	$("#btn11").click(function(){
		wx.ready(function(){
			wx.pauseVoice({
				localId: voiceLocalId
			});
		});
	});
	
	$("#btn12").click(function(){
		wx.ready(function(){
			wx.stopVoice({
				localId: voiceLocalId
			});
		});
	});
	
	$("#btn13").click(function(){
		alert('在头部ready代码中自动监听');
	});
	
	$("#btn14").click(function(){
		wx.ready(function(){
			wx.uploadVoice({
				  localId: voiceLocalId, // 需要上传的音频的本地ID，由 stopRecord 接口获得
				  isShowProgressTips: 1, // 默认为1，显示进度提示
				  success: function (res) {
				    var serverId = res.serverId; // 返回音频的服务器端ID
				    alert(serverId)
				    downloadVoiceServerId = serverId;
				  }
			});
		});
	});
	
	$("#btn15").click(function(){
		wx.ready(function(){
			wx.downloadVoice({
				serverId: downloadVoiceServerId, // 需要下载的音频的服务器端ID，由 uploadVoice 接口获得
				isShowProgressTips: 1, // 默认为1，显示进度提示
				success: function (res) {
					var localId = res.localId; // 返回音频的本地ID
				    alert(localId)
				}
			});
		});
	});
	
	$("#btn16").click(function(){
		wx.ready(function(){
			wx.translateVoice({
				localId: voiceLocalId, // 需要识别的音频的本地Id，由录音相关接口获得
				isShowProgressTips: 1, // 默认为1，显示进度提示
				success: function (res) {
					alert(res.translateResult); // 语音识别的结果
				}
			});
		});
	});
	
	$("#btn17").click(function(){
		wx.ready(function(){
			wx.getNetworkType({
				success: function (res) {
					var networkType = res.networkType; // 返回网络类型2g，3g，4g，wifi
					alert(networkType);
				}
			});
		});
	});
	
	// 坐标使用的是gcj02
	$("#btn18").click(function(){
		wx.ready(function(){
			wx.openLocation({
				  latitude: 39.90923, // 纬度，浮点数，范围为90 ~ -90
				  longitude: 116.397428, // 经度，浮点数，范围为180 ~ -180。
				  name: '天安门', // 位置名
				  address: '北京市东城区天安门', // 地址详情说明
				  scale: 13, // 地图缩放级别,整型值,范围从1~28。默认为最大
				  infoUrl: '经测试发现这个参数无效，写啥都没用' // 在查看位置界面底部显示的超链接,可点击跳转
			});
		});
	});
	
	$("#btn19").click(function(){
		wx.ready(function(){
			wx.getLocation({
				type: 'gcj02', // 默认为wgs84的 gps 坐标，如果要返回直接给 openLocation 用的火星坐标，可传入'gcj02'
				success: function (res) {
				    var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
				    var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
				    var speed = res.speed; // 速度，以米/每秒计
				    var accuracy = res.accuracy; // 位置精度
				    alert(latitude + ":" + longitude + ":" + speed + ":" + accuracy)
				}
			});
		});
	});
	
	$("#btn20").click(function(){
		wx.ready(function(){
			wx.closeWindow();
		});
	});
	
	$("#btn21").click(function(){
		wx.ready(function(){
			wx.hideMenuItems({
			  menuList: ["menuItem:share:QZone"] // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮
			});
		});
	});
	
	$("#btn22").click(function(){
		wx.ready(function(){
			wx.showMenuItems({
				  menuList: ["menuItem:share:QZone"] // 要显示的菜单项
			});
		});
	});
	
	$("#btn23").click(function(){
		wx.ready(function(){
			wx.hideAllNonBaseMenuItem();
		});
	});
	
	$("#btn24").click(function(){
		wx.ready(function(){
			wx.showAllNonBaseMenuItem();
		});
	});
	
	$("#btn25").click(function(){
		wx.ready(function(){
			wx.scanQRCode({
				  needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
				  scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
				  success: function (res) {
				    var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
				  }
			});
		});
	});
	
	$("#btn26").click(function(){
		$.post("http://test.lootaa.com/lootaa-wechat/wx15Pay", {}, function(info){
			alert(JSON.stringify(info))
			wx.ready(function(){
				wx.chooseWXPay({
					  timestamp: info.timestamp, // 支付签名时间戳，注意微信 jssdk 中的所有使用 timestamp 字段均为小写。但最新版的支付后台生成签名使用的 timeStamp 字段名需大写其中的 S 字符
					  nonceStr: info.nonceStr, // 支付签名随机串，不长于 32 位
					  package: info.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
					  signType: info.signType, // 微信支付V3的传入 RSA ,微信支付V2的传入格式与V2统一下单的签名格式保持一致
					  paySign: info.paySign, // 支付签名
					  success: function (res) {
					    // 支付成功后的回调函数
					    alert(res)
					  }
				});
			});
		}, "json");
	});
	
	$("#btn27").click(function(){
		wx.ready(function(){
			wx.openAddress({
				  success: function (res) {
					  alert("可以选择但是不会回调这里，感觉这个接口没有用。bug");
				    var userName = res.userName; // 收货人姓名
				    var postalCode = res.postalCode; // 邮编
				    var provinceName = res.provinceName; // 国标收货地址第一级地址（省）
				    var cityName = res.cityName; // 国标收货地址第二级地址（市）
				    var countryName = res.countryName; // 国标收货地址第三级地址（国家）
				    var detailInfo = res.detailInfo; // 详细收货地址信息
				    var nationalCode = res.nationalCode; // 收货地址国家码
				    var telNumber = res.telNumber; // 收货人手机号码
				  }
			});
		});
	});
	
})

</script>
</head>
<body>
<button type="submit" id="btn1">判断当前客户端版本是否支持指定 JS 接口</button>
<button type="submit" id="btn2">分享给朋友或朋友圈</button>
<button type="submit" id="btn3">拍照或从手机相册中选图</button>
<button type="submit" id="btn4">预览图片</button>
<button type="submit" id="btn5">上传图片</button>
<button type="submit" id="btn6">下载图片</button>
<button type="submit" id="btn7">开始录音</button>
<button type="submit" id="btn8">停止录音</button>
<button type="submit" id="btn9">监听录音自动停止</button>
<button type="submit" id="btn10">播放语音</button>
<button type="submit" id="btn11">暂停播放</button>
<button type="submit" id="btn12">停止播放</button>
<button type="submit" id="btn13">监听语音播放完毕</button>
<button type="submit" id="btn14">上传语音</button>
<button type="submit" id="btn15">下载语音</button>
<button type="submit" id="btn16">识别音频并返回识别结果</button>
<button type="submit" id="btn17">获取网络状态</button>
<button type="submit" id="btn18">使用微信内置地图查看位置</button>
<button type="submit" id="btn19">获取地理位置</button>
<button type="submit" id="btn20">关闭当前网页窗口</button>
<button type="submit" id="btn21">批量隐藏功能按钮</button>
<button type="submit" id="btn22">批量显示功能按钮</button>
<button type="submit" id="btn23">隐藏所有非基础按钮</button>
<button type="submit" id="btn24">显示所有功能按钮</button>
<button type="submit" id="btn25">调起微信扫一扫</button>
<button type="submit" id="btn26">微信支付</button>
<button type="submit" id="btn27">共享收货地址</button>

<br/>
<img id="img1" width="150px"></img>
</body>
</html>

lootaa

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
公众号网页JS-SDK使用，含V3版本微信支付

洛塔服务号回复015获取代码。# 功能说明逐个测试了如下功能，好多有坑的地方。同时准备工作（含支付相关的）也都备注上了。- 判断当前客户端版本是否支持指定 JS 接口- 分享给朋友或朋友圈- 拍照或从手机相册中选图- 预览图片- 上传图片- 下载图片- 开始录音- 停止录音- 监听录音自动停止- 播放语音- 暂停播放- 停止播放- 监听语音播放完毕- 上传语音- 下载语音- 识别音频并返回识别结果- 获取网络状态- 使用微信内置地图查看位置- 获取地理位置- 关
复制链接

扫一扫