export {  
    data1  
} 

import data from '../../common/js/data.js' 

<div class="container" show="{{flag}}"> 

Q4：為什么export的JS模塊在別的JS文件中import時，會出現修改不生效的情況呢?

A： 在JS開發中，開發者可能會遇到這樣的情況，某個變量在模塊1中，被模塊2 import并使用了，但是修改模塊1中的這個變量，模塊2中并沒有生效這個修改的情況。這是由于HarmonyOS JS UI框架的import是靜態import，即編譯過程會把互相依賴的文件合并以提高運行效率。如果一個JS模塊被多個文件import，則會在不同的文件中分別生成變量。

如果是要共享使用某個變量，使之變化在各模塊中都能生效，建議在app.js里聲明變量，并通過**getApp()**全局方法去獲取該對象。

Q5：FA卡片如何動態更換圖片?

A： 開發者可以通過調用setImageContent接口實現FA卡片圖片的動態更換。但使用setImageContent接口設置圖片時，涉及到資源id，需要在/base/profile中新建remote.xml配置文件，內容如下：

<?xml version="1.0" encoding="UTF-8"?>  
<remoteresources>  
    <item>$media:test</item>  
</remoteresources> 

其中，test是需要設置的圖片名。

Q6：如何定位AbilitySlice展示耗時問題?

A： 當開發者在開發自己的app的時候，如果發現頁面展示的比較慢，需要對耗時問題進行定位并針對性進行改進，HarmonyOS提供兩種方法幫助開發者完成該定位：

1.通過bytrace提供的接口進行打點跟蹤：

● 詳情請參考：

https://developer.harmonyos.com/cn/docs/documentation/doc-references/bytrace-0000001054679000

2.通過用于追蹤進程軌跡、分析性能的命令行工具——bytrace來實現：

● 詳情請參考：

https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ide-command-line-bytrace-0000001125636225

Q7 ：HarmonyOS中如何讀取EXCEL中的數據?

A： 開發者可以參考以下步驟實現：

1.在entry > build.gradle中添加如下依賴：

dependencies {  
    ……  
    implementation group: 'org.jxls', name: 'jxls-jexcel', version: '1.0.9'  
} 

 2.在entry > resources > base > media目錄下加入要讀取的EXCEL表格，注意EXCEL表格的后綴為xls。

3.在MainAbilitySlice.java中讀取EXCEL表格中的數據，代碼如下：

public class MainAbilitySlice extends AbilitySlice {  
    private static final HiLogLabel TAG = new HiLogLabel(3, 0xD001100, "MainAbilitySlice");  
 
    @Override  
    public void onStart(Intent intent) {  
        super.onStart(intent);  
        super.setUIContent(ResourceTable.Layout_ability_main);  
 
        // 處理EXCEL表格數據  
        try {  
            // 打開EXCEL文件  
            Resource resource = getResourceManager()  
                    .getRawFileEntry("entry/resources/base/media/excel.xls").openRawFile();  
            Workbook wb = Workbook.getWorkbook(resource);  
            int sheetSize = wb.getNumberOfSheets();  
            if (sheetSize > 0) {  
                // 獲取EXCEL的第一個sheet  
                Sheet sheet = wb.getSheet(0);  
                int rowTotal = sheet.getRows();  
                // 遍歷單元格獲取數據  
                for (int i = 0; i < rowTotal; i++) {  
                    Cell[] cells = sheet.getRow(i);  
                    for (int j = 0; j < cells.length; j++) {  
                        String content = cells[j].getContents();  
                        HiLog.info(TAG, "content:" + content);  
                    }  
                }  
            }  
        } catch (IOException | BiffException e) {  
            HiLog.error(TAG, "exception");  
        }  
    }  
} 

二、UI組件篇

Q1：如何在JS中給image組件切換圖源?

A： 將image組件中的src屬性用js中的變量綁定，如 src=“{{imageSrc}}”，當需要更改圖源時，僅需在js文件中將這個js變量值變更即可，如 imageSrc=“/common/pic.png”。

Q2：如何在JS中實現文本超長時顯示省略號?

A： 開發者需要先為文本設置一個最大行數，接著使用樣式text-overflow:ellipsis，在文本超出行數時，即會用省略號表示。

Q3：如何通過JS實現點擊input組件并實現打開鍵盤的效果?

A： 在**.hml中給input組件設置id值，并為其設置focusable="true"的屬性，在.js**中通過this.$element(“inputID”)取到input元素，然后調用focus方法即可，代碼示例如下：

.hml:

<input id="box"  
focusable="true"></input> 

.js:

this.$element("box").focus({focus:true}) 

Q4：Switch組件如何設置thumb高度超出track?

A： Switch即開關選擇器，通過開關，實現某個功能的開啟或關閉。但在用戶的實際使用中，可能出現由于手指不能完全對準Switch組件導致無法實現開關控制的情況，原始效果如下：

因此開發者的解決方案是設置組件滑動塊高出底層的高度或者滑動手柄的高度超出滑動軌跡的高度來增加用戶可控范圍。效果如下：

可以看到藍色圈圈的高度是超出底層灰色的高度，實現這種效果的代碼如下：

