【无标题】

<div class="container">
<div class="div-button">
<dialog class="dialogClass" id="dialogId">
<div class="content">
<text>this is a dialog</text>
</div>
</dialog>
<input class="button" type="button" value="click" οnclick="btnclick"></input>
</div>
<div class="content">
<input οnchange="checkboxOnChange" checked="true" type="checkbox"></input>
</div>
<div class="content">
<input type="date" class="flex" placeholder="Enter data"></input>
</div>
</div>
/* xxx.css */
.container {
align-items: center;
flex-direction: column;
justify-content: center;
background-color: #F1F3F5 ;
}
.div-button {
flex-direction: column;
align-items: center;
}
.dialogClass{
width:80%;
height: 200px;
}
.button {
margin-top: 30px;               
width: 50%;
}
.content{
width: 90%;
height: 150px;
align-items: center;
justify-content: center;
}
.flex {
width: 80%;
margin-bottom:40px;
}


// xxx.js
export default {
btnclick(){
this.$element('dialogId').show()
},
}

数据获取：

config.json中：

"module": {

    "reqPermissions": [

      {

        "name": "ohos.permission.GET_NETWORK_INFO"

      },

      {

        "name": "ohos.permission.SET_NETWORK_INFO"

      },

      {

        "name": "ohos.permission.INTERNET"

      }

    ],

    ...

}

 "deviceConfig": {

    "default": {

        "process": "com.huawei.hiworld.example",

        "supportBackup": false,

        "network": {

            "cleartextTraffic": true,

            "securityConfig": {

                "domainSettings": {

                    "cleartextPermitted": true,

                    "domains": [

                        {

                            "subDomains": true,

                            "name": "api.seniverse.com"

                        }

                    ]

                }

            }

        }

    }}

某个JS中：

//导入鸿蒙的网络请求模块fetchimport  fetch from  '@system.fetch';export default {

    data: {

        winfo:""

    },

    onInit() {

        //发起对心知天气服务器的网络请求

        fetch.fetch({

            url:`https://api.seniverse.com/v3/weather/now.json?

                                     key=WNEUXAAE2G&location=南京&language=zh-Hans&unit=c`,

            responseType:"json",

            success:(resp)=>

            {

                //JSON.parse(字符串)转换成json数据格式

                this.winfo=JSON.parse(resp.data);

                  console.log(this.winfo)

            }

        });

    }

}

自定义组建：

创建文件夹：

common.datas.tabbarItem.js

放JS：

export default [

    {

        img:'common/images/home.png',

        simg:'common/images/home_s.png',

        name:'首页'

    },

    {

        img:'common/images/hot.png',

        simg:'common/images/hot_s.png',

        name:'热点'

    },

    {

        img:'common/images/us.png',

        simg:'common/images/us_s.png',

        name:'社区'

    },

    {

        img:'common/images/me.png',

        simg:'common/images/me_s.png',

        name:'我'

    }

]

创建文件夹：

common.components.tabbar

创建：

tabbar.hml、tabbar.js、tabbar.css

hml:

<div class="container">

    <toolbar class="tabbar">

        <toolbar-item for="{{tabbarItems}}" icon='{{$item.img}}' value='{{$item.name}}' οnclick="jump($idx)" ></toolbar-item>

    </toolbar></div>

js:

import tabbarItems from '../../common/datas/tabbarItem.js';export default {

    data:{

        tabbarItems

    },

    jump(index){

        this.tabbarItems.forEach((item,index) => {

            item.img = tabbarItems[index].img;

        });

        this.tabbarItems[index].img = this.tabbarItems[index].simg;

    }

}

css:

.tabbar {

    position: fixed;

    left: 0;

    bottom: 0;

}

调用：

hml:

<element name='comp' src='../../components/tabbar/tabbar.hml'></element><div class="container">

    <text class="title">

        首页

    </text>

    <comp></comp></div>

底部组件

JS UI框架支持自定义组件，用户可根据业务需求将已有的组件进行扩展，增加自定义的私有属性和事件，封装成新的组件，方便在工程中多次调用，提高页面布局代码的可读性。

定义一个专门存放自定义组件的文件夹 components.tabbar 并设置3个基础文件 tabbar.hml、tabbar.js、tabbar.css，需要注意的是：3个文件的文件名必须保持一致，不然会存在找不到文件的情况。该自定义组件的目的是给页面底部配置一个 tabbar 选项卡体验。
设置底部选项卡对应的 json 数据源，用来保存 icon 图片、标题，以及点击选中后的 icon 图片。
 

// common.datas.tabbarItem.js
export default [
    {
        img:'common/images/home.png',
        simg:'common/images/home_s.png',
        name:'首页'
    },
    {
        img:'common/images/hot.png',
        simg:'common/images/hot_s.png',
        name:'热点'
    },
    {
        img:'common/images/us.png',
        simg:'common/images/us_s.png',
        name:'社区'
    },
    {
        img:'common/images/me.png',
        simg:'common/images/me_s.png',
        name:'我'
    }
]