arkts- 8 三方库介绍

一 @hadss/hmrouter & 导航

==>步骤1 安装

shell 复制代码

ohpm install @hadss/hmrouter

==>步骤2 依赖配置插件配置

2.1 依赖配置

插件版本建议和库的版本保持一致

修改工程根目录下的hvigor/hvigor-config.json5 文件，加入路由编译插件

js 复制代码

"dependencies": {
  "@hadss/hmrouter-plugin": "^1.2.4"  // 保持和 oh-package.json5中安装的版本一致
},

2.2 插件配置

修改工程根目录下的hvigorfile.ts，使用路由编译插件

js 复制代码

import { appTasks } from '@ohos/hvigor-ohos-plugin';
import { appPlugin } from "@hadss/hmrouter-plugin";

export default {
  system: appTasks,
  plugins: [appPlugin({ ignoreModuleNames: [ /** 不需要扫描的模块 **/ ] })]
  // 别扫描 我自己手动处理
};

⚠️⚠️ 特别注意 !!

entry模块下也有个hvigorfile.ts不要配置错误 entry/hvigorfile.ts

配置最下面的hvigorfile.ts 工程级别的

==>步骤3 初始化路由框架

在 UIAbility 或者启动框架 AppStartup 中初始化路由框架

js 复制代码

export default class EntryAbility extends UIAbility {
  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
  
    // 日志开启需在init之前调用，否则会丢失初始化日志
    HMRouterMgr.openLog("INFO")
    HMRouterMgr.init({
      context: this.context
    })
  }
}

==>步骤4 定义路由入口

HMRouter 依赖系统 Navigation 能力，所以必须在页面中定义一个 HMNavigation 容器

js 复制代码

# 1 在 ThirdPageOfNav 页, 定义导航入口页 NavHomePage

# 2 NavOtherPage 页 跳转 NavOtherPage 页

# 3 NavOtherPage 返回 NavOtherPage

js 复制代码

import { HMDefaultGlobalAnimator, HMNavigation } from '@hadss/hmrouter';
import { AttributeUpdater } from '@kit.ArkUI';

@Entry
@Component
struct thirdPageOfNav {
  modifier: NavModifier = new NavModifier();

  build() {
    Column() {
      Text('thirdPageOfNav').fontSize(30)
      HMNavigation({
        navigationId: 'mainNavigation', // 路由栈唯一标识
        homePageUrl: 'NavHomePage', // 指定入口页 为 NavHomePage页
        options: {
          standardAnimator: HMDefaultGlobalAnimator.STANDARD_ANIMATOR, // 标准转场动画
          dialogAnimator: HMDefaultGlobalAnimator.DIALOG_ANIMATOR,     // 弹窗转场动画
          modifier: this.modifier            // 导航属性修饰器
        }
      })
    }
    .backgroundColor(Color.Red)
    .width('100%')
    .height('100%')
  }
}

// 通过 AttributeUpdater 配置 Navigation 属性
class NavModifier extends AttributeUpdater<NavigationAttribute> {
  initializeModifier(instance: NavigationAttribute): void {
    instance.mode(NavigationMode.Stack);  // 单栏模式
    instance.navBarWidth('100%');
    // instance.hideTitleBar(true);          // 隐藏标题栏
    // instance.hideToolBar(true);           // 隐藏工具栏
  }
}

js 复制代码

import { HMRouter, HMRouterMgr,HMPopInfo } from '@hadss/hmrouter';


// 使用 @HMRouter 标签定义页面，绑定拦截器、生命周期及自定义转场动画
@HMRouter({
  pageUrl: 'NavHomePage', // 标签定义页面
  // interceptor: ['PageInterceptor'], // 绑定拦截器
  // lifecycle: 'pageLifecycle', // 生命周期
  // animator: 'pageAnimator' // 自定义转场动画
})

@Component
export struct NavHomePage{
  private param: DetailParam = new DetailParam()
  @State receivedResult: string = '暂无返回数据'

  aboutToAppear(): void {
    // 获取路由传递的参数
    const currentParam = HMRouterMgr.getCurrentParam() as DetailParam
    if (currentParam !== null) {
      this.param = currentParam
    }
  }

