win7怎么做网站映射互联网营销方式有哪些
一、实验目的
使用image、text、textinput、button、loadingprogress等基础组件，完成一个开发页面
二、实验设备与环境
- 开发软件：DevEco Studio
- 操作系统：HarmonyOS
- API版本：API9
三、实验步骤
1.点击Creat Project创建一个项目
2.按图示步骤点击
3.填写项目名、api版本、Model和Node
4.在entry/src/main/resources/base/media下添加这些图片，图片名一致，可以自己找图片
5.在entry/src/main/resources/base/element下添加以下文件
color.json
{"color": [{"name": "start_window_background","value": "#FFFFFF"},{"name": "title_color","value": "#333333"},{"name": "subtitle_color","value": "#666666"},{"name": "input_textColor","value": "#333333"},{"name": "input_backgroundColor","value": "#F5F5F5"},{"name": "button_textColor","value": "#FFFFFF"},{"name": "button_backgroundColor","value": "#1890ff"},{"name": "link_color","value": "#1890ff"},{"name": "divider_color","value": "#EEEEEE"},{"name": "other_login_color","value": "#666666"},{"name": "background_color","value": "#FFFFFF"},{"name": "error_color","value": "#FF4444"}]
}float.json
{"float": [{"name": "title_fontSize","value": "24fp"},{"name": "subtitle_fontSize","value": "14fp"},{"name": "input_height","value": "48vp"},{"name": "input_fontSize","value": "16fp"},{"name": "input_borderRadius","value": "24vp"},{"name": "button_height","value": "48vp"},{"name": "button_fontSize","value": "18fp"},{"name": "button_borderRadius","value": "24vp"},{"name": "link_fontSize","value": "14fp"},{"name": "other_login_fontSize","value": "14fp"}]
}string.json
{"string": [{"name": "module_desc","value": "module description"},{"name": "EntryAbility_desc","value": "description"},{"name": "EntryAbility_label","value": "label"},{"name": "login_title","value": "登录界面"},{"name": "login_subtitle","value": "登录帐号以使用更多服务"},{"name": "account_placeholder","value": "请输入账号"},{"name": "password_placeholder","value": "请输入密码"},{"name": "sms_login","value": "短信验证码登录"},{"name": "forget_password","value": "忘记密码"},{"name": "login_button","value": "登录"},{"name": "register","value": "注册帐号"},{"name": "other_login_methods","value": "其他方式登录"},{"name": "method_one","value": "方式一"},{"name": "method_two","value": "方式二"},{"name": "method_three","value": "方式三"}]
}6.最后在entry/src/main/ets/pages/Index.ets文件编写页面
// LoginPage.ets
@Entry
@Component
struct LoginPage {// 定义状态变量@State account: string = '' // 账号输入框内容@State password: string = '' // 密码输入框内容@State isPasswordVisible: boolean = false // 是否显示密码@State isLoading: boolean = false // 是否正在加载@State errorMessage: string = '' // 提示信息// 处理登录按钮点击事件handleLogin() {if (this.account.trim() === '' || this.password.trim() === '') {// 账号或密码为空，提示用户this.errorMessage = '请输入账号和密码';return;}// 清空提示信息this.errorMessage = '';// 模拟登录加载this.isLoading = true;setTimeout(() => {console.log('登录成功');this.isLoading = false;}, 2000);}// 切换密码可见性togglePasswordVisibility() {this.isPasswordVisible = !this.isPasswordVisible;}build() {Column() {// Logo 图片Image($r('app.media.logo')).width('100vp').height('100vp').margin({ top: '50vp' })// 标题文本Text($r('app.string.login_title')).fontSize($r('app.float.title_fontSize')).fontColor($r('app.color.title_color')).margin({ top: '20vp' })// 副标题文本Text($r('app.string.login_subtitle')).fontSize($r('app.float.subtitle_fontSize')).fontColor($r('app.color.subtitle_color')).margin({ top: '10vp' })// 账号输入框TextInput({ placeholder: $r('app.string.account_placeholder') }).width('90%').height($r('app.float.input_height')).margin({ top: '30vp' }).fontColor($r('app.color.input_textColor')).fontSize($r('app.float.input_fontSize')).borderRadius($r('app.float.input_borderRadius')).backgroundColor($r('app.color.input_backgroundColor')).onChange((value) => {this.account = value;})// 密码输入框TextInput({ placeholder: $r('app.string.password_placeholder') }).width('90%').height($r('app.float.input_height')).margin({ top: '20vp' }).fontColor($r('app.color.input_textColor')).fontSize($r('app.float.input_fontSize')).borderRadius($r('app.float.input_borderRadius')).backgroundColor($r('app.color.input_backgroundColor')).type(this.isPasswordVisible ? InputType.Normal : InputType.Password).onChange((value) => {this.password = value;})// 密码可见性切换按钮Button() {Text('切换可见性').width('200vp').height('20vp').fontColor($r('app.color.button_textColor')) // 设置字体颜色.textAlign(TextAlign.Center)}.width('200vp').height('50vp')//.margin({ left: '75%' }).margin({ top: '20vp' }).onClick(() => {this.togglePasswordVisibility();})// 辅助链接行Row() {Text($r('app.string.sms_login')).fontSize($r('app.float.link_fontSize')).fontColor($r('app.color.link_color'))Text($r('app.string.forget_password')).fontSize($r('app.float.link_fontSize')).fontColor($r('app.color.link_color'))}.justifyContent(FlexAlign.SpaceBetween).width('100%').margin({ top: '20vp' })// 提示信息if (this.errorMessage) {Text(this.errorMessage).fontSize($r('app.float.link_fontSize')).fontColor($r('app.color.error_color')).margin({ top: '10vp' })}// 登录按钮Button($r('app.string.login_button')).width('90%').height($r('app.float.button_height')).margin({ top: '30vp' }).fontColor($r('app.color.button_textColor')).fontSize($r('app.float.button_fontSize')).borderRadius($r('app.float.button_borderRadius')).backgroundColor($r('app.color.button_backgroundColor')).onClick(() => {this.handleLogin();})// 注册账号链接Text($r('app.string.register')).fontSize($r('app.float.link_fontSize')).fontColor($r('app.color.link_color')).margin({ top: '20vp' })// 底部分割线Divider().strokeWidth(1).color($r('app.color.divider_color')).margin({ top: '40vp' })// 其他登录方式文本Text($r('app.string.other_login_methods')).fontSize($r('app.float.other_login_fontSize')).fontColor($r('app.color.other_login_color')).margin({ top: '20vp' })// 其他登录方式按钮行Row() {Button($r('app.string.method_one')).width('25vp').height('25vp').borderRadius('12.5vp')Button($r('app.string.method_two')).width('25vp').height('25vp').borderRadius('12.5vp').margin({ left: '20vp' })Button($r('app.string.method_three')).width('25vp').height('25vp').borderRadius('12.5vp').margin({ left: '20vp' })}.justifyContent(FlexAlign.Center).width('100%').margin({ top: '20vp' })}.width('100%').height('100%').padding({ left: '20vp', right: '20vp' }).backgroundColor($r('app.color.background_color'))}
}7.实现效果
四、实验总结
本次实验通过实际开发一个登录界面，全面了解了 HarmonyOS 应用开发的基本流程和技巧。虽然在开发过程中遇到了一些问题，但通过查阅资料和实践摸索，成功解决了问题并完成了实验目标。未来将继续深入学习 HarmonyOS 开发，探索更多高级功能和优化方法，提升应用开发的质量和效率。