网站维护都要做什么,关键词挖掘站网,网站风格定位怎么写,源码资源网一、层叠布局 // 图片 本地图片和在线图片 Image(https://developer.huawei.com/allianceCmsResource/resource/HUAWEI_Developer_VUE/images/080662.png)
Entry
Component//自适应伸缩 设置layoutWeight属性的子元素与兄弟元素 会按照权重进行分配主轴的空间// Position
s…一、层叠布局 // 图片 本地图片和在线图片 Image(https://developer.huawei.com/allianceCmsResource/resource/HUAWEI_Developer_VUE/images/080662.png)
Entry
Component//自适应伸缩 设置layoutWeight属性的子元素与兄弟元素 会按照权重进行分配主轴的空间// Position
struct Index {build() {Column(){ //层叠布局 解决组件的层叠问题 更简洁编码效率更高Stack({alignContent:Alignment.Bottom}){Text(1).width(250).height(250).backgroundColor(Color.Brown)Text(2).width(150).height(150).backgroundColor(Color.Blue)Text(3).width(50).height(50).backgroundColor(Color.Orange)}.width(300).height(600).backgroundColor(Color.Pink)}.width(100%).height(100%)}
}二、b站卡片布局 // 图片 本地图片和在线图片 Image(https://developer.huawei.com/allianceCmsResource/resource/HUAWEI_Developer_VUE/images/080662.png)
Entry
Component//自适应伸缩 设置layoutWeight属性的子元素与兄弟元素 会按照权重进行分配主轴的空间// Position
struct Index {build() {Column(){ //层叠布局 解决组件的层叠问题 更简洁编码效率更高Stack({alignContent:Alignment.Bottom}){Image($r(app.media.bz_img)).borderRadius({topLeft:10,topRight:10}).width(100%)Row(){Row({space:5}){Image($r(app.media.bz_play)).width(14).fillColor(Color.White)Text(288万).fontColor(Color.White)}.margin({right:10})Row({space:5}){Image($r(app.media.bz_msg)).width(14).fillColor(Color.White)Text(14.33).fontColor(Color.White)}Blank()Text(14.33).fontColor(Color.White)}.height(24).width(100%).padding({left:5,right:5})}.width(100%).backgroundColor(Color.Pink)Column(){Text(【凤凰传奇新歌】欢迎来到国风统治区:唢呐一响神曲《铁衣流派推广曲》).textOverflow({overflow:TextOverflow.Ellipsis}).fontSize(13).maxLines(2)Row(){Text(19万点赞).fontSize(10).backgroundColor(#fef0ef).fontColor(#e66c43).padding(5).borderRadius(5)Image($r(app.media.bz_more)).width(14)}.width(100%).justifyContent(FlexAlign.SpaceBetween).margin({top:6})}}.width(80%).height(100%)}
}三、支付宝综合案例 // 图片 本地图片和在线图片 Image(https://developer.huawei.com/allianceCmsResource/resource/HUAWEI_Developer_VUE/images/080662.png)
Entry
Component//自适应伸缩 设置layoutWeight属性的子元素与兄弟元素 会按照权重进行分配主轴的空间// Position
struct Index {build() {Stack({alignContent:Alignment.Bottom}){ //层叠布局 解决组件的层叠问题 更简洁编码效率更高Stack({alignContent:Alignment.Top}){Row({space:20}){Column(){Text(北京).fontSize(18).fontColor(Color.White)Text(晴 2°C).fontSize(12).fontColor(Color.White)Image($r(app.media.zfb_head_down)).width(12).fillColor(Color.White).position({x:40,y:10})}Row(){Image($r(app.media.zfb_head_search)).width(20).fillColor(#666).margin({ left: 5, right: 5 })Text(北京交通一卡通).layoutWeight(1)// TextInput({// placeholder:北京交通一卡通// }).backgroundColor(Color.White).placeholderColor(#666).placeholderFont({size:14}).layoutWeight(1)Text(|).margin({right:10}).fontColor(#ccc)Text(搜索).fontSize(16).fontColor(#5b73de).fontWeight(700).textAlign(TextAlign.Center)}.layoutWeight(1).backgroundColor(Color.White).height(32).borderRadius(5).padding({ left: 10, right: 10 })// 右边Image($r(app.media.zfb_head_plus)).width(30).fillColor(#fff)}.backgroundColor(#5b73e1).width(100%).height(60).padding({left:10,right:10}).zIndex(666)// 主体页面Scroll(){Column(){// Top快捷按钮区域Row() {Column() {Image($r(app.media.zfb_top_scan)).width(36).fillColor(#fff)Text(扫一扫).fontColor(#fff)}.layoutWeight(1)Column() {Image($r(app.media.zfb_top_pay)).width(36).fillColor(#fff)Text(收付款).fontColor(#fff)}.layoutWeight(1)Column() {Image($r(app.media.zfb_top_travel)).width(36).fillColor(#fff)Text(出行).fontColor(#fff)}.layoutWeight(1)Column() {Image($r(app.media.zfb_top_card)).width(36).fillColor(#fff)Text(卡包).fontColor(#fff)}.layoutWeight(1)}.backgroundColor(#5b73de).padding({ top: 5, bottom: 15 })//nav导航Column(){Flex({direction:FlexDirection.Row,wrap:FlexWrap.Wrap}) {Column() {Image($r(app.media.zfb_nav1)).width(28).margin({ bottom: 8 })Text(滴滴出行).fontSize(12).fontColor(#666)}.height(80).justifyContent(FlexAlign.Center).width(20%).height(70).justifyContent(FlexAlign.Center)Column() {Image($r(app.media.zfb_nav2)).width(28).margin({ bottom: 8 })Text(生活缴费).fontSize(12).fontColor(#666)}.width(20%).height(70).justifyContent(FlexAlign.Center)Column() {Image($r(app.media.zfb_nav3)).width(28).margin({ bottom: 8 })Text(股票).fontSize(12).fontColor(#666)}.width(20%).height(70).justifyContent(FlexAlign.Center)Column() {Image($r(app.media.zfb_nav4)).width(28).margin({ bottom: 8 })Text(蚂蚁森林).fontSize(12).fontColor(#666)}.width(20%).height(70).justifyContent(FlexAlign.Center)Column() {Image($r(app.media.zfb_nav5)).width(28).margin({ bottom: 8 })Text(手机充值).fontSize(12).fontColor(#666)}.width(20%).height(70).justifyContent(FlexAlign.Center)Column() {Image($r(app.media.zfb_nav6)).width(28).margin({ bottom: 8 })Text(余额宝).fontSize(12).fontColor(#666)}.width(20%).height(70).justifyContent(FlexAlign.Center)Column() {Image($r(app.media.zfb_nav7)).width(28).margin({ bottom: 8 })Text(花呗).fontSize(12).fontColor(#666)}.width(20%).height(70).justifyContent(FlexAlign.Center)Column() {Image($r(app.media.zfb_nav8)).width(28).margin({ bottom: 8 })Text(飞猪旅行).fontSize(12).fontColor(#666)}.width(20%).height(70).justifyContent(FlexAlign.Center)Column() {Image($r(app.media.zfb_nav9)).width(28).margin({ bottom: 8 })Text(淘票票).fontSize(12).fontColor(#666)}.width(20%).height(70).justifyContent(FlexAlign.Center)Column() {Image($r(app.media.zfb_nav10)).width(28).margin({ bottom: 8 })Text(饿了么).fontSize(12).fontColor(#666)}.width(20%).height(70).justifyContent(FlexAlign.Center)Column() {Image($r(app.media.zfb_nav11)).width(28).margin({ bottom: 8 })Text(读书听书).fontSize(12).fontColor(#666)}.width(20%).height(70).justifyContent(FlexAlign.Center)Column() {Image($r(app.media.zfb_nav12)).width(28).margin({ bottom: 8 })Text(基金).fontSize(12).fontColor(#666)}.width(20%).height(70).justifyContent(FlexAlign.Center)Column() {Image($r(app.media.zfb_nav13)).width(28).margin({ bottom: 8 })Text(直播广场).fontSize(12).fontColor(#666)}.width(20%).height(70).justifyContent(FlexAlign.Center)Column() {Image($r(app.media.zfb_nav14)).width(28).margin({ bottom: 8 })Text(医疗健康).fontSize(12).fontColor(#666)}.width(20%).height(70).justifyContent(FlexAlign.Center)Column() {Image($r(app.media.zfb_nav15_more)).width(28).margin({ bottom: 8 })Text(更多).fontSize(12).fontColor(#666)}.width(20%).height(70).justifyContent(FlexAlign.Center)}// 产品区Row({ space: 5 }) {Image($r(app.media.zfb_pro_pic1)).layoutWeight(1)Image($r(app.media.zfb_pro_pic2)).layoutWeight(1)Image($r(app.media.zfb_pro_pic3)).layoutWeight(1)}.padding(10)}.height(1000).width(100%).backgroundColor(#fff).borderRadius({topLeft:20,topRight:20})}.width(100%).padding({ top: 60, bottom: 60 })}}.width(100%).height(100%).backgroundColor(#5b73de)Row(){Column(){Image($r(app.media.zfb_tab_home)).width(35)}.layoutWeight(1)Column() {Image($r(app.media.zfb_tab_money)).width(28).margin({ bottom: 2 })Text(理财).fontSize(12)}.layoutWeight(1)Column() {Image($r(app.media.zfb_tab_life)).width(28).margin({ bottom: 2 })Text(生活).fontSize(12)}.layoutWeight(1)Column() {Image($r(app.media.zfb_tab_chat)).width(28).margin({ bottom: 2 })Text(消息).fontSize(12)}.layoutWeight(1)Column() {Image($r(app.media.zfb_tab_me)).width(28).margin({ bottom: 2 })Text(我的).fontSize(12)}.layoutWeight(1)}.width(100%).height(60).backgroundColor(#fbfcfe)}.width(100%).height(100%).backgroundColor(#5b73de)}
}菜单导航布局方法有些许的区别写法如下采用layoutWeight // 图片 本地图片和在线图片 Image(https://developer.huawei.com/allianceCmsResource/resource/HUAWEI_Developer_VUE/images/080662.png)
Entry
Component//自适应伸缩 设置layoutWeight属性的子元素与兄弟元素 会按照权重进行分配主轴的空间// Position
struct Index {build() {Stack({alignContent:Alignment.Bottom}){ //层叠布局 解决组件的层叠问题 更简洁编码效率更高Stack({alignContent:Alignment.Top}){Row({space:20}){Column(){Text(北京).fontSize(18).fontColor(Color.White)Text(晴 2°C).fontSize(12).fontColor(Color.White)Image($r(app.media.zfb_head_down)).width(12).fillColor(Color.White).position({x:40,y:10})}Row(){Image($r(app.media.zfb_head_search)).width(20).fillColor(#666).margin({ left: 5, right: 5 })Text(北京交通一卡通).layoutWeight(1)// TextInput({// placeholder:北京交通一卡通// }).backgroundColor(Color.White).placeholderColor(#666).placeholderFont({size:14}).layoutWeight(1)Text(|).margin({right:10}).fontColor(#ccc)Text(搜索).fontSize(16).fontColor(#5b73de).fontWeight(700).textAlign(TextAlign.Center)}.layoutWeight(1).backgroundColor(Color.White).height(32).borderRadius(5).padding({ left: 10, right: 10 })// 右边Image($r(app.media.zfb_head_plus)).width(30).fillColor(#fff)}.backgroundColor(#5b73e1).width(100%).height(60).padding({left:10,right:10}).zIndex(666)// 主体页面Scroll(){Column(){// Top快捷按钮区域Row() {Column() {Image($r(app.media.zfb_top_scan)).width(36).fillColor(#fff)Text(扫一扫).fontColor(#fff)}.layoutWeight(1)Column() {Image($r(app.media.zfb_top_pay)).width(36).fillColor(#fff)Text(收付款).fontColor(#fff)}.layoutWeight(1)Column() {Image($r(app.media.zfb_top_travel)).width(36).fillColor(#fff)Text(出行).fontColor(#fff)}.layoutWeight(1)Column() {Image($r(app.media.zfb_top_card)).width(36).fillColor(#fff)Text(卡包).fontColor(#fff)}.layoutWeight(1)}.backgroundColor(#5b73de).padding({ top: 5, bottom: 15 })//nav导航Column(){Flex({direction:FlexDirection.Row,wrap:FlexWrap.Wrap}) {Column() {Image($r(app.media.zfb_nav1)).width(28).margin({ bottom: 8 })Text(滴滴出行).fontSize(12).fontColor(#666)}.height(80).justifyContent(FlexAlign.Center).width(20%).height(70).justifyContent(FlexAlign.Center)Column() {Image($r(app.media.zfb_nav2)).width(28).margin({ bottom: 8 })Text(生活缴费).fontSize(12).fontColor(#666)}.width(20%).height(70).justifyContent(FlexAlign.Center)Column() {Image($r(app.media.zfb_nav3)).width(28).margin({ bottom: 8 })Text(股票).fontSize(12).fontColor(#666)}.width(20%).height(70).justifyContent(FlexAlign.Center)Column() {Image($r(app.media.zfb_nav4)).width(28).margin({ bottom: 8 })Text(蚂蚁森林).fontSize(12).fontColor(#666)}.width(20%).height(70).justifyContent(FlexAlign.Center)Column() {Image($r(app.media.zfb_nav5)).width(28).margin({ bottom: 8 })Text(手机充值).fontSize(12).fontColor(#666)}.width(20%).height(70).justifyContent(FlexAlign.Center)Column() {Image($r(app.media.zfb_nav6)).width(28).margin({ bottom: 8 })Text(余额宝).fontSize(12).fontColor(#666)}.width(20%).height(70).justifyContent(FlexAlign.Center)Column() {Image($r(app.media.zfb_nav7)).width(28).margin({ bottom: 8 })Text(花呗).fontSize(12).fontColor(#666)}.width(20%).height(70).justifyContent(FlexAlign.Center)Column() {Image($r(app.media.zfb_nav8)).width(28).margin({ bottom: 8 })Text(飞猪旅行).fontSize(12).fontColor(#666)}.width(20%).height(70).justifyContent(FlexAlign.Center)Column() {Image($r(app.media.zfb_nav9)).width(28).margin({ bottom: 8 })Text(淘票票).fontSize(12).fontColor(#666)}.width(20%).height(70).justifyContent(FlexAlign.Center)Column() {Image($r(app.media.zfb_nav10)).width(28).margin({ bottom: 8 })Text(饿了么).fontSize(12).fontColor(#666)}.width(20%).height(70).justifyContent(FlexAlign.Center)Column() {Image($r(app.media.zfb_nav11)).width(28).margin({ bottom: 8 })Text(读书听书).fontSize(12).fontColor(#666)}.width(20%).height(70).justifyContent(FlexAlign.Center)Column() {Image($r(app.media.zfb_nav12)).width(28).margin({ bottom: 8 })Text(基金).fontSize(12).fontColor(#666)}.width(20%).height(70).justifyContent(FlexAlign.Center)Column() {Image($r(app.media.zfb_nav13)).width(28).margin({ bottom: 8 })Text(直播广场).fontSize(12).fontColor(#666)}.width(20%).height(70).justifyContent(FlexAlign.Center)Column() {Image($r(app.media.zfb_nav14)).width(28).margin({ bottom: 8 })Text(医疗健康).fontSize(12).fontColor(#666)}.width(20%).height(70).justifyContent(FlexAlign.Center)Column() {Image($r(app.media.zfb_nav15_more)).width(28).margin({ bottom: 8 })Text(更多).fontSize(12).fontColor(#666)}.width(20%).height(70).justifyContent(FlexAlign.Center)}// 产品区Row({ space: 5 }) {Image($r(app.media.zfb_pro_pic1)).layoutWeight(1)Image($r(app.media.zfb_pro_pic2)).layoutWeight(1)Image($r(app.media.zfb_pro_pic3)).layoutWeight(1)}.padding(10)Column({ space: 10 }) {Image($r(app.media.zfb_pro_list1)).width(100%)Image($r(app.media.zfb_pro_list2)).width(100%)}.padding(10)}.height(1000).width(100%).backgroundColor(#fff).borderRadius({topLeft:20,topRight:20})}.width(100%).padding({ top: 60, bottom: 60 })}}.width(100%).height(100%).backgroundColor(#5b73de)Row(){Column(){Image($r(app.media.zfb_tab_home)).width(35)}.layoutWeight(1)Column() {Image($r(app.media.zfb_tab_money)).width(28).margin({ bottom: 2 })Text(理财).fontSize(12)}.layoutWeight(1)Column() {Image($r(app.media.zfb_tab_life)).width(28).margin({ bottom: 2 })Text(生活).fontSize(12)}.layoutWeight(1)Column() {Image($r(app.media.zfb_tab_chat)).width(28).margin({ bottom: 2 })Text(消息).fontSize(12)}.layoutWeight(1)Column() {Image($r(app.media.zfb_tab_me)).width(28).margin({ bottom: 2 })Text(我的).fontSize(12)}.layoutWeight(1)}.width(100%).height(60).backgroundColor(#fbfcfe)}.width(100%).height(100%).backgroundColor(#5b73de)}
}四、字符串拼接和模版字符串 let name:string 可可
let age :number 18
console.log(简介信息 , 姓名,name)
console.log(名称${name},年龄${age})
Entry
Component//
struct Index {build() {}
}五、类型转化数字和字符串 let goods_1:string 190
let goods_2:string 1.90
let goods_3:string 1.90a
let goods_4:string a//Number(变量)原样转数字
//parseInt(变量)去掉小数部分
//parseFloat(变量)保留小数部分
console.log(数字是 ,parseFloat(goods_1))
console.log(数字是 ,parseFloat(goods_2))
console.log(数字是 ,parseFloat(goods_3))
console.log(数字是 ,parseInt(goods_4))console.log(数字是 ,parseInt(goods_1))
console.log(数字是 ,parseInt(goods_2))
console.log(数字是 ,parseInt(goods_3))
console.log(数字是 ,parseFloat(goods_4))
Entry
Component//
struct Index {build() {}
}let goods_5:number 150
let goods_6:number 1590.233
console.log(数字是 ,goods_5.toString())
console.log(数字是 ,goods_6.toFixed())
console.log(数字是 ,goods_6.toFixed(1))
console.log(数字是 ,goods_6.toFixed(2))
