android入门——eros项目的第一个demo

之前折腾了很久的android的环境，自己也把eros官网的demo安装到手机上跑出来了，可是我想要有自己的页面，一直弄不出来，后台经过android的专人指点，环境搭建好之后，重新写demo,然后跳转，终于成功了，以此博客记录一下

参考：https://juejin.im/post/5a30f3e95188252da0536d2c

 

我这里是在现有项目基础上，搭建的demo

vs code打开整个项目的文件夹，android打开项目底下的platforms->android->Weex....文件夹，如下图所示

一、对于初学者来说这个目录结构特别重要，我现在接触的正式的app开发使用的就是这个结构

二、在src->js->pages下面新建文件夹 sundemo,然后创建两个页面，分别是我自定义的首页和跳转页面

 

homePage.vue

三、修改 eros.dev.js 中的 exports，添加如下

注意：该文件上面两个是和 eros.native.js 中的 appBoard，mediator 一一对应的，如果这里两边修改没有对应上会导致报错，建议平时不用变动

四、修改app的首页为我自定义的首页，即修改 eros.native.js 中的 page.homePage 路径

五、Ctrl + c断开 eros dev服务，因为要告诉脚手架配置文件的变动。

六、eros pack android 打内置包，因为要告诉 app 配置文件中的变动。

这里想说明一下，一位android同事说的，该命令是为了更新下面三个文件

七、eros dev重启

八、因为我用的是真机测试，在android studio中进行如下操作，点击三角号，选中我的设备，然后点击ok

九、手机安装好之后的首页如下

到这里首页demo完成了

然后实现点击“立即登录”按钮跳转到另一个页面

十、在sundemo文件夹添加SunTest.vue文件

SunTest.vue

十一、修改 eros.dev.js 告诉脚手架添加页面了

十二、注册路由，修改 js/config/pages.js

这里的 url 是填写 dist 目录中打包出来 JS Bundle 的相对路径（现在并没有这个 JS Bundle，需要重启开发服务读取配置才会有），注意因为是 JS Bundle 所以以 .js 为结尾。

十三、添加跳转事件

十四、eros dev重启，点击立刻登录，跳转成功

不是一般的开心啊，进步一点点也值得开心

---

这里需要注意的是，有时页面不展示或者报错，可以试试这个方法：

app打开之后左边会有个Debugger，点击之后出现三个选项，点击第一个选项“调试页面”，将拦截器开关下面Interceptor前面的对勾去掉，然后勾选hotRefresh，然后返回再点击Debugger,点击刷新，

---

20191023更新，上面有不带参的页面跳转，再更新一个带参的页面跳转

一、修改homePage.vue文件，进行传参

二、SunTest.vue页面也就是即将要跳转到的页面，接参数

效果如下：

说明一下，一开始想用纯vue的页面带参跳转，试了发现不行，然后在当前app项目中找了带参页面跳转的例子，测试好了，有成就感

当时纠结了mounted和created的区别，参考了https://blog.csdn.net/xdnloveme/article/details/78035065