返回发烧友论坛
发 帖  

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

李洋水蛟龙
2022-06-17 09:57:22
阅读量0
HarmonyOS
1
3
三、修改代码
  • 查看js下刚刚创建的卡片，如图7。

如图7
打开该文件下的index.hml文件，修改代码。
  1. <!--    用堆叠stack组件包裹节点div组件-->
  2. <stack style="background-color: #f5d354;width: 100%;height: 100%;" onclick="routerEvent">
  3. <!--    右边图片（添加此段代码）-->
  4.     <div class="right-img">
  5.         <image class="images" src="/common/ic_default_image.png" alt="img" ></image>
  6.     </div>
  7. <!--    标题信息-->
  8.     <div class="container">
  9.         <div class="title_wrapper">
  10.             <text class="title_big">
  11.                 {{ $t('strings.title_big') }}
  12.             </text>
  13.             <text class="title_small">
  14.                 {{ $t('strings.title_small') }}
  15.             </text>
  16.         </div>
  17. <!--    文本信息 （修改text信息，后面加上数字标记1、2、3）-->
  18.         <div class="list_wrapper">
  19.             <div class="item_first">
  20.                 <image class="item_image" src='/common/ic_default.png'></image>
  21.                 <text class="item_text" onclick="routerEvent">{{ $t('strings.text') }}</text>
  22.             </div>
  23.             <div class="item">
  24.                 <image class="item_image" src='/common/ic_default.png'></image>
  25.                 <text class="item_text" onclick="routerEvent">{{ $t('strings.text1') }}</text>
  26.             </div>
  27.             <div class="item">
  28.                 <image class="item_image" src='/common/ic_default.png'></image>
  29.                 <text class="item_text" onclick="routerEvent">{{ $t('strings.text2') }}</text>
  30.             </div>
  31.             <div class="item">
  32.                 <image class="item_image" src='/common/ic_default.png'></image>
  33.                 <text class="item_text" onclick="routerEvent">{{ $t('strings.text3') }}</text>
  34.             </div>
  35.             <div class="item_last">
  36.                 <image class="item_image" src='/common/ic_default.png'></image>
  37.                 <text class="item_text" onclick="routerEvent">{{ $t('strings.text4') }}</text>
  38.             </div>
  39.         </div>
  40.     </div>
  41. </stack>
复制代码

打开该文件下的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
  1. <div class="container">
  2.     <text class="title">你好，欢迎来到</text>
  3.     <text class="title">{{title1}}</text>
  4.     <text class="title">{{title2}}</text>
  5. </div>
复制代码

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所示

图9
进行登录，如图10

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

图11
点击允许，如图12

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

图13
  • 选择模拟器，如图14。

图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

举报

回帖

声明：本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人，不代表电子发烧友网立场。文章及其配图仅供工程师学习之用，如有内容图片侵权或者其他问题，请联系本站作侵删。 侵权投诉
链接复制成功，分享给好友