Niko
使用eros搭建的weex项目

使用eros搭建的weex项目


weex eros 移动端

项目地址 https://github.com/bmfe/eros

项目文档 https://bmfe.github.io/eros-docs

1.环境

环境安装及项目运行过程中如 pod setup 或 pod update 由于某些原因会很慢，建议 git 使用 ss 代理
设置代理
git config --global http.proxy 'socks5://127.0.0.1:1080'
git config --global https.proxy 'socks5://127.0.0.1:1080'
取消代理
git config --global --unset http.proxy
git config --global --unset https.proxy

基础环境看官方文档就好 基础环境 以下只摘要必须项：

基础环境(必须)

    Node.js (>=9.x)
    npm version 4+

Git bash (并确定已经设置为.sh 脚本的默认执行程序)

$ npm i eros-cli -g
因为脚手架依赖了 node-sass，安装失败有很多解决办法，可自行查找。
Mac 开发 iOS(必须)
版本要求
ruby: 2.5.0 以上
rubygems: <= 2.7.6
cocoapods: 1.4.0 (最好)
其他版本会有环境问题
安装
Xcode (appStore 下载)
CocoaPods(建议使用pod 1.4.0版本)
升级 rubygem 环境：$ sudo gem update --system
移除现有 rubygem 镜像：$ gem sources --remove https://rubygems.org/
添加gem.ruby-china镜像：$ gem source -a https://gems.ruby-china.com/
安装 CocoaPods：$ sudo gem install cocoapods -v 1.4.0
如果以上命令报错则执行：$ sudo gem install -n /usr/local/bin cocoapods -v 1.4.0
最后执行：$ pod setup 过程比较漫长，请耐心等待执行完成
开发 Android(必须)
安装
AndroidStudio 3.0.x best (高版本不太稳定，会有很多问题)
下载并安装 JDK。
下载并安装 Android Studio
模拟器安装(必须)
ios 开发中 xcode 已经自带了模拟器
android 开发者可以使用 android studio 自带模拟器（目前我开发中使用的就是 android studio 自带模拟器），为了更好的效果，推荐下载 Genymotion 模拟器
当然市面上的如 夜神模拟器 也是可以的，调试教程，但是在 weex 0.17/0.18 中会出现 weex 实例化失败的问题，所以还是推荐 Genymotion。

2.运行项目

项目的具体生成步骤可以去看官方文档 项目生成
这里写一下针对我们已有的项目，拉到本地后如何运行
IOS 下
cd 到 iOS 工程目录 platforms/ios/WeexEros(项目名) 执行pod update命令来拉取iOS工程的依赖
$ pod update 首次执行时间会稍长，命令执行完毕后找到当前目录下 WeexEros.xcworkspace 文件，双击即可唤起XCode打开 iOS 工程；
然后在XCode选择相应的模拟器（比如iPhone 8），点击▶按钮来运行项目。
Android 下
命令行进入 /platforms/android/WeexFrameworkWrapper/ 目录下 执行install.sh 文件。等待下载依赖库。
下载完成后手动导入： 下载完成后手动导入：
   1.点击 AndroidStudio 上方的File---New---Import Project
   2.找到 eros 在你本地的地址，选择 platforms/android/WeexFrameworkWrapper,点击OK。
3.待项目构建完成，点击 AndroidStudio 上方工具栏的 Run，即可运行项目
第一次打开 AndroidStuido 时，由于本地环境未配置好，AndroidStuido 会提示错误，按照 IDE 提示，点击 sync 同步一下，大部分环境问题都可以解决。

3.调试开发

在项目根目录中起开发服务：
$ eros dev
脚手架会在项目根目录下生成 dist 文件，存放 JS Bundle。
运行 App，点击屏幕上的 debug 按钮-> Setting -> Interceptor 关闭拦截器，然后点击 Refresh 或者双击屏幕上 debug 按钮刷新页面，就会重新从服务器加载最新的 js 文件。
拦截器的主要作用就是控制加载 js 文件的方式:
打开状态：会从当前工程内置的资源中加载 js 资源文件；
关闭状态：就会从开发服务上加载 js 资源文件；

注：使用真机调试需要将手机与起服务的 pc 连接到同一个局域网内！

热刷新
点击屏幕上的 debug 按钮-> Setting -> 打开 HotRefresh 开关，提示 “hot refresh connected.”，说明热刷新以开启
修改完代码保存（command + s）的时候，页面会自动刷新

注：热刷新只有在 eros dev 起服务，并且关闭拦截器的情况下才会生效

4.配置相关

这部分看文档就可以了 配置相关

在 config 目录下就两个文件 这两个文件每次改动，都需要运行 eros dev 重启服务

1.eros.native.js
2.eros.dev.js

每次添加页面 除了 routes.js 文件里添加，还需要在这个文件里添加页面路径

5.部分目录及配置文件

一.platforms 下有 android、ios 两个目录，分别是一些配置文件和一些引入的包，常改的有以下两个文件：

1.android/WeexFrameworkWrapper/app/build.gradle

其中 android.defaultConfig.versionName 控制安卓版本号

2.ios/WeexEros/WeexEros/info.plist

其中 CFBundleShortVersionString 1.2.0 控制 ios 版本号

© 2025 Niko Xie