9***@qq.com
9***@qq.com
  • 发布:2023-07-20 17:17
  • 更新:2023-07-24 09:42
  • 阅读:313

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

分类:uni-app

uniapp 打包的apk 是客户的, 我们想通过同平台的框架集成进入客户APP,为了日后的通用性,我们想通过uniapp 发布为h5 的版本,但是目前测试 uniapp 的 h5调用API 时, 得到的效果与直接在 原项目中的效果

let that = this;  
                uni.chooseImage({  
                    count: 6, //默认9  
                    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有  
                    sourceType: ['camera'], //从相册选择  
                    success: function (res) {  
                        console.log(JSON.stringify(res.tempFilePaths));  
                        that.imagePath = res.tempFilePaths[0];  
                        console.log(JSON.stringify("that.imagePath" + that.imagePath));  
                    }  
                });

相同的代码:apk中可直接跳转 相机, 在webview的 h5中的效果如图

2023-07-20 17:17 负责人:无 分享
已邀请:
小菜啊

小菜啊 - 业精于勤荒于嬉

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

BoredApe - 有问题就会有答案。

因为uni-app 打包H5会使用h5api实现打开相册。所以你在web-view中集成h5后只会使用h5API。不过你可以使用适配器模式,配合uni-app实现一套jsBridgeweb-view通过postMessageapp发送消息。app通过evalJSweb-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

    也引用过

    <!-- uni 的 SDK,必须引用。 -->

    <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

BoredApe - 有问题就会有答案。

请参考此Demo

  • 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

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];  
                    }      
                })  
            }  
  • 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

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

要回复问题请先登录注册