HarmonyOS第四次培训

自定义组件

首先在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()
            }
        });
  }