当前位置:   article > 正文

鸿蒙笔记导航栏,路由,还有axios

鸿蒙笔记导航栏,路由,还有axios

1.导航组件

导航栏位置可以调整,导航栏位置

  1. @Entry
  2. @Component
  3. struct t1 {
  4. build() {
  5. Tabs(){
  6. TabContent() {
  7. Text('qwer')
  8. }
  9. .tabBar("首页")
  10. TabContent() {
  11. Text('发现内容')
  12. }
  13. .tabBar('发现')
  14. TabContent() {
  15. Text('我的内容')
  16. }
  17. .tabBar("我的")
  18. }
  19. // 做平板适配的
  20. .vertical(false)
  21. }
  22. }

可滚动就是加个方法即可

.barMode(BarMode.Scrollable)

自定义导航 @Build 表示组件ui的复用,相当于抽取出来个组件,差不多的意思。

ArkUI还提供了⼀种更轻量的UI元素复用机制 @Builder , @Builder 所装饰的函数遵循
build() 函数语法规则,开发者可以将重复使用的UI元素抽象成⼀个方法,在build方法里调用。

 Image(this.currentIndex === index ? iconSelected : icon)

这句话我们知道选的是哪个tags,根据index

这个是什么意思,是当前导航栏的意思吗?

   .onChange((index) => {
      this.currentIndex = index;
    })

  1. @Entry
  2. @Component
  3. struct BarCustomPage {
  4. @State currentIndex: number = 0;
  5. build() {
  6. Tabs() {
  7. TabContent() {
  8. Text('首页')
  9. }.tabBar(this.barBuilder(0, '主页', $r('app.media.icon_home'), $r('app.media.icon_home_selected')))
  10. TabContent() {
  11. Text('消息')
  12. }.tabBar(this.barBuilder(1, '消息', $r('app.media.icon_message'), $r('app.media.icon_message_selected')))
  13. TabContent() {
  14. Text('我的')
  15. }.tabBar(this.barBuilder(2, '我的', $r('app.media.icon_mine'), $r('app.media.icon_mine_selected')))
  16. }.barPosition(BarPosition.End)
  17. .onChange((index) => {
  18. this.currentIndex = index;
  19. })
  20. }
  21. @Builder barBuilder(index: number, title: string, icon: Resource, iconSelected: Resource) {
  22. Column() {
  23. Image(this.currentIndex === index ? iconSelected : icon)
  24. .width(25)
  25. .height(25)
  26. Text(title)
  27. .fontColor(this.currentIndex === index ? '#0491d1' : '#8a8a8a')
  28. .fontWeight(FontWeight.Medium)
  29. }
  30. }
  31. }

上面为什么tarBar可以放个函数进去

tarbar源码需要的参数,我发现这鸿蒙感觉和java太像了没啥意思,听这课无聊的批爆,不推荐大家学。

这源码说了,tarbar可以给的参数有string,resource,customerbuild(这个是个回调函数),或者{。。。。}这个意思是有以下参数的函数。

2.页面路由

给每个页面配个唯一标识,然后让他跳。

router模块提供了两种跳转模式,分别是router.pushUrl()router.replaceUrl(),这两种模式的区别在于是否保留当前页的状态。pushUrl()会将当前页面压入历史页面栈,因此使用该方法跳转到目标页面之后,还可以再返回。而replaceUrl(),会直接销毁当前页面并释放资源,然后用目标页替换当前页,因此使用该方法跳转到目标页面后,不能返回。

页面栈什么意思?

栈底,栈顶,相当于有一个栈,里面可以存多个页面,可以回滚页面,初始的页面就放栈底?比如首页点登录,push到登录页面,因为要回首页,登录成功,回首页就replace,把登录干掉就行了,不要回滚。

页面跳转,这个文件看,在main_pages.json中配置自己的路由和vue差不多,你要用哪些路由在这个文件配置

或者

它会自动添加路由

刚才报了个错,如果你要跳的话,你必须要把你准备跳的那个界面同样添加到路由地址那里。

服了,它又不给提示,只有靠自己猜,这点差评,错误提示不明显。

  1. import router from '@ohos.router'
  2. @Entry
  3. @Component
  4. struct t2 {
  5. build() {
  6. Row({space:20}){
  7. Button("11")
  8. .onClick(()=>{
  9. router.pushUrl({
  10. url:"pages/day03/Page1"
  11. })
  12. })
  13. }
  14. }
  15. }

页面返回

router.back({url:'pages/Index'})

可以指定个路径返回

4.传递参数

可以在调用上述方式时,添加一个params属性,并指定一个对象作为参数

目标页面可通过router.getParams()方法获取参数

对象可以 as来获取对象

也可以不用传对象哈

