Iconfont 图标融合至 HarmonyOS
配置文件 项目根目录下创建
module.exports = {
"iconURL": "https://at.alicdn.com/t/c/font_41236761_db46qb9qzg.js",
"save_dir": "./entry/src/main/ets/components/iconfont"
}
项目根目录下执行命令
npx ohos-iconfont
注意这个是 NPM 的包,直接通过 NPX 执行
表单获取数据
错误写法
@Component
export struct Input{
@Link @Watch('onCountUpdated') value:string;
@Prop placeholder:string;
type:InputType = InputType.Normal;
##handlerChangeValue(val:string){
## console.log(val)
## this.value = val;
##}
onCountUpdated(val):void{
}
build(){
TextInput({placeholder:this.placeholder})
.type(this.type)
.placeholderColor('rgb(132, 143, 172)')
.backgroundColor(Color.Transparent)
.border({width:1,color:'rgb(223, 232, 246)'})
.borderRadius(8)
.padding({left:20,right:20,top:12,bottom :12})
## .onChange(this.handlerChangeValue)
}
}
会报的错误是
03-18 12:25:27.094 30180-22659822 E C03900/Ace: [Engine Log]Lifetime: 0.000000s
03-18 12:25:27.094 30180-22659822 E C03900/Ace: [Engine Log]Js-Engine: ark
03-18 12:25:27.094 30180-22659822 E C03900/Ace: [Engine Log]page: pages
03-18 12:25:27.094 30180-22659822 E C03900/Ace: [Engine Log]Error message: Obj is not a Valid object
03-18 12:25:27.094 30180-22659822 E C03900/Ace: [Engine Log]Cannot get SourceMap info, dump raw stack:
03-18 12:25:27.094 30180-22659822 E C03900/Ace: [Engine Log]Stacktrace:
03-18 12:25:27.094 30180-22659822 E C03900/Ace: [Engine Log] at handlerChangeValue (entry
下面是正确的
- 方法一
@Component
export struct Input{
@Link @Watch('onCountUpdated') value:string;
@Prop placeholder:string;
type:InputType = InputType.Normal;
handlerChangeValue(val:string){
console.log(val)
this.value = val;
}
onCountUpdated(val):void{
}
build(){
TextInput({placeholder:this.placeholder})
.type(this.type)
.placeholderColor('rgb(132, 143, 172)')
.backgroundColor(Color.Transparent)
.border({width:1,color:'rgb(223, 232, 246)'})
.borderRadius(8)
.padding({left:20,right:20,top:12,bottom :12})
.onChange((val:string)=>{
this.handlerChangeValue(val)
})
}
}
- 方法二
@Component
export struct Input{
@Link @Watch('onCountUpdated') value:string;
@Prop placeholder:string;
type:InputType = InputType.Normal;
onCountUpdated(val):void{
}
build(){
TextInput({placeholder:this.placeholder})
.type(this.type)
.placeholderColor('rgb(132, 143, 172)')
.backgroundColor(Color.Transparent)
.border({width:1,color:'rgb(223, 232, 246)'})
.borderRadius(8)
.padding({left:20,right:20,top:12,bottom :12})
.onChange((val:string)=>{
this.value = val;
})
}
}
静态资源加载
图片等资源的加载
不可以使用$r 中间为变量的写法,而要直接将其提取出去
scroll 与 Column 结合 导致 不发生滚动问题
下面的例子中 Column添加了宽高 100%,导致的,需要将其删除
import AuthGuard from '../components/AuthGuard'
import Header from '../components/Header'
import CategoryComp from '../components/Home/Category'
import Hot from '../components/Home/GoodService'
import SwiperHome from '../components/SwiperHome'
@Entry
@Component
struct Index {
private scrollerForScroll: Scroller = new Scroller() // 导航头
build() {
Stack({ alignContent: Alignment.Top }) {
Column() {
}
.height(180)
.width('100%')
.backgroundColor($r('app.color.primary'))
Scroll(this.scrollerForScroll) {
Column({ space: 10 }) {
Header()
SwiperHome()
AuthGuard()
CategoryComp()
CategoryComp()
CategoryComp()
CategoryComp()
}
.width("100%").height("100%")
.padding({ left: 10, right: 10 })
}
.width("100%").height("100%")
}
.width('100%')
.height('100%')
.backgroundColor($r('app.color.blockBackground'))
}
}
微信小程序的 rpx 对应 HarmonyOS 中的 lpx 只不过它们要求的设计宽度不一样,但是可以改成一样
{
"src": [
.....
],
"window": {
"designWidth": 750
}
}
这里把 desingwidth 改成 750 即可
最小高度,最大高度
通用属性的constraintSize可以设置这个四个属性。
Text('constraintSize')
.width('90%')
.constraintSize({
minWidth: 0,
maxWidth: 100,
minHeight: 0,
maxHeight: 100
})
怎样学习鸿蒙?
首先必学的是开发语言 ArkTS,这是重中之重,然后就是ArkUI声明式UI开发、Stage模型、网络/数据库管理、分布式应用开发、进程间通信与线程间通信技术、OpenHarmony多媒体技术……。中间还有许多的知识点,都整理成思维导图来分享给大家~
此外,小编精心准备了一份联合鸿蒙官方发布笔记整理收纳的《鸿蒙开发学习笔记》,内容包含ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。
==【有需要的小伙伴,可以扫描下方二维码免费领取!!!】 ==
快速入门
- 开发准备
- 构建第一个ArkTS应用(Stage模型)
- 构建第一个ArkTS应用(FA模型)
- 构建第一个JS应用(FA模型)
开发基础知识
- 应用程序包基础知识
- 应用配置文件(Stage模型)
- 应用配置文件概述(FA模型)
资源分类与访问
- 资源分类与访问
- 创建资源目录和资源文件
- 资源访问
学习ArkTs语言
- 初识ArkTS语言
- 基本语法
- 状态管理
- 其他状态管理
- 渲染控制
基于ArkTS声明式开发范式
- UI开发(ArkTS声明式开发范式)概述
- 开发布局
- 添加组件
- 显示图片
- 使用动画
- 支持交互事件
- 性能提升的推荐方法
兼容JS的类Web开发范式
- 概述
- 框架说明
- 构建用户界面
- 常见组件开发指导
- 动效开发指导
- 自定义组件
Web组件
- 概述
- 设置基本属性和事件
- 并发
- 窗口管理
- WebGL
- 媒体
- 安全
- 网络与连接
- 电话服务
- 数据管理
- …
应用模型
- 概述
- Stage模型开发指导
- FA模型开发指导