Switch testSwitch = (Switch) findComponentById(ResourceTable.Id_test_switch);  
ShapeElement trackOn = new ShapeElement();  
trackOn.setShape(ShapeElement.PATH);  
trackOn.setRgbColor(RgbPalette.BLUE);  
Path pathOn = new Path();  
pathOn.addRoundRect(new RectFloat(0.0f, 10.0f, 200.0f, 90.0f), 40.0f, 40.0f, Path.Direction.CLOCK_WISE);  
trackOn.setBounds(0, 0, 100, 200);  
trackOn.setPath(pathOn);  
ShapeElement trackOff = new ShapeElement();  
trackOff.setShape(ShapeElement.PATH);  
trackOff.setRgbColor(RgbPalette.GRAY);  
Path pathOFF = new Path();  
pathOFF.addRoundRect(new RectFloat(0.0f, 10.0f, 200.0f, 90.0f), 40.0f, 40.0f, Path.Direction.CLOCK_WISE);  
trackOff.setBounds(0, 0, 100, 200);  
trackOff.setPath(pathOFF);  
StateElement stateElement = new StateElement();  
stateElement.addState(new int[]{ComponentState.COMPONENT_STATE_CHECKED}, trackOn);  
stateElement.addState(new int[]{ComponentState.COMPONENT_STATE_EMPTY}, trackOff);  

Q5：Java開發中，當TextField組件底部對齊時，如何才能避免輸入內容后組件被軟鍵盤遮擋?

A： 當TextField組件被設計在底部時，開發者可以通過以下方法避免輸入內容后TextField組件被軟鍵盤遮擋，步驟如下：

調用TextField父類Component中的setLayoutRefreshedListener方法進行組件布局刷新監聽;

在回調中通過getWindowVisibleRect方法獲取組件可視矩形區域;

根據可視區域算出textField需要移動的距離，使textField不被軟件盤遮擋;

示例代碼如下：

Component componentByIdLayout = findComponentById(ResourceTable.Id_directionlayout);  
if (componentByIdLayout instanceof DirectionalLayout) {  
    mLayout = (DirectionalLayout) componentByIdLayout;  
}  
Component componentByIdTextField = findComponentById(ResourceTable.Id_text_field);  
if (componentByIdTextField instanceof TextField) {  
    mTextField = (TextField) componentByIdTextField;  
}  
// 監聽組件布局刷新 
mLayout.setLayoutRefreshedListener(new Component.LayoutRefreshedListener() {  
    @Override  
    public void onRefreshed(Component component) {  
        Rect rect = new Rect();  
        // 獲取組件可視矩形區域 
        boolean result = mTextField.getWindowVisibleRect(rect);  
        if (!result) {  
            HiLog.error(TAG, "getWindowVisibleRect fail");  
            return;  
        }  
        if (mTempVisibleHeight == 0 || mTempVisibleHeight == rect.bottom) {  
            mTempVisibleHeight = rect.bottom;  
            return;  
        }  
        // 計算textField組件需要移動的距離 
        int inputHeight = mTempVisibleHeight - rect.bottom;   
        mTempVisibleHeight = rect.bottom;  
        if (inputHeight > 0) {  
            mTextField.setText("input method height is " + inputHeight);  
            mTextField.setTranslationY(0 - inputHeight);  
        }  
        if (inputHeight < 0) {  
            mTextField.setText("input method height is 0");  
            mTextField.setTranslationY(0);  
        }  
    }  
}); 

Q6：Java開發中，為什么TextField組件橫、豎屏時輸入樣式差別很大?

A： 當TextField組件的width和height屬性設置為match_parent時，會根據屏幕寬高自動適配，故橫、豎屏時，TextField尺寸會發生改變，樣式差別很大。如果需要保持橫豎屏切換不改變TextField組件，開發者只需設置固定大小即可。

Q7：如何使應用不支持多窗口特性?

A： 一般情況下，HarmonyOS默認應用支持多窗口特性，若開發者不需要此支持，可以在config.json文件“module”節點下增加屬性標識“resizeable”: false即可，該設置適用于手機、平板、智慧屏、車機、智能穿戴。

● 詳情請參考：

https://developer.harmonyos.com/cn/docs/documentation/doc-guides/basic-config-file-elements-0000000000034463

Q8：Fraction如何在子線程中更新UI?

A： Fraction可以作為UI的一部分放在Ability或者AbilitySlice中，不能單獨使用。Fraction的生命周期狀態取決于它的容器。如果容器被銷毀，其中的所有部分也將被銷毀，開發者可以使用Fraction定義各種布局，以豐富應用程序的用戶界面。開發者可以通過EventHandler的方式在子線程中更新UI，可參考如下代碼實現：

public class MeFraction extends Fraction {  
    public void execute(Text text) {  
        EventHandler handler = new EventHandler(EventRunner.current()) {  
            // 重寫實現processEvent方法處理事件 
            @Override  
            protected void processEvent(InnerEvent event) {  
                super.processEvent(event);  
                if (event == null) {  
                    return;  
                }  
                if (event.eventId == 100) {  
                    text.setText("更新UI");  
                }  
            }  
        };  
        // 創建子線程并通過EventHandler發送事件 
        new Thread(() -> handler.sendEvent(InnerEvent.get(100))).start();  
    }  
} 

Q9：如何通過代碼實現橫幅展示消息功能?

A： 在Java開發中，要實現消息展示功能需要用到NotificationSlot功能集合，其控制包括通知音、振動、鎖屏顯示和級別。當開發者將NotificationSlot的級別設置為LEVEL_HIGH，即可實現橫幅展示消息功能。

NotificationSlot slot = new NotificationSlot("slot_001", "slot_default", NotificationSlot.LEVEL_HIGH); 

● 更多關于NotificationSlot的介紹可以參考官網鏈接：

https://developer.harmonyos.com/cn/docs/documentation/doc-references/notificationslot-0000001054120100