【咨询】在使用 uniapp 打包的apk 中通过web-view 加载 uniapp h5, uniapp h5 无法使用 uniapp api吗？

小菜啊 - 业精于勤荒于嬉

app和h5的运行环境不一样这是正常的效果

9***@qq.com (作者)

大佬有什么操作可以让h5调用到 api 的方法吗

2023-07-20 17:31
小菜啊

回复 9***@qq.com: 下面官方回复了

2023-07-20 17:36
9***@qq.com (作者)

回复小菜啊: 谢谢大佬

2023-07-21 09:48

BoredApe - 有问题就会有答案。

因为uni-app 打包H5会使用h5的api实现打开相册。所以你在web-view中集成h5后只会使用h5API。不过你可以使用适配器模式,配合uni-app实现一套jsBridge。 web-view通过postMessage向app发送消息。app通过evalJS向web-view注入回调.

web-view中：

uni.webView.postMessage({    
    data: {    
        type: '__JSBridge',    
        action: 'getCamera',    
        callBackFn: 'cameraCallBack'    
    }    
})    

window.cameraCallBack = function(e){    
    console.log('ecameraCallBack boredape:>>>>>>>>>>>> todo_tmFilename-:todo_tmLineNumber', e);    
}

APP：

<web-view src="http://192.168.0.111:8080/#/" @onPostMessage="handlePostMsg" @message="handlePostMsg"></web-view>  
handlePostMsg(bridgeData){    
    const {    
        detail: { data: [{ action, type, params, callBackFn }] },    
    } = bridgeData;    
if (type === '__JSBridge') {    
    const pages = getCurrentPages();     
    const childrenPage = pages[pages.length - 1].$getAppWebview().children()[0];    

    uni.chooseImage({    
    success({tempFilePaths}) {    
        // 向webview注入回调    
        page.evalJS(`${callBackFn}('${tempFilePaths}')`)    
    }    
    })    
}    
}

9***@qq.com (作者)

感谢大佬提供的思路，我在使用中出现了一些问题，调用 postMessage 方法一直失败

尝试过 uni.webView.postMessage 与 uni.postMessage

也引用过



<script type="text/javascript" src="/static/webview.1.5.4.js"></script>

均不能项APP的项目发送消息。

测试中，我创建了两个项目，一个通过与Android APP基座（简称：A），一个运行至浏览器（简称：B），A中通过 webview 调用 B ，B 中进行 postMessage，与 webview.js 导入，使用上应该没有什么问题

尝试在B中打印 uni

console.log(JSON.stringify(uni));

得到结果

{"interceptors":{"promiseInterceptor":{}}} at webpack-internal:///yRel:46

没有 webView 或 postMessage 方法，十分迷茫

2023-07-21 09:40
9***@qq.com (作者)

使用 uni.navigateBack() 是成功的在导入了 <script type="text/javascript" src="/static/webview.1.5.4.js"></script> 之后

2023-07-21 09:48
9***@qq.com (作者)

uni.webView.postMessage

报 Cannot read property 'postMessage' of undefined

uni.postMessage

报 TypeError: uni.postMessage is not a function

我发现使用 uni.www.postMessage

报 Cannot read property 'postMessage' of undefined

只要将 webView 换成任何字段，都会报 Cannot read property 'postMessage' of undefined

在打印 uni.webView 为 undefined

2023-07-21 10:01
BoredApe

回复 9***@qq.com: uni.webview.1.5.4.js没有正确引入

2023-07-21 13:07
9***@qq.com (作者)

回复 BoredApe: 通过 import * as uni from '../../static/webview.1.5.4.js' 引用后已成功获取到图片地址，但是在H5 中显示图片时， image error： {"errMsg":"GET _doc/uniapp_temp_1689932947960/camera/1689933268662.jpg 404 (Not Found)"}

2023-07-21 17:58

BoredApe - 有问题就会有答案。

请参考此Demo

JsBridgeDemo.zip

9***@qq.com (作者)

十分感谢大佬，最后的问题或许我没有表达清楚，附上代码与修改后demo，应该是h5 获得的路劲与 uniapp 本身的路径有些差别，是否有方法将这个路径兼容呢

2023-07-24 08:58
9***@qq.com (作者)

我只修改了 JsBridgeDemoForwebView 这个项目，故只上传了webview项目，仅修改将app返回图片显示，图片显示与上传用这个思路后都需获取导图片，这个就有些头疼

2023-07-24 09:06

9***@qq.com (作者)

