当前位置：首页 > news >正文

[Harmony]WebView基本用法

news 来源：原创 2025/5/23 7:51:57

module.json5中申请网络权限

{"module": {"requestPermissions": [{"name": "ohos.permission.INTERNET", // 网络权限"reason": "$string:internet_reason","usedScene": {"abilities": [],"when": "always"}}]}
}

{"string": [{"name": "internet_reason","value": "网络访问"}]
}

跳转WebView时传值

Text() {Span("我已阅读并同意").fontColor($r('app.color.mf_base_333333')).fontSize(15)Span("《用户隐私协议》").fontColor($r('app.color.mf_base_yellow')).fontSize(15).onClick(() => this.userPrivacyPolicy())
}
.textOverflow({ overflow: TextOverflow.Ellipsis })
.maxLines(2)
.layoutWeight(1)  /// 用户隐私协议
private userPrivacyPolicy() {router.pushUrl({url: 'pages/features/protocol/MFProtocolView',params: {webUrl: 'https://www.baidu.com',title: '隐私协议'}})
}

WebView

import { router } from '@kit.ArkUI';
import { webview } from '@kit.ArkWeb';interface MFProtocolParams {webUrl: string;title?: string;
}@Entry
@Component
struct MFProtocolView {@State webUrl: string = ''; // 接收的网页地址@State title: string = '协议详情'; // 导航栏标题private controller: webview.WebviewController = new webview.WebviewController();aboutToAppear() {// 在aboutToAppear生命周期中读取路由参数const params: MFProtocolParams = router.getParams() as MFProtocolParams;if (params) {this.webUrl = params.webUrl || 'about:blank'; // 默认为空页面this.title = params.title || this.title; // 默认为'协议详情'}}build() {Column() {// 导航栏Row({ space: 8 }) {Image($r('app.media.icon_base_back')) // 返回图标.objectFit(ImageFit.Contain).width(24).height(24).onClick(() => {router.back(); // 返回上一页})Text(this.title) // 标题.fontSize(20).fontWeight(FontWeight.Bold)}.width('100%').padding(12).backgroundColor('#F1F3F5')// 必须传递完整WebOptions参数Web({src: this.webUrl,controller: this.controller }).onPageBegin((event) => {console.log('开始加载:' + event.url);})}.width('100%').height('100%').onAppear(()=>{console.log('onAppear:' + this.webUrl);})}
}