怎么做找券网站,花都区pc端网站建设,腾讯企业服务账号是多少,网站技巧一、自定义组件
1、自定义组件
自定义组件#xff0c;最基础的结构如下#xff1a;
Component
struct Header {build() {}
}
提取头部标题部分的代码#xff0c;写成自定义组件。
1、新建ArkTs文件#xff0c;把Header内容写好。
2、在需要用到的地方#xff0c;导入…一、自定义组件
1、自定义组件
自定义组件最基础的结构如下
Component
struct Header {build() {}
}
提取头部标题部分的代码写成自定义组件。
1、新建ArkTs文件把Header内容写好。
2、在需要用到的地方导入引用即可
Component
export struct Header {private title: ResourceStr build() {Row() {Text(this.title).fontWeight(FontWeight.Bold).fontSize(24)}.width(100%).margin({ bottom: 10 })}
}
import { Header } from ../conponents/CommonHeaderEntry
Component
struct Index {Statebuild() { // UI描述内部声明式UI结构Column({ space: 10 }) {Header({ title: 商品列表 })}.width(100%)}.backgroundColor(#f0f8ff).padding(20).width(100%).height(100%)}
} 2、构建函数
如果是仅在该页面内部运用的组件就可以用构建函数的方式来定义组件
分两类全局和局部区别就是写在struct函数外还是内若是放在struct之内就不需要些‘function’字段了
这样封装就保证了代码易读易维护 3、公共样式
类似的样式也可以这样封装 但是Styles只能封装所有组件都有的公共属性那对于个别的如何处理呢
就需要用到Extend注意只能定义成全局的不能写在struct函数内部 二、状态管理-装饰器
1、State
State装饰器官网文档
State类似于react中的UseState只在组件内部使用
Entry
Component
struct StatePage {State message: string hellobuild() {Column() {Text(this.message).fontSize(20).onClick((){this.message 测试})}.width(100%)}
}
2、Props
Prop装饰器官网文档
父组件单向传值给子组件类似于react里的props参数可以理解为父组件参数拷贝一份给子组件
子组件数值的变化不会同步到父组件
//子组件
Component
struct CountDownComponent {Prop count: number 0;costOfOneAttempt: number 1;build() {Column() {if (this.count 0) {Text(You have ${this.count} Nuggets left)} else {Text(Game over!)}// Prop装饰的变量不会同步给父组件Button(Try again).onClick(() {this.count - this.costOfOneAttempt;})}}
}//父组件
Entry
Component
struct ParentComponent {State countDownStartValue: number 10;build() {Column() {Text(Grant ${this.countDownStartValue} nuggets to play.)// 父组件的数据源的修改会同步给子组件Button(1 - Nuggets in New Game).onClick(() {this.countDownStartValue 1;})// 父组件的修改会同步给子组件Button(-1 - Nuggets in New Game).onClick(() {this.countDownStartValue - 1;})CountDownComponent({ count: this.countDownStartValue, costOfOneAttempt: 2 })}}
}
3、Link
变量与其父组件中对应的数据源建立双向数据绑定
可以理解为父组件把地址给子组件所以改变能够同步
Link装饰器官网文档 //子组件接收变量Link count: numberLink costOfOneAttempt: number//调用子组件因为是引用的方式所以要加上$CountDownComponent({ count: $countDownStartValue})
4、Provide 和 Consume
应用于与后代组件的双向数据同步应用于状态数据在多个层级之间传递的场景实现跨层级传递
就是爷爷和孙子之间直接沟通
不需要一级一级的显示传参
Provide装饰的变量是在祖先组件中Consume装饰的变量是在后代组件中
感觉很方便但一般咱不用因为比较消耗性能
Entry
ComponentV2
struct Parent {Provider() str: string hello;build() {Column() {Button(this.str).onClick(() {this.str 0;})Child()}}
}ComponentV2
struct Child {Consumer() str: string world;build() {Column() {Button(this.str).onClick(() {this.str 0;})}}
} 5、Observed 和 ObjectLink
用于在涉及嵌套对象或数组的场景中进行双向数据同步
因为对于非简单类型比如class、Object或者数组是需要被Observed装饰的否则将观察不到其属性的变化
/**子组件定义包包的类型*/
Observed
class Bag {public id: number;public size: number;constructor(size: number) {this.id NextID;this.size size;}
}
Observed
class User {public bag: Bag;constructor(bag: Bag) {this.bag bag;}
}/**子组件*/
Component
struct ViewA {label: string ViewA;//被引用的类需要用ObjectLink装饰ObjectLink bag: Bag;build() {Column() {Text(ViewA [${this.label}] this.bag.size ${this.bag.size}).fontColor(#ffffffff).backgroundColor(#ff3d9dba).width(320).height(50).borderRadius(25).margin(10).textAlign(TextAlign.Center)}Button(ViewA: this.bag.size add 1).width(320).backgroundColor(#ff17a98d).margin(10).onClick(() {this.bag.size 1;})}
}
}/**父组件*/
Entry
Component
struct ViewB {State user: User new User(new Bag(0));build() {Column() {ViewA({ label: ViewA #1, bag: this.user.bag }).width(320)}}
}
三、页面路由
把所有访问记录存在栈里类似于出栈入栈跳转就添加一条记录回到上一页就是把当前记录弹出栈就回到了上一页ps:页面栈的最大容量是32
如果新访问的页面是栈里存在的把它挪到栈顶即可这样节省空间性能
1、跳转
有两种方式保留访问记录就用pushUrl如果要销毁记录就用replaceUrl
import router from ohos.router;
class DataModelInfo {age: number 0;
}class DataModel {id: number 0;info: DataModelInfo|null null;
}function onJumpClick(): void {// 在Home页面中let paramsInfo: DataModel {id: 123,info: {age: 20}};router.pushUrl({url: pages/Detail, // 目标urlparams: paramsInfo // 添加params属性传递自定义参数}, (err) {if (err) {console.error(跳转失败 ${err.code}, ${err.message});return;}console.info(跳转成功);})
}
2、回到上一页
返回用即可
import router from ohos.router;
//回退到指定的home页
router.back({url: pages/Home
});
//不传参即是回退到上一页
//router.back();
3、综合小案例
跳转到对应页面 如果新建页面时选择的是新建page则自动配置路径若是选择ArkTs,则是没有的 import router from ohos.router;class RouterInfo {url: stringtitle: stringconstructor(url: string, title: string) {this.url url;this.title title}
}Entry
Component
struct Index {State message: string 页面列表private routers: RouterInfo[] [new RouterInfo(pages/Shopping, 商品),new RouterInfo(pages/Mine, 我的),]build() {Column() {Text(this.message).fontSize(30)List({ space: 15 }) {ForEach(this.routers,(router: RouterInfo, index) {ListItem() {this.RouterItem(router, index 1)}})}}.width(100%)}BuilderRouterItem(r: RouterInfo, i: number) {Row() {Text(i .).fontSize(20).fontColor(Color.White)Blank()Text(r.title).fontSize(20).fontColor(Color.White)}.width(120).padding(12).backgroundColor(#38f).borderRadius(20).onClick(() {router.pushUrl({url: r.url,params: i},router.RouterMode.Single,err {if (err) {console.log(跳转失败${err.message}${err.code})}})})}
}
写在最后可结合Harmony_鸿蒙专栏阅读
