HarmonyOS鸿蒙Next中Web组件加载本地资源应该如何拼接路径？

HarmonyOS鸿蒙Next中Web组件加载本地资源应该如何拼接路径？ 在android中使用同一套本地we资源，效果一切正常，但是在鸿蒙中效果异常，

android中的配置，

鸿蒙中的配置

同时附上index.js 代码：主要逻辑为取出对应路径的文件进行加载

var url = location.search.substring(1);

function createPage() {
    var canvas = document.createElement("canvas");
    document.body.appendChild(canvas);
    return canvas;
}

alert(url);

function renderPage(num) {
    pdfDoc.getPage(num).then(function(page) {
        var viewport = page.getViewport({ scale: 2.0 });
        var canvas = createPage();
        var ctx = canvas.getContext('2d');

        canvas.height = viewport.height;
        canvas.width = viewport.width;

        page.render({
            canvasContext: ctx,
            viewport: viewport
        }).promise.then(() => {});
    });
}

function getQueryParam(param) {
    const urlParams = new URLSearchParams(window.location.search);
    return urlParams.get(param);
}

const pdfUrl = getQueryParam('pdfUrl');
if (pdfUrl) {
    console.error('pdfUrl =》 ' + location.search);
    pdfjsLib.getDocument(pdfUrl).promise.then(function(pdf) {
        pdfDoc = pdf;
        for (var i = 1; i <= pdfDoc.numPages; i++) {
            renderPage(i);
        }
    }).catch(function(error) {
        console.error('Error loading PDF: ' + error);
    });
} else {
    console.error('No PDF URL provided');
}

有以下问题：

  1. 鸿蒙中是否允许这种方式拼接路径？
  2. 如果对js文件进行修改，修改为固定路径，应该如何在js中引用鸿蒙项目中raw文件夹中的文件

更多关于HarmonyOS鸿蒙Next中Web组件加载本地资源应该如何拼接路径？的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

在HarmonyOS鸿蒙Next中，Web组件加载本地资源时，路径拼接需要使用resource://协议。具体路径拼接格式如下：

  1. 本地HTML文件：resource://rawfile/文件名，例如resource://rawfile/index.html。
  2. 本地CSS/JS文件：resource://rawfile/路径/文件名，例如resource://rawfile/css/style.css。
  3. 本地图片文件：resource://rawfile/路径/文件名，例如resource://rawfile/images/logo.png。

示例：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="resource://rawfile/css/style.css">
</head>
<body>
    <img src="resource://rawfile/images/logo.png">
    <script src="resource://rawfile/js/script.js"></script>
</body>
</html>

注意事项：

  • 确保文件放在resources/rawfile目录下。
  • 路径区分大小写，需与实际文件路径一致。

更多关于HarmonyOS鸿蒙Next中Web组件加载本地资源应该如何拼接路径？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，使用Web组件加载本地资源时，路径拼接应遵循以下规则：

  1. 资源放置位置：将资源文件放置在resources/rawfile目录下。
  2. 路径拼接：使用rawfile://协议拼接路径，格式为rawfile:///[资源文件名]. 例如，加载resources/rawfile/index.html文件，路径应为rawfile:///index.html。

示例代码：

webController.loadUrl('rawfile:///index.html');

确保资源文件路径正确，避免路径错误导致加载失败。

回到顶部