jQuery调取微信摄像头代码记录

向右看齐 2022-03-09 00:42 285阅读 0赞

我们在写不管是小程序还是微信公众号的时候，调取微信的摄像头的接口都是避免不了的，那么调取微信的摄像头的接口还是需要注意一些问题的，不然可能调取不成功，下面我简单的写一下调取微信公众号的摄像头的接口的时候的一些注意事项，直接将代码贴上去，步骤可以直接看官方的文档！这篇文章可能你们直接将代码拿过去是不可以使用的，因为里面的接口一些是根据我们自己的公众号来的，所以需要换成自己的公众号的信息才是可以的，还有就是一些接口是后端自己封装好的，如果你们直接使用的时候，还是根据自己的情况来比较合适！

首先微信不管你做的是支付也好 ，录音也好，摄像头也好，第一步永远都是一样的，就是请求微信的环境，只有环境有了，我们才可以使用微信的提供的一些接口

请求微信的环境：

/*
    			请求接口拿必要的签名信息
    		     */
    			$.ajax({
    				type: "POST",
    				contentType: "application/json; charset=utf-8",
    				dataType: "json",
    				async: false,
    				url: "自己的服务器的地址/hotel/wechatPay/findAccessToken.do",
    				data: JSON.stringify({
    					sessionToken: "WECHAT",
    					hid: "1939"
    				}),
    				/* beforeSend: function(XMLHttpRequest) {
    				     $(".Cload").show(); //在后台返回success之前显示loading图标
    				 },*/
    				success: function(res) {
    					$.ajax({
    						type: "POST",
    						url: "自己服务器的地址/hotel/wechatPay/initWeChat.do",
    						contentType: "application/json",
    						data: JSON.stringify({
    							"sessionToken": "WECHAT",
    							"hid": "1939",
    							"accessToken": res.accessToken,
    							"url": location.href
    						}),
    						async: false,
    						/* beforeSend: function(XMLHttpRequest) {
    						     $(".Cload").show(); //在后台返回success之前显示loading图标
    						 },*/
    						success: function(res) {
    							console.log(res);
    							wx.config({
    								debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    								appId: res.wxData.appId, // 必填，公众号的唯一标识
    								timestamp: res.wxData.timestamp, // 必填，生成签名的时间戳
    								nonceStr: res.wxData.noncestr, // 必填，生成签名的随机串
    								signature: res.wxData.sign, // 必填，签名
    								jsApiList: ["chooseImage", "uploadImage", "getLocalImgData"] // 必填，需要使用的JS接口列表
    							});
    							// wx.ready(function(){// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
    							// 	$(".Cload").hide();
    							// });
    						},
    						fail: function() {
    							//layer.msg(输入参数错误);
    							alert("输入参数错误");
    						}
    					});
    				}
    			});

ok到这里微信的环境基本就加载结束了，下面就是怎么调取的代码：

/*
    			请求拍照的接口
    			 */
    			var room_number = $("#room_number").val();
    			var localIds; //本地的图片id
    			_fun_camera = function() {
    				wx.chooseImage({
    					count: 1, // 默认9
    					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
    					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
    					success: function(res) {
    						localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
    						$("#room_camera_id").attr("src", "" + localIds[0] + ""); //获取本地图片，将拍照的图片替换为用户人拍照的照片
    					},
    					fail: function() {
    						alert("调取失败！");
    					}
    				});
    			}

到这里基本就是可以了，我没有写过多的解释的语言，因为毕竟这个是微信官方就有的，主要认真看一下文档就可以， 我之所以写这里是因为这里可以做一个记录，下次可以直接拿来使用。

谢谢阅读！