HarmonyOS原子化服务开发快速入门教程（中） - HarmonyOS技术社区 - 电子技术william hill官网 - 广受欢迎的专业电子william hill官网 - 威廉希尔官方网站
分享 收藏 返回

李洋水蛟龙 关注 私信
[文章]

HarmonyOS原子化服务开发快速入门教程（中）

三、修改代码
  • 查看js下刚刚创建的卡片，如图7。

如图7
打开该文件下的index.hml文件，修改代码。



  4.    

  5.         img
  6.    


  •    

  •         
    title_wrapper">
  •             
  •                 {{ $t('strings.title_big') }}
  •             
  •             
  •                 {{ $t('strings.title_small') }}
  •             
  •         


  •         

  •             

  •                
  •                 {{ $t('strings.text') }}
  •             

  •             

  •                
  •                 {{ $t('strings.text1') }}
  •             

  •             

  •                
  •                 {{ $t('strings.text2') }}
  •             

  •             

  •                
  •                 {{ $t('strings.text3') }}
  •             

  •             

  •                
  •                 {{ $t('strings.text4') }}
  •             

  •         
  •    

  • 打开该文件下的index.css文件，修改代码（找到对应修改部分）。
    1. .container {
    2.     flex-direction: column;
    3.     justify-content: space-between;
    4.     align-items: flex-start;
    5. /*注释代码*/
    6. /*    background-color: dodgerblue;*/
    7. /*    background-image: url('/common/ic_default_image@3x.png');*/
    8. /*    background-repeat: no-repeat;*/
    9. /*    background-size: cover;*/
    10. }

    12. /*添加.right-img样式*/
    13. .right-img{
    14.     width: 40px;
    15.     height: 40px;
    16.     position: absolute;
    17.     right: 10px;
    18.     top: 10px;
    19.     border-radius: 12px;
    20. }

    22. /*将.title_big中的font-size: 19px;改为16px*/
    23. .title_big {
    24.     font-size: 16px;
    25.     font-weight: bold;
    26.     color: white;
    27. }

    29. /*适配wearable*/
    30. [url=home.php?mod=space&uid=205723]@MEDIA[/url] (device-type: wearable) {
    31.     .right-img{
    32.         display: none;
    33.     }
    34. }
    打开该文件下的i18n文件，打开.json文件，修改代码。

    zh_CN.json:
    1. {
    2.   "strings": {
    3.     "title_big": "标题",
    4.     "title_small": "这里是副标题",
    5.     "text": "文本",
    6.     "text1": "文本1",
    7.     "text2": "文本2",
    8.     "text3": "文本3",
    9.     "text4": "文本4"
    10.   }
    11. }

    en_US.json:
    1. {
    2.   "strings": {
    3.     "title_big": "Title",
    4.     "title_small": "Text",
    5.     "text": "Text",
    6.     "text1": "Text1",
    7.     "text2": "Text2",
    8.     "text3": "Text3",
    9.     "text4": "Text4"
    10.   }
    11. }
    1. 打开js下的default文件，打开pages文件，点击index.hml.如图8所示。
    图片8.png
    图8
    修改代码：

    index.hml

    2.     你好，欢迎来到
    3.     {{title1}}
    4.     {{title2}}

    index.css
    1. .container {
    2.     flex-direction: column;
    3.     justify-content: center;
    4.     align-items: center;
    5.     width: 100%;
    6.     height: 100%;
    7. }

    9. .title {
    10.     font-size: 30px;
    11.     color: #000000;
    12.     opacity: 0.9;
    13.     margin: 4px 0px;
    14. }

    16. @media screen and (device-type: tablet) and (orientation: landscape) {
    17.     .title {
    18.         font-size: 100px;
    19.     }
    20. }

    22. @media screen and (device-type: wearable) {
    23.     .title {
    24.         font-size: 28px;
    25.         color: #FFFFFF;
    26.     }
    27. }

    29. @media screen and (device-type: tv) {
    30.     .container {
    31.         background-image: url("/common/images/Wallpaper.png");
    32.         background-size: cover;
    33.         background-repeat: no-repeat;
    34.         background-position: center;
    35.     }

    37.     .title {
    38.         font-size: 100px;
    39.         color: #FFFFFF;
    40.     }
    41. }

    43. @media screen and (device-type: phone) and (orientation: landscape) {
    44.     .title {
    45.         font-size: 60px;
    46.     }
    47. }

    index.js
    1. export default {
    2.     data: {
    3.         title1: "原子化服务",
    4.         title2: "新应用时代和新世界！"
    5.     },
    6.     onInit() {}
    7. }
    四、运行效果

    图9
    进行登录，如图10

    图10
    输入你的华为账号进行登录，如图11

    图11
    点击允许，如图12

    图12
    登陆成功，如图13，然后返回DevEco Studio。

    图13

    图14
    开启成功，如图15。

    图15
    点击小三角运行项目，如图16

    图16
    运行成功后会出现初始化页面，如图17

    图17
    点击模拟器中的home键，回到桌面，然后从左下角或者右下角斜向上滑动，进入服务中心，如图18

    图18
    进入服务中心后可以看见创建的卡片（这是项目创建初始化自身就有的卡片widget），如图19

    图19
    轻按卡片，添加至桌面，如图20

    图20
    卡片成功添加至桌面，如图21

    如图21
    长按桌面卡片，出现弹窗，单击更多服务卡片，选择我们之前新创建的卡片，并且添加至桌面，如图22、图23、图24

    图22  图23 图24

    点击新添加至桌面的卡片，回到页面，如图25

    图 25

    其他模拟器卡片效果可用previewr快速预览，如图26打开previewr。


    图26

    回帖（2）

    陈皓雷

    2022-6-24 06:19:04
    感谢分享，很清晰

    玩硬件的女孩纸

    2022-6-24 14:54:25
    收获多多

    更多回帖

    我也要说两句 回帖

    相关经验

    ×
    发帖