那些在用JS开发鸿蒙/HarmonOS踩过的坑（持续补充中）

知识有限，持续更新，欢迎补充

HML

<input/>

数据双向绑定：

<input type="text" value="{{ username }}" placeholder="Please input username" @change="set_username"></input>

import prompt from '@system.prompt';

export default {
    data: {
        username: "[email protected]",
    },
    set_username(name) {
        prompt.showToast({
            message: name.text,
            duration: 1000
        })
        this.username = name.text;
    }
}

需要注意的是，set_username(name) 中 name 并不是直接接收一个 string 类型的变量，而是一个类型，大概如下

 {
    text: string,               // 用户修改后的值
    value: string,              // 用户修改后的值，目前不知道和上面的区别
    lines: number,              // 行数
    height: number,             // 高度？，不知道作用
    type: string,               // 类型，应该是触发的事件类型，上面那个 input 标签的该项就是 change
    target: string,             // 目标？，不知道作用
    currentTarget: string,      // 当前目标？
    timestamp: number,          // 时间戳
    stopPropagation: string,    // 拦截冒泡的次数？
}

换行

目前还不知道，我也正犯愁，知道后会第一时间更新

CSS

JS

CONFIG

隐藏标题栏

{
    "module": {
        "abilities": [
            {
                // 添加 metaData 属性
                "metaData": {
                    "customizeData": [
                        {
                            "name": "hwc-theme",
                            "value": "androidhwext:style/Theme.Emui.Light.NoTitleBar"
                        }
                    ]
                }
            }
        ]
    }
}

全屏

public class MainAbility extends AceAbility {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        // 添加下面这行代码
        getWindow().addFlags(WindowManager.LayoutConfig.MARK_FULL_SCREEN);
    }

    @Override
    public void onStop() {
        super.onStop();
    }
}

调试时在桌面显示图标

{
    "module": {
        "distro": {
            "installationFree": false // 改成 false
        }
    }
}

绑定事件（传参）

export default {
    data: {
        page: 1,
        menu: [
            "我的会员",
            "账号安全",
            "设置"
        ]
    },
    change_page(idx) {
        this.page = idx;
    }
}

<list>
    <list-item for="{{ (idx, val) in menu }}" @click="change_page({{ idx }})">
        <text class="menu-list-item">
            {{ idx }} {{ val }}
        </text>
    </list-item>
</list>