攻克weex - eros之搭建環境（part1）

PS：最近公司在寫ios app，使用了這個框架搭建，好多好多的坑的說，弄得身心疲憊，到處找資源，找度娘，真的挺心累的，因為公司項目是個測試項目。有頁面編寫和數據加載這方面的內容，就我現在的了解程度，來做個簡單的總結，方便自己以後查閱。

第一步就是跟著這個教程安裝環境和目錄，環境真心不好配，我們公司也建了很久。

weex學院網址：https://www.weexdaxue.com/article/24

eros官網：https://bmfe.github.io/eros-docs/#/

weex官網：https://weex.apache.org/zh/

weex-ui官網：https://alibaba.github.io/weex-ui/#/（這個是可以套用在eros裡面的一個ui框架）

下面教程是截取weex學院的內容

WEEX-EROS 解决方案

• weex
• vue
• ios
• Android

本文会通过 eros 由来，优缺点评估，开发现状，环境搭建，调试等方面来介绍 eros，并会在文章后半部分与开发者一起写一个 Hello World，来更好的评估 eros。

与其一堆原理倒不如先直接介绍 eros 到底能干什么

eros 是基于 weex 的他可以让前端同学通过 vue 的语法和 api 来写出 iOS/Android 的原生应用。

学习 weex 或者 eros 之前请您一定要熟练使用 vue2 进行开发。

• vue 官方文档
• eros 文档(求 star )

本文会通过 eros 由来优缺点评估开发现状环境搭建调试等方面来介绍 eros并会在文章后半部分与开发者一起写一个 Hello World来更好的评估 eros。

体验

• iOS 下载链接
• Android 下载链接

开发者可以扫描二维码来下载 eros app 来进行体验iOS首次打开App需要在 设置->通用->设备管理 信任开发证书。

eros 现状

目前 eros 已有数十个 app 在开发中和上线的状态其中有正在开发中的国外应用 starLife100+页面也有国内正在开发的蜂觅60+ 页面还有已上线的应用都在 0-50+ 页面不等行业分布于资讯医疗招商购物政府办公等。

而本木医疗京医通技术团队本身也基于 weex 开发了三个已上线的 app均可在苹果商店和应用宝下载

• 健康首都京医通 app版100+页面很多功能还未开放
• 本木医疗助手30+页面
• 本木医生助理20+页面

所以开发者大可放心这不是一个 KPI 项目公司没有 KPI 已基于 MIT 协议开源。

eros 是怎么来的

我们需要先从 weex 说起 我们直接看原理图

weex 原理图中分为了 Server 和 Client 两部分。

Server

weex file: 就是我们的 .vue 文件或官方的 .we 文件和我们平时进行前端开发的一样。

transformer: 以 vue 开发为例在浏览器中我们通常都会写 .vue 文件和 es6 等浏览器目前并不支持的语法通过前端资源打包工具 webpack 等通过 vue-loader、babel-loader等最终转化成为 es5 代码让浏览器识别而在 weex 最终编译出来资源文件能在浏览器跑自然也是这个道理。

而浏览器端运行的 es5 代码是无法直接运行在客户端的如浏览器有 BOMDOM客户端是没有的所以在通过 weex 来开发客户端有很多限制的。

在编译客户端静态资源文件的时候是通过 weex-loader 来加载这些经过限制语法编写的 weex file最终编译成为能让客户端读懂的 JS 文件也就是 JS Bundle。

有兴趣的同学可以深入了解这部分内容。深入Weex中的transformer实现原理

所以这块之所以叫 server也就是这些静态资源文件可以在远端服务器打包生成被客户端访问到并下载解析。

Client

引用 weex 官网上的话。

Weex 的 iOS 和 Android 客户端中都会运行一个 JavaScript 引擎来执行 JS bundle同时向各端的渲染层发送规范化的指令调度客户端的渲染和其它各种能力。我们在 iOS 下选择了 JavaScriptCore 内核而在 Android 下选择了 UC 提供的 v8 内核。无论是从性能还是稳定性方面都提供了强有力的保障。

