Harmonyos Cangjie Language Development Practical Tutorial: Mall Login Page

I heard that Pura80 is coming? It feels like Huawei's new products are like dumplings, leaving people dazzled. There are launch events every few days. That's really great.

On the first day after the holiday, to relieve everyone's fatigue from the holiday, let's do something simple today, which is the login page of the mall.

In fact, the Cangjie language mall application shared this time has adopted the mall page of the previous ArkTs version. Youlan Jun believes that the complexity and difficulty of this application are both moderate, making it suitable for most friends to systematically learn the Cangjie language. You can also experience the differences between Cangjie language and Arkts in various aspects.

The code of the login page is very similar to Arkts. If you are not very familiar with these two languages, it may not be easy to notice these subtle differences, but it is precisely these subtle differences that are overwhelming.

For instance, when it comes to the writing of colors, the enumeration type in Cangjie language has become capitalized. Additionally, string types are not supported, but the UInt32 type is. Below, taking the Text component as an example, several different writing methods for Cangjie colors are listed:

Text(‘欢迎登录’)
.fontSize(27)
.fontWeight(FontWeight.Bolder)
//枚举
.fontColor(Color.BLACK)
//十六进制
.backgroundColor(0x112233)
//RGBA
.borderColor(Color(100, 106, 115, alpha: 1.0)) 

In addition, in Cangjie, there are no curly braces for property Settings and initialization parameters, such as padding and margin. Let me demonstrate it to you again:

TextInput(placeholder: '请输入账号')
.margin(top:50) 

In Cangjie language, the setting of size percentage is done using the letter "percent", and the writing method of click events is also different from that of "Arkts" :

Text('登录')
.width(100.percent)
.height(50)
.onClick({evet => })  

Since the layout of today's login page is relatively simple, if you can write it with Arkts, then using Cangjie will definitely work as well. Below is the complete code of the login page in Cangjie language for everyone:

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)
    }
}  

The above is the content sharing of the login page development. Thank you for reading. #HarmonyOS Language ## Cangjie ## Shopping #