HarmonyOS鸿蒙Next中一招解决快应用页面白屏和按钮无响应问题

HarmonyOS鸿蒙Next中一招解决快应用页面白屏和按钮无响应问题

现象描述：

快应用打开后会白屏一段时间，然后才能正常显示，正常显示后点击按钮没有响应，再过一段时间，按钮可点击。

问题代码：

<template>
    <!-- Only one root node is allowed in template. -->
    <div class="container">
        <input type="button" value="生成" onclick="write"/>
        <input type="button" value="删除" onclick="remove"/>
    </div>
</template>

<style>
    .container {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: red;
    }
</style>

<script>
    import file from '@system.file'
    import prompt from '@system.prompt';
    module.exports = {
        data: {
            componentData: {},
            arr: [],
            file: '',
            fileuri: '',
        },
        onInit() {
        },
        onReady() {
            this.write()
        },
        write() {
            console.log("handling success 11222111");
            for (let i = 0; i < 10000; i++) {
                file.writeText({
                    uri: 'internal://cache/test/test' + i + '.txt',
                    text: 'nihaadpafsafa fsafass faf  sfsa sf',
                    encoding: 'UTF-8',
                    success: function () {
                        console.log('success');
                    },
                })
            }
            console.log("handling success 11111");
            prompt.showToast({
                message: '10000个文件写完成了',
                duration: "2000",
            })
        },
        remove() {
            file.list({
                uri: "internal://cache/test/",
                success: function (data) {
                    console.log(data)
                    for (let i = 0; i < 1000; i++) {
                        console.log("message", data.fileList[i].uri);
                        file.delete({
                            uri: data.fileList[i].uri,
                            success: function (data) {
                                console.log("hjj handling success");
                            },
                            fail: function (data, code) {
                                console.log("handling fail, code=" + code + data);
                            }
                        })
                    }
                },
                fail: function (data, code) {
                    console.log("handling fail, code=" + code);
                }
            })
            prompt.showToast({
                message: '10000个文件删除完成了',
                duration: "2000",
            })
        }
    }
</script>

现象截图如下所示：

图1 白屏	图2 正常

问题分析：

该段代码实现了应用启动时，在页面生命周期onReady使用file接口大批量创建文件的功能。白屏是因为write方法里调用file.write接口通过for循环写了10000个文件，而这一操作是需要一段时间的，导致页面没有及时渲染出来，需要等文件创建完成后才能正常显示。

同理文件删除操作也是一样的，点击页面“删除”按钮，响应事件delete方法里调用file.delete接口删除所有的文件也需要一段时间的，此时再去点击其他按钮是没有反应的，需要等当前这个操作完成才可以。

解决方案：

快应用引擎的JS是单线程的，不能并发执行，函数执行和js事件交互都是排队的。不建议在快应用里运行耗时很长的代码，建议把wrtie和delete方法删除或者进行优化，先生成一部分，把剩下的放到后面去执行。否则就会出现加载白屏和按钮点击无反应的问题。