module.json5中申请网络权限
TypeScript
复制代码
{
"module": {
"requestPermissions": [
{
"name": "ohos.permission.INTERNET", // 网络权限
"reason": "$string:internet_reason",
"usedScene": {
"abilities": [],
"when": "always"
}
}
]
}
}
javascript
复制代码
{
"string": [
{
"name": "internet_reason",
"value": "网络访问"
}
]
}
跳转WebView时传值
TypeScript
复制代码
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
TypeScript
复制代码
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);
})
}
}
示意图