为了让整个移动应用的资源利用得更好我们在客户端提供的 JavaScript 引擎是单例的即所有 JS bundle 公用一个 JavaScript 内核实例同时对每个 JS bundle 在运行时进行了上下文的隔离使得每个 JS bundle 都能够高效安全的工作。我们还把 Vue 2.0 这样的 JS Framework 做了预置开发者不必把 JS Framework 打包在每个 JS bundle 里从而大大减少了 JS bundle 的体积也就进一步保障了页面打开的速度。

client 对于前端来说肯定是越了解会更好不了解也没关系但 weex 有个功能是很重要的那就是 weex 搭建起了一条 JS Bridge通过客户端自定义 module 和 component让前端与客户端有了交互能力。

而自定义 module 和 component 需要一定的客户端开发知识让很多前端开发的同学望而却步又因为官方的环境搭建脚手架打包等目前还存在一些问题把很多想学习 weex 的同学拦在了外面所以 eros 因应而生。

weex 官方文档

eros 介绍

eros 是基于 weex 封装面向前端的 vue 写法的解决方案由于 app 开发的特殊性eros 则更偏重关心于整个 app 项目当熟练使用了 eros 之后您能快速通过 vue 暴露出来的方法快速构建原生 app 应用。

eros 流程图如下

eros 能解决什么

• 详细的文档来解决环境搭建过程中的坑。
• 一套代码编译成 iosandroid 两端原生应用。
• 封装了大量 module让前端开发方便进行原生的操作。
• 提供 appboard 机制来减少包体积并可以对其实时修改。
• 内置了一套完整的 widget 可根据业务自行修改。
• 中介者模式来集中管理业务。
• 提供了服务器端增量发布更新逻辑。
• 脚手架可直接生成开发最新模板。
• 脚手架启动服务进行实时开发效果查看和 debug 调试。
• 脚手架更新开发平台所需 eros 依赖。
• 脚手架支持打对应平台内置包。
• 脚手架支持生成全量包增量包并内置与更新服务器交互逻辑。
• 脚手架支持同步更新模板内容。
• 脚手架支持 weex 的 vue 入口和 js 入口两种开发方式。
• 支持 weex debug

eros 不能做什么

eros 开发中也有很多限制需要开发者自行斟酌。

• weex 代码在浏览器端还有很多兼容性问题所有 eros 目前不支持浏览器端
• eros 不能使用 weex 市场如果您有原生开发经验可以自行接入
• 由于 eros 对 JS Bundle 运行机制采用了 appboard 机制来减少了 js bundle 的大小导致 weex debug 需要特定的处理。
• 由于目前开源的 weex ui 库都并不支持 tree-shaking官方引入的 webpack 也是 1.x.x 版本eros 脚手架即便升级了 webpack但并未配置 tree-shaking所以目前引入代码的方式需要限制很多写法来减少 JS Bundle 的体积eros 后续会出对应的 UI组件库 来解决这些问题。
• eros 打出来的包体积稍大为解决这个问题eros 客户端动态加载依赖正在开发中。
• 如果遇到复杂的页面如 IM 之类的eros 建议用原生实现weex 应付此类需求还是比较吃力。

支持性

• Android 4.1 (API 16)
• iOS 8.0+
• WebKit 534.30+

开始 eros脚手架安装:

$ npm i eros-cli -g
           

如果你在中国地区我们还是推荐您使用 cnpm 安装脚手架

$ cnpm i eros-cli -g 
           

如果安装过程中报错是因为 eros-cli 依赖了 node-sass解决的方式有很多可以自行搜索解决一下。

darwin 开发 iOS:

