微信浏览器点击选择图片报错 WeiXinJSbridge is not defined

最近做一个h5界面，在个人中心需要有个用户头像修改的功能，然后就用了<input type="file">,

在手机浏览器运行很正常，但是在微信浏览器就出现了异常，用window.onerror输出看到报错：WeiXinJSbridge is not defined。

一脸懵逼啊，根本没有用到WeiXinJSbridge，然后在万能的百度上搜了一下，这是微信浏览器内置的类，在微信浏览器中会初始化，没初始化后用就会报这个错。但是基本上都是说微信支付的问题。好吧，我虽然没用到，但是问题出来了（我真不知道一个图片修改哪里用到了WeiXinJSbridge，如有知道的大神麻烦留言指点，先谢过了！），那就得解决吧。

然后我就想，既然是没初始化完成报错，而且只是选择图片的时候报错，那么我在微信浏览器就先判断WeiXinJSbridge是否初始化了呗。做了如下几步，问题基本解决：

1.将<input type="file">默认设为不可用，即<input type="file" disabled="disabled">;

2.判断是否是微信浏览器

                        /*** 此方法判断是否是在微信浏览器中*/function isWeixin() {var WxObj = window.navigator.userAgent.toLowerCase();if(WxObj.match(/microMessenger/i) == 'micromessenger') {return true;} else {return false;}}

