web

概述

用于显示在线的html页面在webview的useragent后追加内容，格式是hap/<平台版本号>/<厂商标识> <平台应用包名>/<平台应用版本号> <应用包名>/<应用版本号> (<来源信息>)。“来源信息”与app接口的getInfo方法返回结果中的source字段相同。

<web>组件支持文件下载的能力，可以通过“打开网页”接口实现。

使用限制

子组件

不支持。

属性

<web>组件支持如下属性。

web组件从1090版本开始，支持html5页面中input标签的capture属性。

web组件支持文件上传；从1040版本开始，可以拉起拍照界面、录制视频界面和录制音频界面。编辑需跳转界面的html文件，在html文件中对<input>组件进行设置，然后通过web组件的src属性调用此html文件。

• 跳转拍照界面：点击input区域，弹出如下图所示选项，选择“拍照”进行拍照；选择“图片”，可以从手机中选择accept属性设置类型的图片文件。

  

  <input type="file" accept="image/*"/>    //选择图片时，可以选择所有图片文件
  <input type="file" accept=".png,.gif,.jpeg"/>    //选择图片时，可以选择accept中设置的图片格式文件
  <input type="file" accept="image/png,image/gif,image/jpeg"/>    //选择图片时，可以选择accept中设置的图片格式文件

• 跳转录像界面：点击input区域，弹出如下图所示选项，选择“录像”进行录像；选择“视频”，可以从手机中选择accept属性设置类型的视频文件。

  

  <input type="file" accept="video/*"/>    //选择视频时，可以选择所有视频文件
  <input type="file" accept=".mp4"/>    //选择视频时，可以选择accept中设置的视频格式文件

• 跳转录音界面：点击input区域，弹出如下图所示选项，选择“录音”进行录音；选择“音频”，可以从手机中选择accept属性设置类型的音频文件。

  

  <input type="file" accept="audio/*"/>    //选择音频时，可以选择所有音频文件

事件

不支持swipe事件。低于1040版本不支持click事件。除了支持 通用事件 以外，还支持如下事件。

网页中可使用的事件：

pagestart事件新增返回参数(1080+)：

error事件新增返回参数(1080+)：

方法

网页中可使用的方法(1020+)：

canForward回调函数返回参数：

canBack回调函数返回参数：

postMessage的参数说明（1100+）：

Web组件支持全屏播放能力（1030+）。当全屏播放时，需要调用back方法才能退出全屏。如果您的快应用中的web组件已经对返回键进行了处理（当canBack时调用web组件的back），不需要额外处理。如果没有处理返回键事件，需要增加处理（示例代码如下），以实现全屏时点击返回键切回非全屏状态。

onBackPress() {
    this.$element('web').canBack({
        callback: function (e) {
            if (e) {
                this.$element('web').back();
            } else {
                router.back();
            }
        }.bind(this)
    });
    return true;
}

相关接口

在 web 打开的网页中支持以下jssdk接口：

示例代码

window.hap.getEnv(data => {
  console.log(data.quickapp)
})

window.hap.scan({
  scanType: 0, success: (data) => {
    console.log(`handling success: ${data.result}`)
  }, fail: (data, code) => {
    console.log(`handling fail, code = ${code}`)
  }, cancel: () => {
    console.log('cancel')
  }, complete: () => {
    console.log('complete')
  }
})

示例代码

<template>
    <div class="container">        
        <div class="titleBar">            
            <text class="titleBar-text" onclick="back">返回</text>>          
            <text class="titleBar-text">
                {{title}}
            </text>          
            <text class="titleBar-text" onclick="refresh">刷新</text>>
        </div>
        <web class="web-page" src="{{websrc}}" trustedurl="{{list}}" onpagestart="onPageStart" onpagefinish="onPageFinish" ontitlereceive="onTitleReceive"
            onerror="onError" onmessage="onMessage" id="web" whiteDomain="{{domainList}}" intercepturl="{{interceptlist}}  onshouldoverrideurl="shouldOverrideUrl" onintercepturl="intercepturl"></web>       
    </div>
</template>
<style>  
    .container {
      flex-direction: column;
    }
    .titleBar {
        flex-direction: row;
        justify-content: space-between;
        padding: 10px;
        height: 100px;
        width: 100%;   
        background-color: #a9a9a9;    
    }    
    .titleBar-text {
        lines: 1;
        text-overflow: ellipsis;  
        font-size: 40px;
        color: #000000;
        align-content: center;
    }
    .web-page {
        width: 100%;
        height: 800px;
    }    
