HarmonyOS鸿蒙Next中快应用如何打开手机中的html文件

HarmonyOS鸿蒙Next中快应用如何打开手机中的html文件 【关键字】

本地html、多媒体、路由

【问题背景】

快应用中的web组件无法打开本地的html文件，仅支持加载http和https格式的链接，那么快应用中如何查看手机中的本地html文件呢？

【解决方案】

快应用中虽然不能通过web组件打开的本地html文件，但是我们以通过media.pickFile方法选取本地要打开的html文件，然后调用router.push打开。router接口中的uri是可以填写为internal地址的，会根据uri的文件扩展名来确定文件类型，再调用系统中的应用打开文件。我们只需要调用media接口去选中文件拿到uri就可以打开了。

获取流程：

Step1：

select() {
    var that = this
    media.pickFile({
        success: function (data) {
            console.log('handling success: ' + data.uri);
            that.fileUrl = data.uri
        },
        fail: function (data) {
            console.log('handling fail:  code' + data.code);
        }
    })
},

Step2：

go() {
    router.push({
        uri: this.fileUrl,
    })
}

日志:

handling success: internal://tmp/e6707c59-f550-4f64-998a-ec2da98686e2/test1.html

截图：

cke_2916.png

cke_3886.png


更多关于HarmonyOS鸿蒙Next中快应用如何打开手机中的html文件的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于HarmonyOS鸿蒙Next中快应用如何打开手机中的html文件的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，快应用可以通过调用系统文件管理器来打开手机中的HTML文件。具体步骤如下：

  1. 使用@system.file模块：通过file.choose方法调用系统文件管理器，选择HTML文件。
  2. 获取文件路径：选择文件后，获取文件的URI路径。
  3. 使用Web组件加载：在快应用页面中使用<web>组件，将获取的HTML文件路径设置为src属性，即可加载并显示HTML内容。

示例代码：

import file from '@system.file';

file.choose({
  success: function(data) {
    this.htmlPath = data.uri;
  }
});

在页面中：

<web src="{{htmlPath}}"></web>
回到顶部