前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >jQuery调取微信摄像头代码记录

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

作者头像
何处锦绣不灰堆
发布2020-05-29 14:44:59
8560
发布2020-05-29 14:44:59
举报
文章被收录于专栏:农历七月廿一农历七月廿一

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

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

请求微信的环境:

代码语言:javascript
复制
/*
			请求接口拿必要的签名信息
		     */
			$.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": kk
						}),
						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到这里微信的环境基本就加载结束了,下面就是怎么调取的代码:

代码语言:javascript
复制
/*
			请求拍照的接口
			 */
			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("调取失败!");
					}
				});
			}

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

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019-03-12 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档