app内嵌H5页面上传图片，调用app的方法和注册回调

html

 <!-- app的展示唤起app的相机 --><span  class="file-inp" @click.stop="changeImageApp" ></span>


import { InitBridge, setupWebViewJavascriptBridge } from "@/utils/common";mounted() {//注册上传事件window.AppUpLoadFile = this.AppUpLoadFile;if (isAndroid) {} else {setupWebViewJavascriptBridge((bridge) => {bridge.registerHandler("AppUpLoadFile", this.AppUpLoadFile);});}
}// 手机app部分上传图片changeImageApp() {console.log('app方法调用')if (isAndroid) {InitBridge((bridge) => {bridge.uploadImageMethod(3);});} else {setupWebViewJavascriptBridge((bridge) => {bridge.callHandler("uploadNativeImageMethod", { type: 3, count: 1 }, () => {});});}},//app上传图片糊回调AppUpLoadFile(str) {// alert(str);this.imgIsLoading = true;const index = str.indexOf(",");const progress =str.substring(0, index);const path = str.substring(index + 1, str.length);// alert(path + "图片地址");//上传前if (progress == "beforeupload") {//console.log('beforeupload');}//上传中else if (progress == "uploading") {//console.log('uploading');}//上传成功else if (progress == "success") {this.imageUrls.push(path);this.imgIsLoading = false;}//上传出错else if (progress == "error") {this.imgIsLoading = false;Toast("上传失败，请重试");}},

common.js


// 与app交互
export const InitBridge = function (callback) {try {if (getAppType() === 'ios') {// 建立IOS桥接var onBridgeReady = function (bridge) {if (callback) {callback(bridge);}}if (window.WebViewJavascriptBridge) {onBridgeReady(WebViewJavascriptBridge);} else {if (document.addEventListener) {document.addEventListener('WebViewJavascriptBridgeReady', function () {onBridgeReady(WebViewJavascriptBridge);}, false);} else {document.attachEvent('onWebViewJavascriptBridgeReady', function () {onBridgeReady(WebViewJavascriptBridge);});}}} else {// bridge = manjdSales;if (callback) {callback(manjdSales);}}} catch (e) { };
};export const setupWebViewJavascriptBridge = function (callback) {// 使用navigator.userAgent.toLowerCase()判断登陆端是pc还是手机let ua = window.navigator.userAgent.toLowerCase();// console.log(ua)let vs = ua.match(/iOS-\d*/);// console.log(vs)let vn = nullif(vs){vn = vs.split('-')[1]}if (vn < 163) {InitBridge() }// console.log(window.WebViewJavascriptBridge)if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }window.WVJBCallbacks = [callback];var WVJBIframe = document.createElement('iframe');WVJBIframe.style.display = 'none';WVJBIframe.src = 'https://__bridge_loaded__';document.documentElement.appendChild(WVJBIframe);setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
}

app内嵌H5页面上传图片，调用app的方法和注册回调相关推荐

关于app内嵌h5页面调用百度地图定位问题，为什么定位不准呢？
关于app内嵌h5页面调用百度地图定位问题,为什么定位不准呢?以下为代码. 百度地图:里面有3种定位方式(a:浏览器定位,b:IP定位,c:定位SDK辅助定位),我选择第3种,是需要app那块添加些什 ...
app内嵌h5页面在ios手机端滑动卡顿的解决方法
app内嵌h5页面在ios手机端滑动卡顿的解决方法参考文章: (1)app内嵌h5页面在ios手机端滑动卡顿的解决方法 (2)https://www.cnblogs.com/1rookie/p/11 ...
记录：app内嵌H5页面分享到微信后，在安卓手机打开白屏，苹果手机正常渲染的问题始末
**背景:**app内嵌的一个个人名片页面需要分享到微信,测试环境下,分享到微信后,安卓和苹果手机都能正常渲染,生产环境苹果手机没问题,安卓手机打开分享的链接,页面一直空白. **原因分析:**单独加 ...
android app内嵌h5页面,app内嵌h5页面：前端与原生语言的配合
判断操作系统: var u = navigator.userAgent, app = navigator.appVersion; var isAndroid = u.indexOf('Android' ...
云闪付APP内嵌H5监听左上角X关闭事件
最近在做云闪付蓝牙对接,遇到的一个问题. 需求用户进入云闪付APP内嵌 H5页面调用接口连上蓝牙后,可能不想支付使用,或其他原因,随手关闭左上角X关闭浏览器,这时需要监听这个动作,断开蓝牙连接,不然 ...
H5 -- （功能）App内嵌h5网页实现芝麻认证的接入
1.需求:由于高贵的IOS提审时不能出现支付宝相关字眼及相关SDK,所以我们app芝麻认证只有通过内嵌H5页面实现 2.分析:通过调研 "芝麻认证"官方技术文档 ,接入芝麻认证的流 ...
H5-- （功能）App内嵌h5网页实现芝麻认证的接入
1.需求:由于高贵的IOS提审时不能出现支付宝相关字眼及相关SDK,所以我们app芝麻认证只有通过内嵌H5页面实现 2.分析:通过调研 "芝麻认证"官方技术文档 ,接入芝麻认证的流 ...
微信内嵌h5页面调用拍照和相册功能？
有一个问题: 在微信内嵌h5页面中通过input调用摄像头,ios既可以调用摄像头也可以选择相册,但android只能选择相册,按照网上的兼容性(就是根据capture属性的有无)做了处理后,依然不行 ...
【Appium】测试时遇到手机内嵌H5页面的切换问题
前言:H5页面简单理解就是在手机内嵌套了一些网页格式的信息,可以让手机的应用看起来更丰富一些. 而当手机内嵌H5页面时,常规的app定位方法就没法使用了,我们需要先切换到H5页面才能进行下一步的定位, ...

app内嵌H5页面上传图片，调用app的方法和注册回调

app内嵌H5页面上传图片，调用app的方法和注册回调相关推荐

最新文章

热门文章

app内嵌H5页面 上传图片，调用app的方法和注册回调

app内嵌H5页面 上传图片，调用app的方法和注册回调相关推荐

最新文章

热门文章

app内嵌H5页面上传图片，调用app的方法和注册回调

app内嵌H5页面上传图片，调用app的方法和注册回调相关推荐