跨平台移动开发前端【免费下载链接】HippyHippy is designed to easily build cross-platform dynamic apps. 项目地址https://gitcode.com/gh_mirrors/hi/Hippy点击查看免费下载导读hippy-vue-routernpm 包名hippy/vue-router是 Hippy 官方为hippy-vue定制的路由库它基于 vue-router 深度改造让开发者能在 Native 环境中以几乎与 Web 一致的写法完成多页面路由管理并额外支持 Android 硬件返回键导航、安全区适配等原生能力。本文以仓库中 driver/js/packages/hippy-vue-router/CHANGELOG.md 为时间线骨架结合 hippy.js、index.js、install.js 等源码及官方 demo 配置梳理该库从 2018 年首次落地到 2023 年 3.x 系列的每一个关键版本、能力变化与底层实现帮助读者快速判断各版本特性、理解 Android Back 键与beforeAppExit生命周期的工作原理并掌握在 Hippy 工程中接入路由的完整姿势。一、包定位hippy/vue-router是什么在进入版本时间线之前先明确这个包的定位与它在 Hippy 技术栈中的位置。包名与版本package.json 中声明包名为hippy/vue-router描述为 Official router for hippy-vuehippy-vue 官方路由许可证为 Apache-2.0。技术血缘仓库 README.md 明确写道This is a fork of vue-router for working together with hippy-vue in native environment.即它是 vue-router 的派生分支专门服务于 Hippy 的 Native 渲染环境。能力范围README 声明它支持 vue-router 的全部特性supported all features of vue-router并在此基础上追加两项 Native 专属能力Android 硬件返回键hardware back button导航到上一页面向 hippy-vue 应用的安全区safe area包装用于兼容不同机型硬件。从官方文档 docs/api/hippy-vue/router.md 可知Hippy 对 vue-router 只做了小幅度修改对外提供与官方一致的接口使用方仍可参考 vue-router 官方文档唯一明确的限制是不支持页面切换动画因为transition组件在 Hippy 环境中尚未实现。开发方式上README 说明该仓库的开发主线跟随主流 vue-routermaster分支对应 vue-router 的远端dev分支Hippy 的额外功能会追加在feature/hippy-vue分支上核心功能与缺陷修复建议直接提交到 vue-router 上游。二、完整版本时间线以 CHANGELOG 为骨架仓库 CHANGELOG.md 遵循 Conventional Commits 规范记录所有重要变更下面按时间先后梳理全部记录在案的版本。注意 2.x 时代的多个条目为 lerna monorepo 的仅版本号提升Version bump only记录本身不含代码变更但保留了完整的发布节奏信息。2.0.02019-12-18——公开化与命名空间清理Change移除 npm 命名空间前缀tencent版本重置为 2.0.0 并公开发布。2.0.12020-01-22——正式更名Change包名更改为hippy/vue-router。这是该包以当前名字对外发布的开端。2.0.22020-03-18NoteVersion bump only仅版本号提升无代码变更。2.0.32020-04-23NoteVersion bump only。2.1.02020-10-29NoteVersion bump only。2.1.12020-11-11NoteVersion bump only。2.1.22020-11-23NoteVersion bump only。3.0.02023-06-29——大版本升级与依赖安全修复Bug Fixes更新 lerna修复存在漏洞的 npm 包update lerna to fix vulernable npm package提交号 22ae601。这是 3.x 时代唯一记录在案的实质性代码仓库运维变更属于依赖链安全加固。3.0.12023-08-07NoteVersion bump only。3.0.2-beta2023-08-22NoteVersion bump only。作为 3.0.x 系列的 beta 快照发布。关于 3.0.0-beta.x 系列的时间顺序说明CHANGELOG 中还存在一段3.0.0-beta.1至3.0.0-beta.5的记录2018-11-11 至 2019-04-12发布时间早于 2.0.0。这源于 Hippy 内部版本线曾一度延续旧编号2019-04 之后才重置为 2.0.0 并公开。这些 beta 版本恰好记录了路由库在 Native 端从 0 到 1的核心能力建设是理解本包独有价值的关键详见下一节。三、Native 能力从 0 到 13.0.0-beta 系列的核心变更虽然 2.x/3.x 正式版多为版本号提升但 3.0.0-beta 系列集中承载了 hippy-vue-router 相对 vue-router 的全部差异化创新值得逐条展开。3.0.0-beta.12018-11-11——首次 Hippy 集成Added基于 vue-router 3.0.1。Added完成初始的 hippy 集成Initial completed hippy integration。Added完成 Android 硬件返回键的初始集成Initial android hardware back button integration。这一版本奠定了包的技术基线路由核心机制完全继承 vue-router 3.0.1matcher、路由记录、守卫体系同时引入 Hippy 专属的 History 实现与 Android 返回键监听。对照源码可以看到这套体系至今仍在延续路由匹配与守卫VueRouter在 index.js 中通过createMatcher(options.routes || [], this)构建 matchercreate-matcher.js 实现基于 pathList/pathMap/nameMap 的路径与命名路由匹配、redirect、alias 等逻辑守卫链beforeEach/beforeResolve/afterEach通过registerHook注册到 hooks 列表见 index.js并在 hippy.js 的confirmTransition中按组件内离开守卫 → 全局 beforeEach → 组件内更新守卫 → 路由配置 beforeEnter → 异步组件解析 → 组件内 beforeRouteEnter → 全局 beforeResolve的顺序串行执行。3.0.0-beta.22019-03-26——返回键开关与退出确认Added新增disableAutoBack选项用于关闭返回键监听器。Added新增beforeAppExit()生命周期用于退出前确认exit confirmation。这是 hippy-vue-router 最核心的两个对外配置项源码与 demo 中均有完整实现证据disableAutoBack的生效链路在 index.js 的init中仅当Vue.Native.Platform android、history.hardwareBackPress存在且!this.options.disableAutoBack时才启用硬件返回键if (Vue.Native.Platform android isFunction(history.hardwareBackPress) !this.options.disableAutoBack) { // Enable hardware back event. // FIXME: DeviceEventModule initialize a bit later, cant callNative immediately setTimeout(() Vue.Native.callNative(DeviceEventModule, setListenBackPress, true), 300); // Listen the hardware back event and redirect to history. app.$on(hardwareBackPress, () history.hardwareBackPress()); }注意其中两处工程细节一是通过setTimeout(..., 300)延迟 300ms 调用DeviceEventModule.setListenBackPress源码注释解释了原因——DeviceEventModule初始化较晚不能立即 callNative二是返回事件通过 Vue 实例的hardwareBackPress事件转发到history.hardwareBackPress()。beforeAppExit()的调用点在 hippy.js 的hardwareBackPress中hardwareBackPress() { if (this.stack.length 1) { return this.go(-1); } const { matched } this.stack[0]; if (matched.length) { const { components, instances } matched[0]; if (components components.default isFunction(components.default.beforeAppExit)) { return components.default.beforeAppExit.call(instances.default, this.exitApp); } } return this.exitApp(); }逻辑语义当路由栈长度大于 1 时返回键执行go(-1)回退上一页当已经处于栈底首页时若首页根组件定义了beforeAppExit则调用它并传入exitApp回调让业务方自行决定是否真正退出否则直接调用exitApp()。exitApp的实现同一文件 hippy.js 中exitApp() { const Vue getVue(); // The method is only able to trigger by pressing hardware back button. Vue.Native.callNative(DeviceEventModule, invokeDefaultBackPressHandler); }通过桥接调用DeviceEventModule.invokeDefaultBackPressHandler触发终端的默认返回处理。注释特别强调该方法只能由硬件返回键触发才有效。3.0.0-beta.32019-03-26——生命周期 this 绑定修复Fixed修复beforeAppExit()生命周期中this的绑定问题。对照 hippy.js 中components.default.beforeAppExit.call(instances.default, this.exitApp)的写法可以看到最终实现通过Function.prototype.call将根组件实例instances.default显式绑定为beforeAppExit的this保证生命周期内可以通过this访问组件数据与方法——这正是该修复在源码中的落点。3.0.0-beta.42019-04-08——返回事件开关接入Added为 hippy-vue-router 接入 BackAndroid 事件开关Added BackAndroid event switch。对应 index.js 中的setListenBackPress开关逻辑即通过终端模块动态开启/关闭 Android 返回键监听避免在不需要返回导航的场景下误拦截系统返回。3.0.0-beta.52019-04-12——返回键监听时序修正Fixed将 BackAndroid 事件的开关时机延后确保其可靠工作Make BackAndroid event switch on later to make sure it works。这解释了 index.js 中setTimeout(..., 300)延迟存在的根因Android 端事件模块初始化晚于 JS 启动过早开关会导致监听失效因此必须延后执行。小结beta 系列沉淀的能力清单至此hippy-vue-router 相对 vue-router 的全部差异化能力均告定型能力引入版本源码落点基于 vue-router 3.0.1 的完整路由体系3.0.0-beta.1create-matcher.js、index.jsAndroid 硬件返回键导航3.0.0-beta.1 / beta.4 / beta.5hippy.js、index.jsdisableAutoBack关闭返回监听3.0.0-beta.2index.jsbeforeAppExit()退出确认3.0.0-beta.2 / beta.3hippy.js四、路由在 Hippy 中的落地方式History 与页面栈hippy-vue-router 与 vue-router 的最大差异在于没有浏览器 URL因此它用一个内存中的路由栈 索引模拟浏览器历史记录。这正是 hippy.js 中HippyHistory类的职责构造以/为默认路由this.router.match(/, this.current)若根路径/不存在会直接抛错Root router path with / is required初始化this.stack [defaultRoute]与this.index 0见 hippy.jspushthis.stack this.stack.slice(0, this.index 1).concat(route)后index 1见 hippy.js语义上会截断当前索引之后的历史相当于 Web 端的 pushState 覆盖后续记录replacethis.stack this.stack.slice(0, this.index).concat(route)索引不动见 hippy.jsgo(n)基于this.index n定位目标路由越界直接返回否则confirmTransition后更新索引并截断栈见 hippy.jsensureURL在 Native 环境无 URL 概念实现为空操作noop。路由对象本身由 util/route.js 的createRoute创建包含name/meta/path/hash/query/params/fullPath/matched字段并通过Object.freeze冻结保证不可变。isSameRoute与isIncludedRoute分别用于判断同一路由与包含路由是router-link激活态active class判定的基础。五、工程接入实操以官方 hippy-vue-demo 为例仓库自带的 hippy-vue-demo 展示了 hippy-vue-router 的完整接入流程可以作为最小可运行的参考工程。1. 安装与注册在 main-native.js 中先引入vue-router包并通过Vue.use(VueRouter)完成插件注册再实例化路由对象import Vue from vue; import VueRouter from vue-router; import App from ./app.vue; import routes from ./routes; Vue.config.productionTip false; Vue.use(VueRouter); const router new VueRouter(routes); const app new Vue({ appName: Demo, rootView: #root, render: h h(App), router, // 路由注入根实例 });这与 Web 端 vue-router 的用法完全一致唯一区别是new VueRouter(routes)直接传入包含routes字段的配置对象见下文路由表。2. 路由表与返回键开关routes.js 是配置的完整范例注意它导出的不是数组而是顶层配置对象export default { /** * 阻止 Android 上 Back 键触发页面返回 * 默认值为 false就是开启 Back 键返回。 */ disableAutoBack: false, routes: [ { path: /, component: Menu }, { path: /remote-debug, component: RemoteDebug, name: 调试 }, ...Object.keys(demos).map(demoId ({ path: /demo/${demoId}, name: demos[demoId].name, component: demos[demoId].component, })), ], };关键点disableAutoBack: false为默认值即默认开启 Android Back 键返回导航设为true可阻止 Back 键触发页面返回对应 index.js 中的判断条件根路由path: /必须存在否则HippyHistory构造时抛错路由表支持通过Object.keys(demos).map(...)批量动态生成说明路由配置是标准的 vue-router 对象数组支持path/name/component全部字段。3. 页面内跳转router-link 与编程式导航menu.vue 展示了router-link的用法router-link :to{path: /demo/${feature.id}} classbutton {{ feature.name }} /router-linkRouterLink组件实现在 link.js它通过router.resolve(this.to, current, this.append)解析目标路由并根据当前路由与目标路由的匹配关系自动计算router-link-active/router-link-exact-active激活类名link.js。在 Native 环境没有真实a标签语义事件监听直接绑定到点击事件上guardEvent会过滤修饰键点击、右键、target_blank等不应触发路由跳转的场景link.js。编程式导航则与 vue-router 一致this.$router.push(location)、this.$router.replace(location)、this.$router.go(n)/back()/forward()均由VueRouter转发到HippyHistory对应方法index.js。4. 页面出口RouterViewrouter-view组件view.js按路由深度渲染匹配组件支持具名视图nameprop、props透传对象/函数/布尔三种形式见 view.js以及嵌套路由深度计算data.routerViewDepth。它同样是 functional 组件渲染开销小适合移动端场景。5. 退出确认beforeAppExit 实战menu.vue 对beforeAppExit的用法给出了非常完整的注释与范例综合整理如下beforeAppExit(/* exit */) { // 取消 exit() 的注释即可阻止退出在前面可以加上退出条件 // exit(); },使用约束来自源码注释必须同时满足仅供 Android 使用仅供绑定在/的根页面使用即路由栈栈底页面对应 hippy.js 中读取this.stack[0]的逻辑仅供disableAutoBack为假默认时使用因为只有此时 Back 键才会被路由接管并走到该生命周期。行为语义当 Android 上通过 Back 键返回到根页面时路由会调用beforeAppExit(exit)并传入exit方法业务方在完成确认步骤或退出前处理后调用exit()即可真正退出 App。若disableAutoBack true阻止了 Back 键监听仍可通过this.router.history.exitApp()手动触发退出但该方法仅限 Android 上通过 Back 键到达最顶页面时生效其它页面不做响应。六、从 CHANGELOG 看演进脉络与版本选型建议综合全文可以提炼出 hippy-vue-router 的演进主线与选型参考能力定型早长期稳定所有 Native 差异化能力Back 键、disableAutoBack、beforeAppExit、事件开关时序都在 2018-11 至 2019-04 的 3.0.0-beta 系列中完成定型此后 2.x 与 3.x 正式版几乎全部是版本号提升与依赖维护说明该库 API 层面高度稳定版本线存在一次重置2019-04 之前内部沿用 3.0.0-beta 编号2019-12 起重置为公开的 2.0.02023-06 又随 Hippy 3.0 发布节奏升入 3.x3.0.0 → 3.0.1 → 3.0.2-beta。因此3.0.0-beta.5 早于 2.0.0是历史编号所致并非排序错误依赖安全是 3.x 的实质变更3.0.0 唯一记录在案的代码变更即升级 lerna 修复 npm 依赖漏洞提示使用者升级 3.x 时应同步关注构建链安全选型建议新工程直接采用 3.x 系列如 3.0.1 或 3.0.2-beta以获得修复依赖漏洞后的构建链若工程因历史原因锁定 2.x路由 API 与 Native 能力与 3.x 基本一致可平滑评估升级。七、延伸阅读路由官方文档docs/api/hippy-vue/router.md含不支持transition切换动画的边界说明路由实现源码driver/js/packages/hippy-vue-router/src/index.js、driver/js/packages/hippy-vue-router/src/history/hippy.js、driver/js/packages/hippy-vue-router/src/install.js组件实现driver/js/packages/hippy-vue-router/src/components/link.js、driver/js/packages/hippy-vue-router/src/components/view.js完整可运行示例driver/js/examples/hippy-vue-demo/src/main-native.js、driver/js/examples/hippy-vue-demo/src/routes.js、driver/js/examples/hippy-vue-demo/src/pages/menu.vue包声明与变更记录driver/js/packages/hippy-vue-router/package.json、driver/js/packages/hippy-vue-router/CHANGELOG.md赞分享跨平台移动开发前端【免费下载链接】HippyHippy is designed to easily build cross-platform dynamic apps. 项目地址https://gitcode.com/gh_mirrors/hi/Hippy点击查看免费下载相关推荐Hippy-Vue 路由实战hippy/vue-router 接口、原生返回键与 HippyHistory 实现解析Hippy Vue 路由实战hippy/vue router 接口、原生返回键与 HippyHistory 实现解析 Hippy Vue 使用对 vue r跨平台移动开发前端Hippy Vue 演进史从 CHANGELOG 读懂 hippy/vue 的能力迭代与工程实践Hippy Vue 演进史从 CHANGELOG 读懂 hippy/vue 的能力迭代与工程实践 本指南以 driver/js/packages/hippy跨平台移动开发前端Hippy Vue 原生扩展组件演进史从 hippy/vue-native-components 的 CHANGELOG 看核心组件能力变迁Hippy Vue 原生扩展组件演进史从 hippy/vue native components 的 CHANGELOG 看核心组件能力变迁 本文以 hi跨平台移动开发前端上一篇【免费下载】 高效的C代码到UML图表生成器 - clang-uml下一篇Kaneo 自托管部署与实践指南从 Docker Compose、Coolify 到 Kubernetes 的完整安装、配置与开发流程创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考