methods: {  
            handleBtnClick(action) {  
                uni.webView.postMessage({  
                    data: {  
                        type: '__JSBridge',  
                        action,  
                        callBackFn: `${action}CallBack`,  
                    },  
                });  
                window.scanCodeCallBack = function(data) {  
                    console.log('scanCodeCallBack data :>>>>>>>>>>>> index.vue:32', data);  

                };  
                let that = this;  
                window.cameraCallBack = function(data) {  
                    console.log('cameraCallBack data :>>>>>>>>>>>> index.vue:32', data);  
                    // 此处将APP的路径显示出来（ h5 无法显示图片 ）  
                    // 获得路劲为：_doc/uniapp_temp_1690158701210/camera/1690159217830.jpg  
                    that.imagePath = data;  
                };  
            },  

            handleBtnH5Click(action) {  
                let that = this;  
                uni.chooseImage({  
                    success({tempFilePaths}) {    
                        console.log(tempFilePaths[0]);  
                        // 直接使用H5 （显示）  
                        // 获得路劲为：blob:http://192.168.60.199:8082/07c7752d-7355-4db0-bc75-2a92838f70b8  
                        that.imagePath = tempFilePaths[0];  
                    }      
                })  
            }

JsBridgeDemoForwebView.zip

1***@qq.com

应该可以试一下，将图片转为base64再返回给H5使用。

function getLocalFilePath(path) {

if (path.indexOf('_www') === 0 || path.indexOf('_doc') === 0 || path.indexOf('_documents') === 0 || path.indexOf('_downloads') === 0) {

return path

}

if (path.indexOf('file://') === 0) {

return path

}

if (path.indexOf('/storage/emulated/0/') === 0) {

return path

}

if (path.indexOf('/') === 0) {

var localFilePath = plus.io.convertAbsoluteFileSystem(path)

if (localFilePath !== path) {

return localFilePath

} else {

path = path.substr(1)

}

}

return '_www/' + path

}

export function pathToBase64(path) {

return new Promise(function(resolve, reject) {

if (typeof window === 'object' && 'document' in window) {

var canvas = document.createElement('canvas')

var c2x = canvas.getContext('2d')

var img = new Image

img.onload = function() {

canvas.width = img.width

canvas.height = img.height

c2x.drawImage(img, 0, 0)

resolve(canvas.toDataURL())

}

img.onerror = reject

img.src = path

return

}

if (typeof plus === 'object') {

plus.io.resolveLocalFileSystemURL(getLocalFilePath(path), function(entry) {

entry.file(function(file) {

var fileReader = new plus.io.FileReader()

fileReader.onload = function(data) {

resolve(data.target.result)

}

fileReader.onerror = function(error) {

reject(error)

}

fileReader.readAsDataURL(file)

}, function(error) {

reject(error)

})

}, function(error) {

reject(error)

})

return

}

if (typeof wx === 'object' && wx.canIUse('getFileSystemManager')) {

wx.getFileSystemManager().readFile({

filePath: path,

encoding: 'base64',

success: function(res) {

resolve('data:image/png;base64,' + res.data)

},

fail: function(error) {

reject(error)

}

})

return

}

reject(new Error('not support'))

})

}

2023-07-24 09:41

1***@qq.com

function getLocalFilePath(path) {  
    if (path.indexOf('_www') === 0 || path.indexOf('_doc') === 0 || path.indexOf('_documents') === 0 || path.indexOf('_downloads') === 0) {  
        return path  
    }  
    if (path.indexOf('file://') === 0) {  
        return path  
    }  
    if (path.indexOf('/storage/emulated/0/') === 0) {  
        return path  
    }  
    if (path.indexOf('/') === 0) {  
        var localFilePath = plus.io.convertAbsoluteFileSystem(path)  
        if (localFilePath !== path) {  
            return localFilePath  
        } else {  
            path = path.substr(1)  
        }  
    }  
    return '_www/' + path  
}  

export function pathToBase64(path) {  
    return new Promise(function(resolve, reject) {  
        if (typeof window === 'object' && 'document' in window) {  
            var canvas = document.createElement('canvas')  
            var c2x = canvas.getContext('2d')  
            var img = new Image  
            img.onload = function() {  
                canvas.width = img.width  
                canvas.height = img.height  
                c2x.drawImage(img, 0, 0)  
                resolve(canvas.toDataURL())  
            }  
            img.onerror = reject  
            img.src = path  
            return  
        }  
        if (typeof plus === 'object') {  
            plus.io.resolveLocalFileSystemURL(getLocalFilePath(path), function(entry) {  
                entry.file(function(file) {  
                    var fileReader = new plus.io.FileReader()  
                    fileReader.onload = function(data) {  
                        resolve(data.target.result)  
                    }  
                    fileReader.onerror = function(error) {  
                        reject(error)  
                    }  
                    fileReader.readAsDataURL(file)  
                }, function(error) {  
                    reject(error)  
                })  
            }, function(error) {  
                reject(error)  
            })  
            return  
        }  
        if (typeof wx === 'object' && wx.canIUse('getFileSystemManager')) {  
            wx.getFileSystemManager().readFile({  
                filePath: path,  
                encoding: 'base64',  
                success: function(res) {  
                    resolve('data:image/png;base64,' + res.data)  
                },  
                fail: function(error) {  
                    reject(error)  
                }  
            })  
            return  
        }  
        reject(new Error('not support'))  
    })  
}

9***@qq.com (作者)

感谢大佬思路，这个思路我也有考虑过，这样做有个顾虑，担心有些机子的兼容性会存在问题

2023-07-24 09:50
大世界

回复 9***@qq.com: 所以最后是怎么解决了吗

2024-05-22 10:02

【咨询】在使用 uniapp 打包的apk 中通过web-view 加载 uniapp h5, uniapp h5 无法使用 uniapp api吗？

5 个回复

公告

相关问题

【咨询】在使用 uniapp 打包的apk 中通过web-view 加载 uniapp h5, uniapp h5 无法使用 uniapp api吗？

与内容相关的链接

5 个回复

公告

相关问题