Harmony开发笔记3
预览
Harmony开发和Compose类似，在组件上增加@Preview后则可以在预览面板上看到UI效果。
组件预览
我们新建一个组件,该组件仅展示一个文本内容。
@Component
export struct HelloComponent {
@State message: string = "This is component Text"
build() {
Row() {
Text(this.message)
.fontSize($r("app.float.font1"))
}
.backgroundColor($r("app.color.custom_bg"))
.width("100%")
.height("20%")
}
}
然后在文件中新建一个预览结构
@Preview
@Entry
@Component
struct HelloPreview {
build() {
Row() {
HelloComponent({ message: "这是预览" })
}
}
}
我们打开Previewer页签，可以看到预览效果
预览工具
预览工具有几个常用的选项如图：
-
切换不同设备，开发者可以在这里切换不同分辨率上显示效果
-
拖拽模式，这个和1中功能差不多，这里你可以拖拽手机快速切换分辨率
- 组件查看，开启Inspector后，我们可以清晰看到界面布局层级，点击对应层级预览中可以看到对应的组件。还可以看到该组件的全部属性信息。
在Attributes中可以修改对应属性来实时看到效果，并且你修改的属性后代码里也会同步增加对应属性，这个就很牛逼了！！！有个好处就是：我们如果不清楚具体设置属性方法，可以在这里修改对应值自动添加了代码
如上图，我修改了组件中Text的外边框颜色,增加了边框样式。
- 实时预览，打开实时预览后我们可以边写代码边看效果，这个是默认开启
数据模拟
有时候我们开发的页面是通过网络获取的数据，在预览时候就看不到数据，这时候我们可以使用Mock功能来模拟数据，替换网络获取数据的模块。
组件内模拟
我们可以在组件内通过@MockSetup注解来实现数据模拟，如下：
@Component
export struct HelloComponent {
@State message: string = "This is component Text"
@MockSetup
previewMessage() {
this.message = "模拟文字"
}
我们可以看到文本以显示为我们模拟的数据。我们还可以模拟方法，如下我们增加一个按钮点击调用toast传入字符串进行提示。
然后我们调用mock接口传入模拟的参数，点击后提示我们模拟的数据。
@Component
export struct HelloComponent {
@State message: string = "This is component Text"
@MockSetup
previewMessage() {
this.message = "模拟文字"
let mockFunction = new MockKit().mockFunc(this, this.testMsg)
when(mockFunction)().afterReturn('这是模拟数据')
}
build() {
Column() {
Button() {
Text("按钮")
}
.height('8%')
.width('100%')
.onClick(() => {
promptAction.showToast({
message: this.testMsg()
})
})
Row() {
Text(this.message)
.fontSize($r("app.float.font1"))
.fontColor($r("app.color.font_color1"))
.outlineColor(Color.Blue)
.margin({ left: '10' })
.padding(12)
.outlineStyle(OutlineStyle.DASHED)
.outlineWidth($r("app.float.outline_width"))
}
.backgroundColor($r("app.color.custom_bg"))
.width("100%")
.height("20%")
}
}
testMsg(): string {
return '这是原始文本呢'
}
}
模块的模拟
模块的模拟主要针对我们网络请求的页面，模拟配置在entry/src/mock目录下，通过mock-config.json5配置替换原有的模块文件
例如我们有一个网络模块CommonsUtil,这里仅仅一个testA方法返回字符串。
export const testA = (): string => {
return "This testA return text ";
}
然后在mock下创建同名的mock文件模拟数据
const testA = (): string => {
return "This testA Mock return text "
};
export { testA }
最后我们在mock-config.json5中指定模拟的映射
{
"utils/CommonsUtil.ets": {
"source": "src/mock/modules/utils/CommonsUtil.mock.ets"
}
}
在上面HelloComponent组件中在增加一个文本，文本内容来自CommonsUtil的testA。
Row() {
Text(testA())
Text(this.message)
.fontSize($r("app.float.font1"))
.fontColor($r("app.color.font_color1"))
.outlineColor(Color.Blue)
.margin({ left: '10' })
.padding(12)
.outlineStyle(OutlineStyle.DASHED)
.outlineWidth($r("app.float.outline_width"))
}
.backgroundColor($r("app.color.custom_bg"))
.width("100%")
.height("20%")
我们可以看到预览显示的是我们模拟的数据。