  build() {
    Column() {
      Text('NavHomePage') .fontSize(30)
      Text('获取参数:' + '\n'+ this.receivedResult).fontSize(15).backgroundColor(Color.Green).margin({top:30})
      Button('跳转到其他页')
        .onClick(() => {
          // 跳转并传参
          HMRouterMgr.push({
            navigationId: 'mainNavigation', // 导航id
            pageUrl: 'NavOtherPage', // 跳转到目标页面
            param: {
              id: 111,
              name: 'NavHomePage'
            } // 携带参数
          },{
            onResult: (popInfo: HMPopInfo) => { // 跳转到新页面，返回时的回调
              const res = popInfo.result as DetailParam
              if (res !== null && res !== undefined) {
                this.receivedResult = String(res.id) + res.name
                console.log(this.receivedResult);
              }
              console.info(`来源页面：${popInfo.srcPageInfo.name}`) // 获取返回来源页面名称
            }
          })
        })
    }
    .width('100%') .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

@HMRouter({ pageUrl: 'NavOtherPage' })

@Component
export struct NavOtherPage {
  private param: DetailParam = new DetailParam()

  aboutToAppear(): void {
    // 获取外传进来的参数
    const currentParam = HMRouterMgr.getCurrentParam() as DetailParam
    if (currentParam !== null) {
      this.param = currentParam
    }
  }
  build() {
    Column() {
      Text('NavOtherPage') .fontSize(30)
      Text(`获取参数为: - ID: ${this.param.id}, 名称: ${this.param.name}`).backgroundColor(Color.Green)
        .fontSize(20)
      Button('返回上一页')
        .onClick(() => {
          HMRouterMgr.pop({ navigationId: 'mainNavigation' })
        })
      Button('带参数返回')
        .onClick(() => {
          HMRouterMgr.pop({
            navigationId: 'mainNavigation',
            param: {
              id: 222,
              name: 'NavOtherPage'
            }
          })
        })
    }
    .width('100%') .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

// 定义参数模型
class DetailParam {
  id: number = 0
  name: string = ''
}

二 @tencent/mmkv & 缓存

对标系统的Preferences
为同步存储

bash 复制代码

ohpm install @tencent/mmkv

js 复制代码

import { MMKV } from '@tencent/mmkv'

// 获取默认实例
const mmkv = MMKV.defaultMMKV()
// 等价于 const defaultMMKV = MMKV.mmkvWithID('mmkv.default')

// 写入
mmkv.encodeBool('isLogin', true)
mmkv.encodeString('userName', '张三')
mmkv.encodeNumber('userId', 1001)

// 读取
let isLogin: boolean = mmkv.decodeBool('isLogin', false)
let userName: string = mmkv.decodeString('userName', '')
let userId: number = mmkv.decodeNumber('userId', 0)

// 删除
mmkv.removeValueForKey('userName')

// 清空
mmkv.clearAll()

js 复制代码

import { MMKV } from '@tencent/mmkv'

// 指定 mmapID 创建独立实例，数据互不干扰
const userMMKV = MMKV.mmkvWithID('user_store')
const settingMMKV = MMKV.mmkvWithID('setting_store')

userMMKV.encodeString('token', 'abc123')
settingMMKV.encodeBool('notifyEnabled', true)

// 各实例数据独立存储
let token = userMMKV.decodeString('token', '')
let notify = settingMMKV.decodeBool('notifyEnabled', false)

三 @ohos/axios & 网络请求

js 复制代码

ohpm install @ohos/axios

js 复制代码

// 添加网络权限

"requestPermissions": [{
  'name': 'ohos permission.INTERNET'
}],

js 复制代码

import axios, { AxiosResponse } from '@ohos/axios'

axios.get(bannerPath)
  .then((res: AxiosResponse<BannerData>) => {
    if ( res.data.data &&  res.data.data.length >0) { // 注意 res.data 这tm才是原始数据, 三方库在原始数据外又包了一层
      this.list = res.data.data
    }
    console.log('----->' + JSON.stringify(this.list))
  })

四 @abner/refresh_v2 & 刷新/加载

bash 复制代码

ohpm install @abner/refresh_v2

js 复制代码

import axiosClient from '../network/AxiosRequest'
import { AxiosHeaders } from '@ohos/axios'
import { ListView } from '@abner/refresh_v2';
import { RefreshController, RefreshDataSource } from "@abner/refresh_v2";


controller: RefreshController = new RefreshController() //刷新控制器，声明全局变量
dataSource: RefreshDataSource = new RefreshDataSource() //数据懒加载操作对象，执行数据增删改查

// 网络请求 -- 下拉刷新
refreshRequest(isRefresh: boolean = false){
  this.pageIndex = 0
  axiosClient.get<BaseBean<BaseListBean<ArticleBean[]>>>({
    url: `${baseurl}article/list/${this.pageIndex}/json?cid=${this.cid}`,
    headers: new AxiosHeaders({ 'Cookie': ''}),
    showLoading: true
  }).then((res)=>{
    if ( res.data.datas &&  res.data.datas.length >0) {
      this.list = res.data.datas
      this.dataSource.initData(this.list)
    }
    if (isRefresh) {
      this.controller.finishRefresh()
    }
  })
    .catch((error: BusinessError)=>{
      if (isRefresh) {
        this.controller.finishRefresh()
      }
    })
}
// 网络请求 -- 上拉下载
loadMoreRequest() {
  this.pageIndex++
  axiosClient.get<BaseBean<BaseListBean<ArticleBean[]>>>({
    url: `${baseurl}article/list/${this.pageIndex}/json?cid=${this.cid}`,
    headers: new AxiosHeaders({ 'Cookie': ''}),
    showLoading: true
  }).then((res)=>{
    if ( res.data.datas &&  res.data.datas.length >0) {
      this.list = res.data.datas
      this.dataSource.pushDataArray(this.list);
    }
    this.controller.finishLoadMore() // 停止加载动画
  })
    .catch((error: BusinessError)=>{
      this.pageIndex--
      this.controller.finishLoadMore() // // 停止加载动画
    })
}

build() {
  Column() {
    ListView({
      lazyDataSource: this.dataSource, // 数据源
      itemLayout:(item, index) => {this.itemCell(item as ArticleBean,index)}, // item
      controller: this.controller, // 控制器
      enableLoadMore: this.loadMore, // 允许下拉刷新
      onRefresh: ()=>{
        this.refreshRequest(true)
      },
      onLoadMore: ()=>{
        this.loadMoreRequest()
      }
    })
  }
  .backgroundColor('#F5F5F5')
  .size({width:'100%',height:'100%'})
}