• Xcode
• CocoaPods
  • 升级 Ruby 环境$ sudo gem update --system
  • 移除现有 Ruby 镜像$ gem sources --remove https://rubygems.org/
  • 添加ruby-china镜像$ gem source -a https://gems.ruby-china.org/
  • 安装 CocoaPods$ sudo gem install cocoapods
  • 如果以上命令报错则执行$ sudo gem install -n /usr/local/bin cocoapods --pre
  • 最后执行$ pod setup 过程比较漫长请耐心等待执行完成

darwin/windows/linux 开发 Android:

• 下载并安装 JDK。
• 下载并安装 Android Studio。

JDK 是 JAVA 开发包AndroidStudio 是 Android开发IDE这两项不再做过多介绍。

如果您使用虚拟机进行跨平台开发也需要配置好对应平台的所需环境。

模拟器安装

• ios 开发中 xcode 已经自带了模拟器。
• android 开发者可以下载 Genymotion。

模板生成

1. 首先通过脚手架自动生成开发模板(我们不推荐使用sudo来执行)。

$ eros init
           

按提示选择模板填写 app/项目名称和版本后在当前路径下会生成对应模板然后 cd 到项目中。

2. 下载所需依赖 下载前端依赖。

$ npm install 
           

下载eros sdk 依赖。

$ eros install 由于部分库和网络原因会导致很慢
           

eros install 由于部分库和网络原因会导致很慢会让你选择下载依赖

• ios: eros ios 开发所需依赖
• android: eros android 开发所需依赖

每次 eros 解决了 bug 或者开发/更改了 module 和 component 时只需要 eros install ios 更新前请关闭 xcode android 会在编辑器 android studio 中弹出同步点击即可。

eros install 是执行 iOS/Android 目录中的 install.sh所以 windows 系统下最好用 Git Bash 等工具不然无法下载。

1. 安装完依赖之后:

• iOS: 会自动打开 Xcode 然后选择一个模拟器点击左上角的播放(运行)按钮即可看到内置包中已经内置好的 eros demo.
• Android:首次生成项目开发者需要多几个步骤之后每次 eros install 都会有同步提示:

1. 点击AndroidStudio上方的 File--->New--->Import Project。

   

2. 找到eros在你本地的地址选择 platforms/android/WeexFrameworkWrapper ,点击OK。

   

3. 待项目构建完成点击 AndroidStudio 上方工具栏的 Run 即可运行项目。

   

注意

第一次打开 AndroidStuido 时由于本地环境未配置好AndroidStuido 会提示错误按照 IDE 提示大部分环境问题都可以解决。

于是 eros 的 demo 便能在模拟器中跑起来了。

eros 的 demo 很重要建议在开发中首先跟随 demo 编写几个页面并保留其代码作为使用参考。

开发前

我们先来介绍 eros 开发中需要知道的点

Server JS Bundle

本地开发的时候运行脚手架 eros dev 指令脚手架 eros-cli 会通过读取配置文件来在特定端口跑一个服务让你在本地访问到项目中 dist 下通过 webpack 打包生成的 JS Bundle。

假如你配置的端口号是8899在浏览器中输入localhost:8899/dist 便可以看到打包生成的 JS Bundle。

而在不同调试载体通过 localhost 访问这些 JS Bundle 之前都需要确保在同一局域网内而在访问的时候情况是不同的

iOS 模拟器	共享电脑 hosts 文件	不需要
Android 模拟器	有	需要
iOS 真机	有	需要
Android 真机	有	需要

iOS 模拟器比较特殊是因为 iOS 模拟器和 Mac 共用一套网络设置。

由此也能看出来如果开发者需要进行两个端的快速开发直接用 iOS 模拟器开发即可开发完成之后在适配真机和 Android 端是最快的。

所以直接修改网络代理指向本机的 IP 地址即可访问到 JS Bundle而我们一般为了代理软件抓包时候看这更方便会给个新的 host

127.0.0.1   app.weex-eros.com
           

设置完了之后在不同载体的浏览器中都能访问 http://app.weex-eros.com/dist 下的 JS Bundle 了。

Client JS Bundle

