WebComponent
用于内嵌网页
开启加载网络页面的权限
js
"requestPermissions": [
{
"name": "ohos.permission.INTERNET" // 使用网络权限
}
],加载网页
组件创建时加载
js
import { webview } from '@kit.ArkWeb';
@Entry
@Component
struct Index2 {
controller: webview.WebviewController = new webview.WebviewController();
build() {
Column(){
Web({ src: 'www.uiyin.com', controller: this.controller })
}
}
}点击加载
js
import { webview } from '@kit.ArkWeb';
@Entry
@Component
struct Index2 {
controller: webview.WebviewController = new webview.WebviewController();
build() {
Column(){
Row(){
Button("点击加载").type(ButtonType.Normal).onClick(()=>{
this.controller.loadUrl('https://vue.uiyin.com/')
})
}
Row(){
Column(){
Web({ src: 'www.uiyin.com', controller: this.controller })
}
}
}
}
}加载本地页面
新建 load.html
- resource-> rawfile--->新建 load.html
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
/>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<p>测试页面</p>
</body>
</html>本地加载页面
js
import { webview } from '@kit.ArkWeb';
@Entry
@Component
struct Index2 {
controller: webview.WebviewController = new webview.WebviewController();
build() {
Column(){
Row(){
Button("点击加载").type(ButtonType.Normal).onClick(()=>{
this.controller.loadUrl($rawfile('load.html'))
})
}
Row(){
Column(){
Web({ src: 'www.uiyin.com', controller: this.controller })
}
}
}
}
}加载 html 数据
- loadData
js
import { webview } from '@kit.ArkWeb';
@Entry
@Component
struct Index3 {
controller: webview.WebviewController = new webview.WebviewController();
build() {
Column(){
Row(){
Button("点击加载").type(ButtonType.Normal).onClick(()=>{
// this.controller.loadUrl($rawfile('load.html'))
this.controller.loadData(
"<html><body bgcolor=\"white\">Source:<pre>source</pre></body></html>",
"text/html",
"UTF-8"
);
})
}
Row(){
Column(){
Web({ src: 'www.uiyin.com', controller: this.controller })
}
}
}
}
}