Tabla de contenido
1. Introducción a los componentes web
3. Establecer estilos y atributos
2. Cargue archivos html locales
2. Inyección de objetos JS, HTML usa objetos JS para llamar a los métodos del cliente
3. El cliente llama al método JS en la página web HTML local.
Cuando utilizamos el marco ArkUI de Hongmeng para desarrollar aplicaciones Hongmeng, el funcionario nos proporciona un componente web para que lo utilicen los desarrolladores. A través de este artículo, comprenderemos y aprenderemos cómo usar componentes web para realizar las siguientes operaciones:
- Carga de página web en línea
- Carga de página web local sin conexión
- Configuración de propiedades comunes para componentes web
- Interacción de comunicación bidireccional entre cliente y página web.
Primero echemos un vistazo a la introducción de los componentes web.
1. Introducción a los componentes web
Web es un componente que proporciona capacidades de visualización de páginas web. Para un uso específico, consulte Web API .
2. Crear componentes
Cree una página de WebComponent .ets en el directorio de páginas y coloque un componente web en la página. En el componente web, especifique la ruta de la página web a la que se hace referencia a través de src. El controlador es el controlador del componente. El componente web está vinculado a través del controlador para llamar al método del componente web.
@Entry
@Component
struct WebComponent {
controller: WebController = new WebController();
build() {
Column() {
Web({ src: 'https://www.douban.com/', controller: this.controller })
}
}
}
Para utilizar componentes web para acceder a páginas web en línea, debe configurar los permisos de red para la aplicación.
Lista de permisos
Al acceder a páginas web en línea, debe agregar permiso de red: ohos.permission.INTERNET
3. Establecer estilos y atributos
El uso de componentes web requiere agregar estilos de página enriquecidos y atributos funcionales. Configurar los estilos de altura y relleno puede agregar altura y relleno al componente web. Configurar el atributo fileAccess puede agregar permisos de acceso a archivos al componente web. Configurar el atributo javaScriptAccess en verdadero permite que el componente web tenga la capacidad de ejecutar código JavaScript.
@Entry
@Component
struct WebComponent {
fileAccess: boolean = true;
controller: WebController = new WebController();
build() {
Column() {
Text('Hello world!')
.fontSize(20)
Web({ src: 'https://www.douban.com/', controller: this.controller })
// 设置高和内边距
.height(500)
.padding(20)
// 设置文件访问权限和脚本执行权限
.fileAccess(this.fileAccess)
.javaScriptAccess(true)
Text('End')
.fontSize(20)
}
}
}
4. Agregar eventos y métodos
Agregue el evento onProgressChange para el componente web, que devuelve el valor de progreso del motor web que carga la página. Asigne el valor de progreso al valor del componente Progreso para controlar el estado del componente Progreso. Cuando el progreso es del 100%, el componente Progreso se oculta y se carga la página web.
import web_view from '@ohos.web.webview';
@Entry
@Component
struct RemoteWebPage {
@State progress: number = 0
@State hideProgress: boolean = true
controller: web_view.WebviewController = new web_view.WebviewController()
build() {
Column() {
Progress({ total: 100, value: this.progress })
.color('#ff5cea20')
.visibility(this.hideProgress ? Visibility.None : Visibility.Visible)
Web({ src: 'https://www.douban.com/', controller: this.controller })
.height('100%')
// 添加onProgressChange事件
.onProgressChange(e => {
this.progress = e.newProgress
// 当进度100%时，进度条消失
if (this.progress == 100) {
this.hideProgress = true
} else {
this.hideProgress = false
}
})
}.backgroundColor('0xFFFFFF')
}
}
El efecto es el siguiente:
Lo anterior trata sobre el uso de componentes web para acceder a una página web en línea ¿Cómo cargar archivos de páginas web locales?
5. Acceda al HTML local
Veamos primero las representaciones.
Implementé un método para cargar archivos de páginas web locales y luego llamar al cliente en la página web HTML, e implementé una función para cerrar la página y abrir el álbum del sistema. Comencemos con la implementación del código.
1. Cree archivos html locales
En el directorio entrada/src/main/resources/rawfile, creamos un archivo index.html
<!-- index.html -->
<!DOCTYPE html>
<html>
<body>
<p>Hello World</p>
<p>这个是来自本地的html文件</p>
<button type="button" onclick="window.jsBridge.closePage()">点击调用原生关闭页面</button>
<button type="button" onclick="window.jsBridge.jumpSystemPicture()">点击拉起原生系统相册</button>
</body>
</html>2. Cargue archivos html locales
Cree una página LocalWebPage y cargue el archivo index.html
import web_view from '@ohos.web.webview';
@Entry
@Component
struct LocalWebPage {
controller: web_view.WebviewController = new web_view.WebviewController()
build() {
Column() {
Web({ src: $rawfile("index.html"), controller: this.controller })
.height('100%')
}
}
}Aquí usamos $rawfile("index.html") para obtener archivos html locales.
2. Inyección de objetos JS, HTML usa objetos JS para llamar a los métodos del cliente
Si necesitamos interactuar con el cliente en la página web, debemos configurar un objeto JS para inyectarlo en HTML, de la siguiente manera:
import web_view from '@ohos.web.webview';
import common from '@ohos.app.ability.common';
import router from '@ohos.router';
@Entry
@Component
struct LocalWebPage {
controller: web_view.WebviewController = new web_view.WebviewController()
jsBridge = {
jumpSystemPicture() {
let context = getContext(this) as common.UIAbilityContext;
let want = {
"deviceId": "",
"bundleName": "",
"abilityName": "",
"uri": "",
"type": "image/*",
"action": "android.intent.action.GET_CONTENT",
"parameters":{},
"entities":[]
};
context.startAbility(want);
},
closePage() {
router.back()
}
}
build() {
Column() {
Web({ src: $rawfile("index.html"), controller: this.controller })
.javaScriptAccess(true)
.javaScriptProxy({
object: this.jsBridge,
name: "jsBridge",
methodList: ["closePage","jumpSystemPicture"],
controller: this.controller
})
.height('100%')
}
}
}Aquí definimos un objeto JS jsBridge y definimos dos métodos, jumpSystemPicture y closePage, que se usan para abrir el álbum del sistema y cerrar la página del cliente en html respectivamente, y luego usamos el método javaScriptProxy de la Web para realizar la configuración de inyección de objetos JS. La configuración es como el código anterior, debe configurar el nombre del objeto y el método de inyección.
Eche un vistazo al código HTML que llama a JS arriba, como llamar al método de cierre de la página del cliente, usando
Se activa window.jsBridge.closePage().
3. El cliente llama al método JS en la página web HTML local.
Agregue el método runJavaScript en el evento onPageEnd. El evento onPageEnd es una devolución de llamada cuando se carga la página web y el método runJavaScript puede ejecutar scripts JavaScript en HTML. Cuando se carga la página, se activa el evento onPageEnd, se llama al método de prueba en el archivo HTML y la información se imprime en la consola.
import web_view from '@ohos.web.webview';
import router from '@ohos.router';
@Entry
@Component
struct LocalWebPage {
controller: web_view.WebviewController = new web_view.WebviewController()
build() {
Column() {
Web({ src: $rawfile("index.html"), controller: this.controller })
.javaScriptAccess(true)
.onPageEnd(e =>{
// test()在index.html中定义
this.controller.runJavaScript('test()');
console.info('url: ', e.url);
})
.height('100%')
}
}
}<!-- index.html -->
<!DOCTYPE html>
<html>
<body>
<p>Hello World</p>
<p>这个是来自本地的html文件</p>
<button type="button" onclick="window.jsBridge.closePage()">点击调用原生关闭页面</button>
<button type="button" onclick="window.jsBridge.jumpSystemPicture()">点击拉起原生系统相册</button>
</body>
<script type="text/javascript">
function test() {
console.info('Ark Web Component');
}
</script>
</html>El método anterior solo menciona llamar al método JS en la página web. Si desea obtener de forma asincrónica los datos devueltos por el método JS, ¿cómo debe hacerlo? Si está interesado, preste atención a la discusión en el área de comentarios. Agregaré más explicaciones cuando tenga tiempo.
Este artículo termina aquí, ¡gracias por leer!