上面介绍了通过服务来访问 JS Bundle那我们拔了真机拔了数据线断了网没了有 JS Bundle 来源用户打开是一片空白怎么办答案就是 app 内置中 JS Bundle我们也叫这部分 JS Bundle 为内置包这个过程叫打内置包。

Interceptor 拦截器

那么又有问题来了我们如何告诉 app 是访问服务包还是内置包呢答案是 Interceptor 开关。

• Interceptor 选中的时候我们会拦截请求让 app 读取内置包;
• Interceptor 未选中的时候不拦截请求让 app 去配置的服务上去取服务包;

第一次跑起来 demo 的开发者可以看到拦截器是开启的访问的是内置包app 上线交付测试的时候都是走内置包。

项目结构

下面列出了对于开发而言关心的项目结构

.
├── config
│   ├── eros.dev.js                     // 脚手架配置文件
│   └── eros.native.js                  // 客户端配置文件
├── platforms                           
│   ├── android                         // Android 平台主项目和依赖
│   └── ios                             // iOS 平台主项目和依赖
└── src
    ├── assets                          // 本地静态资源存放一般可存放图片
    ├── iconfont                        // 本地 iconfont 存放
    ├── js
    │   ├── components                  // 组件存放了经过修改的 weex-ui 和 bui
    │   ├── config                      // 项目开发配置
    │   │   ├── apis.js                 // 接口别名配置
    │   │   ├── index.js
    │   │   ├── pages.js                // 路由别名配置
    │   │   └── push.js                 // 个推事件处理
    │   ├── css                         // 可抽离公共 css 逻辑
    │   ├── mediator                    // 中介者
    │   ├── pages                       // 页面开发所有页面都放置在这里
    │   └── widget                      // widget 源码
    └── mock
        └── test                        // mock 服务在 eros.dev.js 可进行配置
           

有几个需要注意的地方

• eros.dev.js 中如果改变这是如果你在跑着 eros dev 服务需要断开让脚手架重新读取配置文件。开发中会经常添加新的打包入口
• eros.native.js 是客户端读取的配置文件目前是客户端在开启 app 的时候统一从内置包中读取所以当此文件变动的时候需要重新打内置包 eros pack重新运行下 app即可生效。

Hello Eros

我们来简单开发一个 Hello World

1. 首先关闭调试中的拦截器让 app 访问服务包这时候刷新页面肯定是空白的因为都没有服务。
2. 项目根目录下运行开发服务 eros dev运行成功之后刷新出现内置的 demo 页面这是其实你已经可以任意修改 pages/eros-demo 中代码刷新后看效果了有兴趣可以到处试一试。

tips: 双击调试按钮即可刷新。

1. 在 pages 目录下新建一个 Hello.vue 文件。

   

   文件中写一些很简单的语法

<template>
    <div style="margin-top: 50px;">
        <text class="title">Hello</text>
        <text class="title">developer</text>
        <bui-button class="btn-250" type="primary" value="show eros">show eros</bui-button>
    </div>
</template>
<script>
    import buiButton from 'Eros/bui/components/bui-button'
    export default {
        components: { buiButton }
    }
</script>
<style>
.title{
    font-size: 60;
}
.btn-250{
    width: 250;
}
</style>
           

1. 修改 eros.dev.js 中的 exports如果不需要可以把 eros-demo 中的路径都删掉只填入新的文件入口 :

"exports": [
    // appBoard 
    "js/config/index.js",
    // mediator
    "js/mediator/index.vue",
    // home
    "js/pages/Hello.vue"
],
           

这里注意上面两个是和 eros.native.js 中的 appBoardmediator 一一对应的如果这里两边修改没有对应上会导致报错建议平时不用变动。 5. 告诉 app 我要重新改变首页修改 eros.native.js 中的 page.homePage 路径

"page": {
    "homePage": "/pages/Hello.js",
}
           

1. 断开 eros dev 服务因为要告诉脚手架配置文件的变动。
2. eros pack 打内置包因为要告诉 app 配置文件中的变动。
3. 重新运行runapp。

