鸿蒙os第四次培训（菜单 页面跳转)
运用到了和vue部分相似的内容 同为前端开发 我认为鸿蒙os的开发更为分散式且在华为系列工具上的适配性更高
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>
鸿蒙os第四次培训（菜单 页面跳转)相关推荐
- elementui中导航组件点击二级菜单页面跳转但是二级菜单关闭问题
elementui中导航组件库 多个一个菜单中包含二级菜单 第一次点击二级菜单页面跳转但是二级菜单关闭功能 解决方法: :default-active="$route.path": ...
- 华为p40pro如何升级鸿蒙,可以升级到鸿蒙OS的四款华为手机，相信都没有后悔入手！...
最近一段时间,华为公布了可以升级到EMUI11的名单,里面包含了很多机型,甚至有很多旧机型也在内,这说明两点.第一点就是华为没有忘记老用户,即使是前几年的机型也可以升级到最新的系统:第二点就是升级到E ...
- 华为手机会升级鸿蒙,可以升级到鸿蒙OS的四款华为手机，相信都没有后悔入手！...
最近一段时间,华为公布了可以升级到EMUI11的名单,里面包含了很多机型,甚至有很多旧机型也在内,这说明两点.第一点就是华为没有忘记老用户,即使是前几年的机型也可以升级到最新的系统:第二点就是升级到E ...
- 实验四：app内页面跳转
简介 "Activity"是Android应用中负责与用户交互的组件,相当于Swing中的JFrame控件,但Jframe本身可以设置布局管理器,即自身可以添加组件,但activi ...
- Android 学习（四）——Android Studio 页面跳转
一.显式意图跳转 1.设置按键(参考第三次作业:设置按键的三种基本方式) 2.新建Activity2 3.按键侦听,设置页面跳转 Intent intent = new Intent(this,Mai ...
- (一)页面跳转的四种方法及页面跳转中相对路径问题
转载https://www.cnblogs.com/hrone/p/8067036.html navigator导航组件 首先页面跳转的相对路径中经常出现,例如" test/test&quo ...
- 鸿蒙os系统3.0体验,华为鸿蒙OS系统体验，和安卓系统差距很大，你愿意升级吗？...
华为自研的鸿蒙OS系统一直都是焦点,抱着要取代安卓系统的终极目标,华为启动了自研.本来华为只是想要把鸿蒙OS系统作为后备方案,但是没想到遭遇到了谷歌的限制,所以这个后备计划也不得不提前"转正 ...
- 华为鸿蒙os有必要升级吗,华为鸿蒙OS系统抢先体验，跟安卓系统有差距，看完再决定是否升级...
原标题:华为鸿蒙OS系统抢先体验,跟安卓系统有差距,看完再决定是否升级 华为自研的鸿蒙OS系统一直都是焦点,抱着要取代安卓系统的终极目标,华为启动了自研.本来华为只是想要把鸿蒙OS系统作为后备方案,但 ...
- 华为鸿蒙os多少钱一部手机,华为鸿蒙OS来了 第一个支持国产手机商是它
在被米国持续的打压之年,华为依然坚强地向自己的既定目标出发,华为的鸿蒙OS已经四月底推送了公测版本,最快会在下个月推送正式版本,也就是说6月份,可能首批推送鸿蒙系统的名单手机,都可以尝到优秀而独特的国 ...
最新文章
- Python中fnmatch模块的使用
- R语言——linux离线安装R包
- 分享一些面试中的经验和心得
- [分享]我国食品行业ERP现状及分析解决方案
- MarkDown语法, 快捷键,Dos命令
- python接口自动化测试二十四：上传多个附件，参数化
- (第三章)查看数据库
- 低价营销网站建设是陷阱，中小企业要谨记！
- Spring Boot入口类
- matlab利用窗改变幅值_Matlab在车辆中的应用 信号处理分析
- win8下hosts保存文档失败,提示：请检查文件是否被另一个应用程序打开
- response对象设置返回状态_爬虫代理之设置
- cad2023三维立体图形图纸工程设计绘图软件Autodesk AutoCAD 2023 中文
- 蛋白质分子动力学模拟
- java做绿色数字雨_数字雨
- qt视频教程qt入门教程嵌入式linux应用开发qt编程开发,QT项目实战教程-Qt应用项目实例开发视频教程...
- 史上超全web渗透测试思维导图
- 使用kubeadm安装kuberneters
- 网络安全红蓝军对抗完整战术周期
- 数据分析项目-大选献金数据分析