Eros（weex-eros）完全指南：一份 Vue 代码搞定 iOS/Android 双端原生应用

Eros（weex-eros）完全指南：一份 Vue 代码搞定 iOS/Android 双端原生应用

【免费下载链接】eros📱 一套 Vue 代码，两端原生应用 ，或许可以叫我 weex-native。项目地址: https://gitcode.com/gh_mirrors/er/eros

Eros（weex-eros）是一套基于 Weex 与 Vue 的开源移动端解决方案：只需编写一份 Vue 写法的代码，就能编译出 iOS 和 Android 两端原生 APP，并内置热更新机制，让前端开发者快速构建可上架的跨端应用。

项目定位：Eros 不是框架，而是基于 Weex。

🎯 Eros 是什么？为什么值得学？

一句话概括：用一份 Vue 代码，产出两端原生 APP，还能热更新。

依托 Weex 的跨端渲染能力，Eros 把 Vue 的组件化写法带到原生移动端，同时内置了热更新逻辑与服务器方案，开发者可以跳过应用商店审核流程快速迭代。官方收集的开发效率参考如下：

⚠️ 面向人群提示：Eros/Weex 并不太适合完全没有客户端能力的个人，能否独立解决问题是关键，选型前请谨慎评估自身技术栈。

✨ 选择 Eros 能得到什么？

1. 开箱即用的原生能力

Eros 向前端暴露了大量便捷的原生 API，覆盖常见业务场景：

• 🧭 路由与页面全局事件
• 💾 本地化存储、发布订阅
• 📡 Restful 请求（支持 Cookie）
• 📷 拍照上传、浏览/操作本地图片
• 📞 拨打电话、发短信、选择联系人
• 📍 定位、原生弹窗、扫一扫
• 📊 EChart 图表、日历、BindingX 手势动画、手势解锁

2. 灵活的插件化生态

已开源 20 余个社区插件，按需引入、不引用不打包，纯净版包体仅10 MB 出头：

微信支付、支付宝、微信分享、友盟分享、个推、高德地图、二维码、短信验证码、刮刮卡抽奖……

3. 强大的热更新机制

这是 Eros 的核心竞争力之一：在远端发布代码，客户端更新并立即生效，无需经过应用商店审核。配合 eros-publish 后台逻辑 可获得完整的差分包发布能力。

4. 顺畅的开发体验

• 🚀 iOS/Android 模拟器与真机热刷新（保存即刷新，区别于热更新）
• 🔍 支持weex debug调试
• 📦 通过 appBoard JS bundle 大幅减少公共代码冗余
• 🤝 为大型项目内置中介者服务，方便管理业务间的事件交互，可参考 src/js/mediator/index.vue

📁 项目结构一览

Eros 仓库结构清晰，前端代码与两端原生工程分离：

🚀 快速开始：一键安装双端依赖

第 1 步：克隆仓库并安装前端依赖

git clone https://link.gitcode.com/i/4db013230f0977b6378d70bb775a8ddf cd eros npm install

第 2 步：安装 Android 端依赖

在仓库根目录执行 scripts/install.android.sh，脚本会自动拉取 Weex 框架（wxframework）、WeexSDK、nexus、高德地图插件等仓库到 platforms/android/WeexFrameworkWrapper/，随后用 Android Studio 打开该目录构建运行即可。

第 3 步：安装 iOS 端依赖

执行 scripts/install.ios.sh，脚本会克隆 WeexiOSSDK 与 Benmu-iOS-Library 到 platforms/ios/WeexEros/，运行pod update后自动打开 Xcode 工作区（注意先关闭 Xcode）。

第 4 步：后续更新 SDK

• Android：运行 scripts/update.android.sh
• iOS：运行 scripts/update.ios.sh

两个脚本均会对已拉取的子仓库执行git pull，保持 SDK 与最新模板同步。

⚙️ 两个关键配置文件详解

理解这两个文件，就掌握了 Eros 的核心逻辑：

① config/eros.dev.js—— 开发配置

• exports：声明需要打包成 JS bundle 的页面入口（从 src 开始）
• server.port: 8889：热刷新服务端口
• socketServer.port: 8890：真机调试 WebSocket 端口
• mockServer：本地 Mock 服务，方便接口联调

② config/eros.native.js—— 原生应用配置

• appName/version：应用名称与两端版本号
• page：首页入口、导航栏颜色
• tabBar.list：底部 Tab 的页面路径、文案与图标（图标使用bmlocal://协议引用本地资源）
• url.bundleUpdate：热更新检查地址

此外，页面路由表统一维护在 src/js/config/routes.js，全局 Widget 实例（路由 + ajax 拦截器）在 src/js/config/index.js 中初始化，业务请求统一走baseUrl与接口别名，非常利于团队协作。

💡 使用须知与适用场景

三条重要提醒（摘自官方文档）：

1. Weex 虽支持三端，但Eros 只支持 iOS/Android 两端，不能像开发 Web 那样开发 APP
2. 开发者必须熟练 Vue、熟悉 Weex 文档，遇到问题善用搜索引擎与社区
3. 需要操作 Android Studio / Xcode 进行打包和调试，崩溃日志是排障的关键

系统支持范围：Android 4.1（API 16）+、iOS 8.0+

推荐适用场景：

• ✅ 实时交互性、与键盘交互等功能复杂度不高的项目
• ✅ 在现有 APP 中接入 Eros，让某条业务线达到快速迭代的目的（这正是 Weex 的初衷）

🏁 写在最后

Eros（weex-eros）证明了：前端技术栈完全有能力独立交付原生级移动应用。一份 Vue 代码、双端原生产出、免审热更新，再加上活跃的插件生态，它依然是跨端开发领域值得深入了解的方案。建议从 src/js/pages/demo/ 目录下的示例页面（生命周期、路由、存储、图表等）读起，边跑 Demo 边理解每个原生能力的用法，这是上手最快的路径。

【免费下载链接】eros📱 一套 Vue 代码，两端原生应用 ，或许可以叫我 weex-native。项目地址: https://gitcode.com/gh_mirrors/er/eros