3.如果是微信浏览器就检测是否初始化完成，或者设置初始化完成的监听方法/非微信浏览器将input设为可用

                            if(isWeixin()) {if(typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {$("input[id=img]").removeAttr("disabled");} else {document.addEventListener("WeixinJSBridgeReady", function() {$("input[id=img]").removeAttr("disabled");}, false);}} else {$("input[id=img]").removeAttr("disabled");}

4.然后保存，运行正常了

测试代码如下：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"><meta name="format-detection" content="telephone=no, email=no"><title>个人中心</title><script type="text/javascript">(function(win) {var doc = win.document;var html = doc.documentElement;// defaut 1080pxvar baseWidth = 1080;var grids = baseWidth / 100,resizeEvt = 'orientationchange' in win ? 'orientationchange' : 'resize',recalc = function() {var clientWidth = html.clientWidth || 375; // default to 375 if can't get device-widthhtml.style.fontSize = clientWidth / grids + 'px';};win.addEventListener(resizeEvt, recalc, false);doc.addEventListener('DOMContentLoaded', recalc, false);recalc();})(window);</script><script src="js/jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script><style>body {background: #f2f2f2}.user {background: #fff;text-align: left;padding: .6rem 0}.user-avatar {display: inline-block;width: 1.15rem;height: 1.15rem;border-radius: 50%;overflow: hidden;vertical-align: middle;margin-left: .6rem}.user-avatar img {display: block;width: 100%;height: 100%}.user-name {font-size: .42rem;color: #323232}.user-nickname {font-size: .42rem;color: #323232;line-height: 1;display: inline-block;margin-left: .34rem;vertical-align: middle}.input-upload-image {width: 100%;height: 100%;display: block;z-index: 1;border: none;-webkit-opacity: 0;opacity: 0;}.user-avatar img {z-index: 2;margin-top: -1.15rem;}</style></head><body><div class="user"><div class="user-avatar"><input type="file" disabled="disabled" accept="image/*" multiple="multiple" id="img" class="input-upload-image" /><img src="img/grzx_avatar-460e304cd2.png" alt=""></div><p class="user-nickname" style="min-width: 80px;">个人昵称</p></div><script>var b64;var dataUrl;var file = null;var result1 = '',result2 = '',result3 = '',result4 = '',result5 = '',result6 = '';document.getElementById("img").addEventListener('change', function(ev) {ev.stopPropagation();var thisimg = document.getElementById("img");var reader = new FileReader();reader.onload = function(e) {var compressImg = compress(this.result, fileSize, function(base64Str) {thisimg.src = base64Str;uploadimg(function(res) {if(res != null) {$(thisimg).parent().find("img").attr("src", base64Str);}});});b64 = e.target.result;};reader.readAsDataURL(this.files[0]);result1 = this.files[0].size + ' Bytes';file = this.files[0];var fileSize = Math.round(this.files[0].size / 1024 / 1024);}, false);/*** 上传图片* @param {Object} callbc*/function uploadimg(callbc) {if(file != null) {var xmlhttp = null;var formData = new FormData(); //这里连带form里的其他参数也一起提交了,如果不需要提交其他参数可以直接FormData无参数的构造函数  formData.append("imgfile", convertBase64UrlToBlob(dataUrl));formData.append("fileType", ".png");formData.append("uid", 1);var f = convertBase64UrlToBlob(dataUrl);var url = "http://xxxxxx/uploadImg.php";//你的上传图片的服务地址if(window.XMLHttpRequest) {xmlhttp = new XMLHttpRequest();} else if(window.ActiveXObject) {xmlhttp = new ActiveXObject();}xmlhttp.open("POST", url, true);xmlhttp.send(formData);xmlhttp.onload = function(e) {if(this.status == 200) {var obj = eval("(" + this.responseText + ")");callbc(obj);}};} else {alert("请点击头像选择图片");}}var compress = function(res, fileSize, callback) {var result2, result3, result4, result5;var img = new Image(),maxW = 600; //设置最大宽度img.onload = function() {var cvs = document.createElement('canvas'),ctx = cvs.getContext('2d');result2 = img.width;result3 = img.height;if(result3 > 600) {img.width *= 600 / img.height;img.height = 600;} else {}if(img.width > maxW) {img.height *= maxW / img.width;img.width = maxW;}cvs.width = img.width;cvs.height = img.height;result4 = cvs.width;result5 = cvs.height;ctx.clearRect(0, 0, cvs.width, cvs.height);ctx.drawImage(img, 0, 0, img.width, img.height);var compressRate = getCompressRate(0.8, fileSize);dataUrl = cvs.toDataURL('image/*', compressRate);callback(dataUrl);};img.src = res;};function getCompressRate(allowMaxSize, fileSize) { //计算压缩比率，size单位为MBvar compressRate = 1;if(fileSize >= 1) {compressRate = 0.6;} else if(fileSize > 0.2 && fileSize < 1) {compressRate = 0.8;} else {compressRate = 0.9;}result6 = compressRate;return compressRate;}/**  * 将以base64的图片url数据转换为Blob  * @param urlData  *            用url方式表示的base64图片数据  */function convertBase64UrlToBlob(urlData) {var bytes = window.atob(urlData.split(',')[1]); //去掉url的头，并转换为byte  //处理异常,将ascii码小于0的转换为大于0  var ab = new ArrayBuffer(bytes.length);var ia = new Uint8Array(ab);for(var i = 0; i < bytes.length; i++) {ia[i] = bytes.charCodeAt(i);}return new Blob([ab], {type: 'image/png'});}</script><script>setCanChangePic();/*** 设置input选择图片可用*/function setCanChangePic() {if(isWeixin()) {if(typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {$("input[id=img]").removeAttr("disabled");} else {document.addEventListener("WeixinJSBridgeReady", function() {$("input[id=img]").removeAttr("disabled");}, false);}} else {$("input[id=img]").removeAttr("disabled");}}/*** 此方法判断是否是在微信浏览器中*/function isWeixin() {var WxObj = window.navigator.userAgent.toLowerCase();if(WxObj.match(/microMessenger/i) == 'micromessenger') {return true;} else {return false;}}</script></body></html>

微信浏览器点击选择图片报错 WeiXinJSbridge is not defined相关推荐

vite：vue中引入图片报错require is not defined
问题在 vite 项目中这样引入图片报错 images: require('../assets/images/right.png') 改为 images: new URL('../assets/im ...
vue微信浏览器安卓正常 ios config 报错 “errMsg“:“config:invalid问题
最近使用了wx-js-sdk,对接了一下微信环境下的功能,在使用wx.config中android 上可以config ok 的但换到苹果上报出invalid signature的错误. 对于这个 ...
小米手机裁剪图片报错java.lang.SecurityException
前言众所周知Android7.0提高了安全防护,不允许应用内部Uri暴露给外部,因此引入了FileProvider.有关FileProvider的使用和配置,这里就不赘述了.我这里出现的问题是选择图 ...
微信小程序渲染图片报错：[渲染层网络层错误] Failed to load local image resource
微信小程序渲染图片报错解决:[渲染层网络层错误] Failed to load local image resource 背景通过用户点击上传图片,通过res.tempFilePaths拿到用户上传 ...
php 点击选择图片上传,微信小程序图片选择、上传到服务器、预览（PHP）实现实例...
微信小程序图片选择.上传到服务器.预览(PHP)实现实例小程序实现选择图片.预览图片.上传到开发者服务器上后台使用的tp3.2 图片上传请求时候的header参考时可以去掉(个人后台验证权限使用 ...
登录网银显示服务器内部错误怎么办,网银提示无法大额转账？点击登录出现报错？解决方法看这里...
原标题:网银提示无法大额转账?点击登录出现报错?解决方法看这里为帮助大家能够更好地使用江西·农商银行网上银行今天小编收集了一些关于网上银行的常见问题并详细为大家解答 1️⃣ 跨行转账(个人 ...
springboot接收图片报错 request is not a multipart request 和 multipart boundary was found
后台接收图片报错 request is not a multipart request 和 multipart boundary was found request is not a multipar ...
微信小程序使用vant weapp报错
微信小程序使用vant weapp报错错误一:构建错误错误二:["usingComponents"]["van-button"] 未找到我的安装流程 1. ...
微信浏览器移动端禁止图片放大图片效果
解决第三方网页在微信浏览器中点击图片自动放大,因为微信Android客户端已经在底层支持img标签自动放大功能: 传统方式: $(document).on('click', 'img', e => ...

微信浏览器点击选择图片报错 WeiXinJSbridge is not defined

微信浏览器点击选择图片报错 WeiXinJSbridge is not defined相关推荐

最新文章

热门文章