鸿蒙Next-集成HmRouter的路由模式
第一步：全局安装hmrouter依赖ohpm install @hadss/hmrouter
第二步：修改全局的hvigor-config.json5(加入hm-router插件)
hvigor/hvigor-config.json5
{
"modelVersion": "5.0.1",
"dependencies": {
"@hadss/hmrouter-plugin": "^1.0.0-rc.10"
},
"execution": {
// "analyze": "normal", /* Define the build analyze mode. Value: [ "normal" | "advanced" | false ]. Default: "normal" */
// "daemon": true, /* Enable daemon compilation. Value: [ true | false ]. Default: true */
// "incremental": true, /* Enable incremental compilation. Value: [ true | false ]. Default: true */
// "parallel": true, /* Enable parallel compilation. Value: [ true | false ]. Default: true */
// "typeCheck": false, /* Enable typeCheck. Value: [ true | false ]. Default: false */
},
"logging": {
// "level": "info" /* Define the log level. Value: [ "debug" | "info" | "warn" | "error" ]. Default: "info" */
},
"debugging": {
// "stacktrace": false /* Disable stacktrace compilation. Value: [ true | false ]. Default: false */
},
"nodeOptions": {
// "maxOldSpaceSize": 8192 /* Enable nodeOptions maxOldSpaceSize compilation. Unit M. Used for the daemon process. Default: 8192*/
// "exposeGC": true /* Enable to trigger garbage collection explicitly. Default: true*/
}
} 第三步：在products成加入hap编译插件
必要留意hap/hsp/har对应的编译插件不同
products/entry/hvigorfile.ts
import { hapTasks } from '@ohos/hvigor-ohos-plugin';
import { hapPlugin } from "@hadss/hmrouter-plugin";
export default {
system: hapTasks, /* Built-in plugin of Hvigor. It cannot be modified. */
plugins: // 使用HM Custom plugin to extend the functionality of Hvigor. */
} 第四步：在features的四个包中加入hsp的编译插件-四个hsp包的hvigorfile.ts插件均一致
features/cart/hvigorfile.ts
import { hspTasks } from '@ohos/hvigor-ohos-plugin';
import { hspPlugin } from "@hadss/hmrouter-plugin";
export default {
system: hspTasks, /* Built-in plugin of Hvigor. It cannot be modified. */
plugins: /* Custom plugin to extend the functionality of Hvigor. */
} 增补：为了防止底层basic也有大概做一些公共页面，也加入同样的配置
commons/basic/hvigorfile.ts
import { hspTasks } from '@ohos/hvigor-ohos-plugin';
import { hspPlugin } from "@hadss/hmrouter-plugin";
export default {
system: hspTasks, /* Built-in plugin of Hvigor. It cannot be modified. */
plugins: /* Custom plugin to extend the functionality of Hvigor. */
} 第五步：在入口Ability中加入HmRouter的初始化上下文
products/entry/src/main/ets/entryability/EntryAbility.ets
import { HMRouterMgr } from '@hadss/hmrouter';
export default class EntryAbility extends UIAbility {
onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
// 初始化HmRouter
HMRouterMgr.init({
context: this.context,
});
this.context.getApplicationContext().setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_NOT_SET);
hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
} 最后一步：
定义路由入口
将整个页面的初始化页面作为路由的入口
要求：
●利用HmNavigation作为根容器，包裹所有子页面
●HmNavigaiton外层必须再包裹一个容器组件
●实现一个继续类并且实例化，绑定HmNavigaiton的modifer属性
●利用HmNavigation包裹入口组件
import { HomeView } from 'home/Index';
import { CategoryView } from 'category/Index';
import { CartView } from 'cart/Index';
import { MyView } from 'my/Index';
import { BreakpointConstants, BreakPointType, MeiKouConstants } from 'basic';
import { AttributeUpdater } from '@kit.ArkUI';
import { HMDefaultGlobalAnimator, HMNavigation } from '@hadss/hmrouter';
interface TabItem {
text: string
normal: ResourceStr
active: ResourceStr
}
class MyNavModifier extends AttributeUpdater<NavigationAttribute> {
initializeModifier(instance: NavigationAttribute): void {
instance.titleMode(NavigationTitleMode.Mini)
instance.hideTitleBar(true)
}
}
@Entry
@Component
struct Index {
@State activeIndex: number = 0
// 断点值
@StorageProp(BreakpointConstants.BREAK_POINT_KEY)
currentBreakpoint: string = BreakpointConstants.SM
// 获取底部安全高度
@StorageProp(MeiKouConstants.SafeBottom) safeBottom: number = 0
modifier: MyNavModifier = new MyNavModifier();
list: TabItem[] = [
{ text: '首页', normal: $r('app.media.ic_public_home_normal'), active: $r('app.media.ic_public_home_active') },
{ text: '分类', normal: $r('app.media.ic_public_pro_normal'), active: $r('app.media.ic_public_pro_active') },
{ text: '购物袋', normal: $r('app.media.ic_public_cart_normal'), active: $r('app.media.ic_public_cart_active') },
{ text: '我的', normal: $r('app.media.ic_public_my_normal'), active: $r('app.media.ic_public_my_active') },
]
build() {
Column() {
HMNavigation({
navigationId: 'mainNavigation', homePageUrl: 'MainPage',
options: {
standardAnimator: HMDefaultGlobalAnimator.STANDARD_ANIMATOR,
dialogAnimator: HMDefaultGlobalAnimator.DIALOG_ANIMATOR,
modifier: this.modifier
},
}) {
Tabs({ barPosition: BarPosition.End }) {
ForEach(this.list, (item: TabItem, index: number) => {
TabContent() {
if (index == 0) {
HomeView()
} else if (index == 1) {
CategoryView()
} else if (index == 2) {
CartView()
} else {
MyView()
}
}
.tabBar(this.TabItemBuilder(item, index))
})
}
.barPosition(
new BreakPointType({
sm: BarPosition.End,
md: BarPosition.End,
lg: BarPosition.Start
}).getValue(this.currentBreakpoint)
)
.vertical(this.currentBreakpoint === 'lg' ? true : false)
.scrollable(false)
.padding({bottom: this.safeBottom})
.onTabBarClick(index => {
this.activeIndex = index
})
}
}
}
@Builder
TabItemBuilder(item: TabItem, index: number) {
Column() {
Image(this.activeIndex === index ? item.active : item.normal)
.width(24)
.aspectRatio(1)
Text(item.text)
.fontSize(12)
.fontColor($r('.color.black'))
}
.justifyContent(FlexAlign.SpaceEvenly)
.height(50)
}
}
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]