自定义组件
首先在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()
}
});
}