这时首页就已经开发好了

下面我们修改做一个页面间的跳转试一试 Widget: 9. 再在 pages目录下新建一个页面 Eros.vue

<template>
    <div style="margin-top: 50px;">
        <text class="title">Hi!</text>
        <text class="title">Enjoy it!</text>
    </div>
</template>
<script>
    export default {
    }
</script>
<style>
.title{
    font-size: 60;
}
</style>
           

1. 修改 eros.dev.js 告诉脚手架添加页面了:

"exports": [
    // appBoard 
    "js/config/index.js",
    // mediator
    "js/mediator/index.vue",
    // home
    "js/pages/Hello.vue",
    // eros
    "js/pages/Eros.vue"
],
           

1. 注册路由修改 js/config/pages.js清空 demo 中现有的配置:

export default {
    'Eros': {
        title: 'Eros',
        url: '/pages/Eros.js',
    },
}
           

这里的 url 是填写 dist 目录中打包出来 JS Bundle 的相对路径现在并没有这个 JS Bundle需要重启开发服务读取配置才会有注意因为是 JS Bundle 所以以 .js 为结尾。 12. 重启 eros dev刷新一下并无任何变化这时候还无法跳转到新建的页面因为只是配置了路由并未触发跳转方法我们需要修改下 Hello.vue:

<template>
    <div style="margin-top: 50px;">
        <text class="title">Hello</text>
        <text class="title">developer</text>
        <bui-button class="btn-250" type="primary" value="show eros" @click="showEros">show eros</bui-button>
    </div>
</template>
<script>
    import buiButton from 'Eros/bui/components/bui-button'
    export default {
        components: { buiButton },
        methods: {
            // 这里给按钮添加 showEros 事件来跳转
            showEros() {
                this.$router.open({
                    name: 'Eros'
                })
            }
        }
    }
</script>
<style>
.title{
    font-size: 60;
}
.btn-250{
    width: 250;
}
</style>
           

1. 双击调试按钮刷新跳转逻辑已经完成了

   

至此 Hello world 已经编写完成可以便根据文档来编写你的业务了。

• eros 模板地址
• eros 文档地址

eros 还有 demo 是根据网易严选 demo 进行改编的感谢 zwwill 的开源和指导开发者也可以进行参考

• eros 网易严选 demo
• weex-book

最后开发者需要自行修改原生项目中的一些信息就可以发 app 正式版本对外使用了发布的方法网上有很多介绍就不过多赘述。

增量发布

具体更新逻辑可以点击这里这里写下简单的说明。

app 发布有两种情况

• 当 platforms ios/android 目录下的代码发生变动包括 eros install 平台的依赖的时候我们是需要重新发布到市场上重新走审核逻辑的用户需要重新去市场上面下载。
• 而当项目中的业务逻辑发生变动如新增页面修改当前页面逻辑等最终导致 JS Bundle 发生变化便可以使用增量发布每次 app 启动会自动检测更新下载 JS Bundle 中发生变动的部分用户重启即生效。

同时 eros-cli 也支持生成全量包和生成增量包

生成全量包

$ eros build
           

生成增量包

$ eros build -d
           

目前增量发布的搭建还是比较麻烦当开发者开发完 app 之后可以参考 eros-publish 来搭建增量发布的服务有经验的同学也可以在发布机上部署 eros-cli来自行编写发布系统。

就如已有 eros 开发者基于 eros-publish 编写了的自己增量发布系统 lygtq-eros-publish并开源非常感谢 hodgevk 的贡献。

总结

app 开发环境的配置总是漫长的期间可能会遇到各种各样的报错其实大部分同学尽量尝试百度一下就能解决。

就如官方文档中所说在熟悉了 eros 之后可以快速开发中小型 app 应用但 eros 还有很多的不足需要更多的人加入进来完善他最终是想给 vue 开发者们另一个舞台。