</style>
<script>
    import router from "@system.router"
    import prompt from '@system.prompt'
    export default {
        data: {
            title: "",
            websrc: 'https://developer.huawei.com/consumer/cn/service/hms/fastapp.html',
            arrowRightShow: true,
            isRefreshing: false,
            list: [/.*/, "new RegExp('https?.*')"],
            // list: [/.*/],
            domainList: ['*.huawei.com'],
            interceptlist: ['https://consumer.huawei.com/en/worldwide/],
            msg: ''
        },
        onInit() {
            this.$on('arrowLeft', this.arrowLeftIcon)
            this.$on('arrowRight', this.arrowRightIcon)
            console.info('websrc: ' + this.websrc)
        },
        onPageStart(e) {
            this.isRefreshing = false;
            console.info('pagestart: ' + 'url is: ' + e.url, ' can go back: ' + e.canBack, ' can go forward: ' + e.canForward)
        },
        // 每次页面的切换会触发
        onPageFinish(e) {
            // console.info('pagefinish: '+e.url, e.canBack, e.canForward)
            // 根据数据是否可以前进历史页面，隐藏右侧图标
            this.arrowRightShow = e.canForward;
        },
        onTitleReceive(e) {
            console.error('onTitleReceive', e.title);
            this.title = e.title;
        },
        onError() {
            console.info('pageError.'+ 'errorMsg: ' + e.errorMsg + ' url is: ' + e.url + ' can go back: ' + e.canBack + ' can go forward: ' + e.canForward + ' errorType: ' + e.errorType + ' code: ' + e.code + ' description: ' + e.description + ' isAuthorized: ' + e.isAuthorized)
        },
        onMessage(e) {
            console.info('onmessage e = ' + e.message + ", url = " + e.url);
            this.msg = e.message;
            // prompt.showToast({
            //      message: e.message + ': ' + e.url
            // })
        },
       shouldOverrideUrl(e) {  
            if (e.url.includes('training')) {  
                prompt.showToast({  
                  message: '[shouldOverrideUrl] URL intercepted: ' + e.url,  
                  duration: 2000,  
                  gravity: 'center'  
                });  
                return true;  
            }  
            return false;  
        },  
       intercepturl(e) {  
                prompt.showToast({  
                  message: '[intercepturl] URL intercepted: ' + e.url,  
                  duration: 2000,  
                  gravity: 'center'  
                });    
            } 
        },
        arrowLeftIcon() {
            this.isCanBack();
        },
        arrowRightIcon() {
            this.isCanForward();
        },
        isCanForward() {
            this.$element('web').canForward({
                callback: function (e) {
                    if (e) {
                        this.$element('web').forward();
                    }
                }.bind(this)
            })
        },
        isCanBack() {
            this.$element('web').canBack({
                callback: function (e) {
                    if (e) {
                        this.$element('web').back();
                    } else {
                        router.back();
                    }
                }.bind(this)
            })
        },
        back() {
            this.$dispatch("arrowLeft");
        },
        next() {
            this.$dispatch('arrowRight');
        },
        refresh: function (e) {
            this.$element('web').reload();
        },
        sendMessage: function () {
            this.$element('web').postMessage({ message: 'message to Web page' });
        }
    }
</script>

版本更新说明

Tips

• 实现双向通信时，H5页面中的方法名请勿使用click，否则会导致无法通信。
• 1070版本以后，支持在html打开新窗口，比如使用window.open打开。新创建窗口中将沿用历史网页的UserAgent配置。对于部分低版本系统，新窗口使用系统默认UserAgent。
• web组件无法打开本地的html文件，可以通过media.pickFile方法选取本地要打开的html文件，然后调用router.push打开。

相关链接

[h2]FAQ

• 打开一个H5页面，能修改标题吗？
• 使用web组件加载H5页面后，无法滚动页面，如何处理？
• 两个网页调用system.postMessage('xxx')，为什么一个页面可以进行通信，一个页面不行？
• 使用web组件嵌入的H5页面，如何判断是否在快应用环境？
• 快应用中内嵌一个web组件，使用代码this.$element('web').postMessage({data.code })通过web组件发送事件到H5页面，但是H5页面没有收到，如何处理？
• web组件加载的网页中有支付宝的H5支付，之前能拉起支付宝的app，现在无法拉起app，只能拉起支付宝的H5页面，为什么？
• web组件打开一个H5网页，网页经过多次跳转后，要保存当前页面的url，快应用中有方法获取当前网页的url吗？
• H5快应用web组件打开的网页出现跨域问题，如何处理？

[h2]案例

• 快应用web双向通信介绍及使用
• Web组件发消息给H5页面时报错
• H5网页弹出软键盘后页面没有上移