HarmonyOS第四次培训

2022-02-03 10:32:42 阅读：154 来源： 互联网

标签：index 培训 name HarmonyOS json html router fetch 第四次

自定义组件

首先在common.components建立一个JS Component，例如命名为toolBar
建立html，css，js文件
在这里插入图片描述

<div class="container">
    <toolbar class="tabbar">
        <toolbar-item  class="lan"   for="{{tabbarItems}}"
                       icon='{{$idx == index ? $item.simg : $item.img}}'
                       value='{{$item.name}}'
                       onclick="jump($idx)" ></toolbar-item>
    </toolbar>
</div>

.tabbar {
    position: fixed;
    bottom: 0px;
    width: 100%;
    background-color: #f1f5f8;/* 背景颜色 */

}
.lan{
    width: 100%;
    font-size: 17px;
    display: flex;
    height: 90px;
    justify-content: center;

}
.container {
    flex-direction: column;
    justify-content: flex-start;
    width: 95%;
    background-color: #f1f5f8;/* 背景颜色 */
}

import tabbarItems from '../../common/datas/tabbarItem.js';
import router from '@system.router';
export default {
    data:{
        tabbarItems
    },
    //父组件传递props:["index"],
    props:{
        index:{
            type:Number
        },
        default(){
            return 0;
        }
    },
    jump(index)
    {
        switch (index) {
            case 0:
                router.push({
                    uri: "pages/index/index",
                    params: {
                        info: "这是路由传递的参数"
                    }
                });
                break;
            case 1:
                router.push({
                    uri: "pages/about/about",
                    params: {
                        info: "这是路由传递的参数"
                    }
                });
                break;
            case 2:
                router.push({
                    uri: "pages/fetch/fetch",
                    params: {
                        info: "这是路由传递的参数"
                    }
                });
                break;

        }
    }
}

在需要调转的对应页面的html上

<element name='comp' src='../../components/toolBar/toolBar.hml'></element>
中间放页面其他内容
    <comp index='0'></comp>

index=‘0’指的是到达pages/index/index

网络请求
config.json：

 "reqPermissions": [
      {
        "name": "ohos.permission.GET_NETWORK_INFO"
      },
      {
        "name": "ohos.permission.SET_NETWORK_INFO"
      },
      {
        "name": "ohos.permission.INTERNET"
      }
    ],
}
在需要用到网络请求服务的页面的js中

```javascript
import  fetch from  '@system.fetch';
export default {
fetch.fetch({
            url:`https://api.seniverse.com/v3/weather/now.json?key=WNEUXAAE2G&location=北京&language=zh-Hans&unit=c`,
            responseType:"json",
            success:(resp)=>
            {
                this.winfo=resp.data
                console.log(typeof resp.data)//string
                //https://www.runoob.com/json/json-parse.html,https://www.cnblogs.com/panmy/p/5925986.html
                //json.stringfy()将对象、数组转换成字符串；json.parse()将字符串转成json对象。
                // JSON.parse()
                // JSON.stringify()
            }
        });
  }

标签：index,培训,name,HarmonyOS,json,html,router,fetch,第四次
来源： https://blog.csdn.net/botlowhao/article/details/122774299

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

HarmonyOS第四次培训