发送页

  1. import router from '@ohos.router'
  2. export class ProDto{
  3. id:number
  4. productName:string
  5. price:number
  6. constructor(id: number, productName: string, price: number) {
  7. this.id = id
  8. this.productName = productName
  9. this.price = price
  10. }
  11. }
  12. @Entry
  13. @Component
  14. struct t2 {
  15. build() {
  16. Row({space:20}){
  17. Button("11")
  18. .onClick(()=>{
  19. router.pushUrl({
  20. url:"pages/day03/Page1",
  21. params: new ProDto(1,"wawa",6999)
  22. })
  23. })
  24. }
  25. }
  26. }

接受方

  1. import router from '@ohos.router';
  2. import { ProDto } from '../day03/T1';
  3. @Entry
  4. @Component
  5. struct Page1 {
  6. @State message: string = 'Hello World';
  7. build() {
  8. RelativeContainer() {
  9. Text(this.message)
  10. .id('Page1HelloWorld')
  11. .fontSize(50)
  12. .fontWeight(FontWeight.Bold)
  13. .alignRules({
  14. center: { anchor: '__container__', align: VerticalAlign.Center },
  15. middle: { anchor: '__container__', align: HorizontalAlign.Center }
  16. })
  17. Button("获取参数")
  18. .onClick(()=>{
  19. // let obj :ProDto=()router.getParams() as ProDto;
  20. let obj:ProDto = router.getParams() as ProDto;
  21. // console.log(obj.productName)
  22. console.log(obj.id+"")
  23. console.log(obj.productName+"")
  24. console.log(obj.price+"")
  25. })
  26. }
  27. .height('100%')
  28. .width('100%')
  29. }
  30. }

组件的构造函数

普通组件的生命周期

aboutApeear:组件出现之前,build之前

build:构建页面结构

abouttoDisappear:销毁之前,build之后

入口组件的生命周期,打了@entry的那个组件

独有的三个

onpageshow:每次页面显示的时候,路由跳转过去,后台进入前台

onpageHide:每次隐藏都会调用一次

onbackpress:每次点击返回按钮会被调用

使用axios

系统权限 用户权限

就手机那些权限

配置权限

开发者需要在entry/src/main/module.json5文件中声明所需权限,具体格式如下

从这英文来看,似乎是什么网络权限,我在想后面,需要什么权限的话,同样也可以在上面配吧。

  1. {
  2. "module": {
  3. ......
  4. "requestPermissions": [
  5. {
  6. "name": 'ohos.permission.INTERNET'
  7. }
  8. ]
  9. }
  10. }

在terminal安装  ohpm类似于npm

ohpm i @ohos/axios

安装不起,我看有些需要在path路径上添加ohpm,但是我没有添加依旧下起了,不知道为什么

安装好了

  1. const instance = axios.create({
  2. baseURL: 'http://<ip>:<port>',
  3. timeout: 2000
  4. })

注意:需要根据实际情况替换上述的ip地址和端口号

第二步

创建axios实例后,便可通过该实例的api来发送各种http请求,常用的api定义如下

api功能
get(url, config?): Promise发送GET请求
delete(url, config?): Promise发送DELETE请求
post(url, data?, config?): Promise发送POST请求
put(url, data?, config?): Promise发送PUT请求

第三步返回值也是一样的

then和catch

上述api的返回值类型均为PromisePromise是JavaScript中用于表示异步操作结果的对象,若操作成功,其中会包含具体结果,若操作失败,其会包含错误的原因。在实际应用中,开发者可以通过该对象的then()方法来处理操作成功时的结果,通过catch()方法来处理操作失败的情况,例如

  1. get(...)
  2. .then((response:AxiosResponse)=>{
  3. //处理请求成功的结果
  4. ...
  5. })
  6. .catch((error:AxiosError)=>{
  7. //处理请求失败的错误
  8. ...
  9. })

自己实战测试了下

关于axios传递参数,它可以有多个方式,可以放个对象,也可以其他。

  1. import axios, { AxiosError, AxiosResponse } from '@ohos/axios'
  2. //创建axios实例
  3. const instance = axios.create({
  4. baseURL: 'http://127.0.0.1:8888',
  5. timeout: 1000
  6. })
  7. @Entry
  8. @Component
  9. struct AxiosPage {
  10. @State phone: string = ''
  11. @State code: string = ''
  12. build() {
  13. Column({ space: 40 }) {
  14. Button('发送验证码')
  15. .onClick(() => {
  16. console.log("1322")
  17. //发送get请求
  18. instance.get('/t1')
  19. .then((response:AxiosResponse) => {
  20. this.code = response.data
  21. console.log(this.code)
  22. })
  23. .catch((error:AxiosResponse) => {
  24. console.log(error.data)
  25. })
  26. })
  27. }.width('100%')
  28. .height('100%')
  29. .justifyContent(FlexAlign.Center)
  30. .padding(20)
  31. }
  32. }

成功了哈

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:【wpsshop博客】
推荐阅读
相关标签
  

闽ICP备14008679号