听说Pura80要来了？感觉华为的新品像下饺子一样，让人目不暇接，每隔几天就有发布会看，真不错呀。
节后第一天，为了缓解大家假期的疲惫，咱们今天做点简单的内容，就是商城的登录页面。
其实这一次分享的仓颉语言商城应用沿用了之前ArkTs版本的商城页面，幽蓝君认为这个应用复杂程度和难度都很适中，适合大多数友友系统的学习仓颉语言。也能感受一下仓颉语言和Arkts在各个方面的不同之处。
登录页面的代码就和Arkts非常类似，如果你不是对这两个语言非常熟悉甚至不容易看出这些细微的差别，但正是这些细微差别让人不知所措。
比如颜色的写法，仓颉语言的枚举类型变成了大写，另外不支持字符串类型，但是支持UInt32类型，下面以Text组件为例，列举下仓颉颜色的几种不同写法：
Text(‘欢迎登录’)
.fontSize(27)
.fontWeight(FontWeight.Bolder)
//枚举
.fontColor(Color.BLACK)
//十六进制
.backgroundColor(0x112233)
//RGBA
.borderColor(Color(100, 106, 115, alpha: 1.0))另外，仓颉中的属性设置和初始化参数等写法是没有大括号的，比如padding、margin等，再给大家演示一下：
TextInput(placeholder: '请输入账号')
.margin(top:50)还有仓颉语言中尺寸百分比的设置是使用字母percent，点击事件的写法也和Arkts有所不同：
Text('登录')
.width(100.percent)
.height(50)
.onClick({evet => })因为今天登录页面的布局比较简单，如果你能用Arkts写出来，那使用仓颉也一定可以，下面为大家附上仓颉语言登录页面的完整代码：
package ohos_app_cangjie_entry.page
import ohos.base.*
import ohos.component.*
import ohos.state_manage.*
import ohos.state_macro_manage.*
@Entry
@Component
public class login {func build() {Column{Text('幽蓝商城').fontSize(27).fontWeight(FontWeight.Bolder).fontColor(Color.BLACK)Text('欢迎登录进行使用！').fontSize(18).fontColor(Color(100, 106, 115, alpha: 1.0)).margin(top:8)TextInput(placeholder: '请输入账号').margin(top:50).placeholderColor(0x8f959e).fontSize(15).fontColor(Color.BLACK).width(100.percent).height(50).borderRadius(10).borderWidth(1).borderColor(0xD0D3D5).backgroundColor(Color.WHITE)TextInput(placeholder: '请输入密码').setType(InputType.Password).enterKeyType(EnterKeyType.Done).placeholderColor(0x8f959e).fontSize(15).fontColor(Color.BLACK).width(100.percent).height(50).borderRadius(10).borderWidth(1).borderColor(0xD0D3D5).backgroundColor(Color.WHITE).margin(top:25)Column(){Text('登录').width(100.percent).height(50).onClick({evet => }).backgroundColor(Color(255, 84, 83, alpha: 1.0)).fontColor(Color.WHITE).fontSize(15).textAlign(TextAlign.Center).borderRadius(10)Row(){Text("没有账号？").fontColor(Color(143, 149, 158, alpha: 1.0)).fontSize(14)Text("立即注册").fontColor(Color(255, 84, 83, alpha:1.0)).fontSize(14).onClick({evet => })}.margin(top:25)}.margin(top:75).width(100.percent).alignItems(HorizontalAlign.Center)}.width(100.percent).height(100.percent).justifyContent(FlexAlign.Start).alignItems(HorizontalAlign.Start).padding(top: 140, left: 30,right:30)}
}以上就是登录页面开发的内容分享，感谢阅读。#HarmonyOS语言##仓颉##购物#