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

川长思鸟来 2023-06-09 13:28 2阅读 0赞

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

参考：[https://juejin.im/post/5a30f3e95188252da0536d2c][https_juejin.im_post_5a30f3e95188252da0536d2c]

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bl9vZl9SYWlueQ_size_16_color_FFFFFF_t_70][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bl9vZl9SYWlueQ_size_16_color_FFFFFF_t_70 1][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bl9vZl9SYWlueQ_size_16_color_FFFFFF_t_70 2][]

### homePage.vue ###

<template>
      <div style="align-items: center">
        <image class="loginBackground" src="bmlocal://assets/images/MySelf/beijing.jpg">
        <div class="mainLogin" :style="mainLoginStyle">
          <div style="flex-direction: row ;margin-top: 50px;margin-bottom: 30px">
            <div style="margin-left: 50px">
              <text style="margin-bottom: 10px">请登录</text>
              <text style="margin-bottom: 20px">sun1平台</text>
            </div>
            <image
              class="logo"
              src="bmlocal://assets/images/MySelf/3.jpg"
              style="position: absolute;right: 50px"
            >
          </div>
          <div style="align-items: center">
            <div class="inputDiv">
              <image class="userInput" src="bmlocal://assets/images/MySelf/userInput.png">
              <input v-model="userName" type="text" class="input" :maxlength="20">
            </div>
            <div class="inputDiv">
              <image
                class="userInput"
                style="width: 25px"
                src="bmlocal://assets/images/MySelf/passwordInput.png"
              >
              <input v-model="password" type="password" class="input" :maxlength="16">
            </div>
            <div class="divBottom">
              <text class="lossPass register" @click="toRegister">注册</text>
              <text class="lossPass" @click="goLossPass">忘记密码？</text>
            </div>
          </div>
          <div style="align-items: center">
            <wxc-button
              style="width: 594px ;height: 88px ;margin-top: 30px;background-color: #1bb2af"
              text="立即登录"
              @wxcButtonClicked="showTestPage"
            ></wxc-button>
          </div>
        </div>
    
        <wxc-loading :show="isShowLoading" loading-text="正在努力跑..." :need-mask="true" type="default"></wxc-loading>
      </div>
    </template>
    
    <script>
    import { WxcButton, WxcLoading } from "weex-ui";
    import loginApi from "../../service/login-service.js";
    import { setCache, getCache } from "../../utils/index.js";
    
    export default {
      components: {
        WxcLoading,
        WxcButton
      },
      data() {
        return {
          appExitTime: 0,
          appMaxExitTime: 2000,
          isShowLoading: false,
          userName: "",
          password: ""
        };
      },
      computed: {
        mainLoginStyle() {
          let viewHeight = weex.config.env.deviceHeight;
          let viewWidth = weex.config.env.deviceWidth;
          console.log("viewHeight==", viewHeight, viewWidth);
          let height = (750 * viewHeight) / viewWidth;
          return {
            "margin-top": (height - 592) / 2 + "px"
          };
        }
      },
      created() {
        this.androidFinishApp();
      },
      mounted() {
          this.getTheVersionInfo();
        if (getCache("userName")) {
          this.userName = getCache("userName");
        }
        if (getCache("passWord")) {
          this.password = getCache("passWord");
        }
      },
      methods: {
        androidFinishApp() {
          const globalEvent = weex.requireModule("globalEvent");
          globalEvent.addEventListener("homeBack", options => {
            var timestamp = new Date().valueOf();
            console.log("timestamp = " + timestamp);
            console.log("appExitTime = " + this.appExitTime);
            if (timestamp - this.appExitTime > this.appMaxExitTime) {
              this.$notice.toast({ message: "双击退出应用" });
              this.appExitTime = timestamp;
            } else {
              this.appExitTime = 0;
              this.$router.finish();
            }
          });
        },
        showTestPage() {
          this.$router.open({
                 name: 'SunTest'
          })
        }
      }
    };
    </script>
    
    <style scoped>
    .btnLogin {
      margin-top: 200px;
      margin-left: 20px;
      width: 100px;
      height: 100px;
      background-color: aquamarine;
    }
    
    .loginBackground {
      width: 750px;
      position: absolute;
      top: 0px;
      bottom: 0px;
      right: 0px;
      left: 0px;
    }
    
    .mainLogin {
      margin-top: 300px;
      width: 664px;
      height: 592px;
      background-color: rgba(255, 255, 255, 1);
      border-radius: 6px;
    }
    
    .logo {
      width: 126px;
      height: 90px;
    }
    
    .input {
      background-color: rgba(248, 248, 248, 1);
      padding-left: 10px;
      border-width: 0px;
      height: 58px;
      font-size: 30px;
      border-radius: 10px;
      width: 500px;
      margin-right: 2px;
    }
    
    .inputDiv {
      flex-direction: row;
      align-items: center;
      background-color: rgba(248, 248, 248, 1);
      border-radius: 10px;
      width: 580px;
      height: 64px;
      border-width: 2px;
      border-color: rgba(222, 222, 222, 1);
      margin-bottom: 30px;
    }
    
    .userInput {
      width: 32px;
      height: 32px;
      background-color: rgba(248, 248, 248, 1);
      margin-left: 20px;
    }
    
    .divBottom {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      /* justify-content: flex-end; */
      height: 50px;
      width: 664px;
    }
    .lossPass {
      width: 200px;
      font-size: 20px;
      font-weight: 500;
      color: rgba(151, 151, 151, 1);
      line-height: 28px;
      text-align: right;
      align-self: flex-end;
      padding-right: 40px;
      height: 50px;
      line-height: 50px;
    }
    .register {
      text-align: left;
      padding-left: 40px;
    }
    </style>

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bl9vZl9SYWlueQ_size_16_color_FFFFFF_t_70 3][]

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bl9vZl9SYWlueQ_size_16_color_FFFFFF_t_70 4][]

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

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bl9vZl9SYWlueQ_size_16_color_FFFFFF_t_70 5][]

### 七、eros dev重启 ###

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bl9vZl9SYWlueQ_size_16_color_FFFFFF_t_70 6][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bl9vZl9SYWlueQ_size_16_color_FFFFFF_t_70 7][]

到这里首页demo完成了

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

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

### SunTest.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>

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bl9vZl9SYWlueQ_size_16_color_FFFFFF_t_70 8][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bl9vZl9SYWlueQ_size_16_color_FFFFFF_t_70 9][]

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

### 十三、添加跳转事件 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bl9vZl9SYWlueQ_size_16_color_FFFFFF_t_70 10][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bl9vZl9SYWlueQ_size_16_color_FFFFFF_t_70 11][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bl9vZl9SYWlueQ_size_16_color_FFFFFF_t_70 12][]

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

--------------------

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

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

--------------------

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bl9vZl9SYWlueQ_size_16_color_FFFFFF_t_70 13][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bl9vZl9SYWlueQ_size_16_color_FFFFFF_t_70 14][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bl9vZl9SYWlueQ_size_16_color_FFFFFF_t_70 15][]

![20191023103230863.png][]

效果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bl9vZl9SYWlueQ_size_16_color_FFFFFF_t_70 16][]

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

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

[https_juejin.im_post_5a30f3e95188252da0536d2c]: https://juejin.im/post/5a30f3e95188252da0536d2c
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bl9vZl9SYWlueQ_size_16_color_FFFFFF_t_70]: /images/20230531/9017a99751a142f28d985071ad1a1350.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bl9vZl9SYWlueQ_size_16_color_FFFFFF_t_70 1]: /images/20230531/e5527480960f41b38122d5a38871abb9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bl9vZl9SYWlueQ_size_16_color_FFFFFF_t_70 2]: /images/20230531/5547988c524048b888c2096ecf642ea7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bl9vZl9SYWlueQ_size_16_color_FFFFFF_t_70 3]: /images/20230531/1d0b028ee1d04d95b3aac7ed94e4b879.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bl9vZl9SYWlueQ_size_16_color_FFFFFF_t_70 4]: /images/20230531/698d3cc3d73741a3bcd9d8b94a7de7b3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bl9vZl9SYWlueQ_size_16_color_FFFFFF_t_70 5]: /images/20230531/c3d9ddbe18ae4285be64ffa75834cbd0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bl9vZl9SYWlueQ_size_16_color_FFFFFF_t_70 6]: /images/20230531/734fb813295f447795e293c6912113c6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bl9vZl9SYWlueQ_size_16_color_FFFFFF_t_70 7]: /images/20230531/e908bc4eac9f49a0bf5b84a1ee798ab2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bl9vZl9SYWlueQ_size_16_color_FFFFFF_t_70 8]: /images/20230531/bfa9fc4fa6384a78a0c7a79e17211662.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bl9vZl9SYWlueQ_size_16_color_FFFFFF_t_70 9]: /images/20230531/6793b4e945eb4d49963840c824697d8a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bl9vZl9SYWlueQ_size_16_color_FFFFFF_t_70 10]: /images/20230531/4e0bd3bdaf4040d1a58ad1a674fb0ba3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bl9vZl9SYWlueQ_size_16_color_FFFFFF_t_70 11]: /images/20230531/ea78eb64fad144ccbb806bfcead8b2b7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bl9vZl9SYWlueQ_size_16_color_FFFFFF_t_70 12]: /images/20230531/50a242a9c9e7497eb73e1461d60602b8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bl9vZl9SYWlueQ_size_16_color_FFFFFF_t_70 13]: /images/20230531/9afef1a6de564c0386f0d33600a3c92c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bl9vZl9SYWlueQ_size_16_color_FFFFFF_t_70 14]: /images/20230531/d3d8c38927594c5e92253702dc067fb9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bl9vZl9SYWlueQ_size_16_color_FFFFFF_t_70 15]: /images/20230531/8d884e0a0c9743c48be0fb8014853739.png
[20191023103230863.png]: /images/20230531/4c5f6a8f355f43d3af708c7f101d9c35.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bl9vZl9SYWlueQ_size_16_color_FFFFFF_t_70 16]: /images/20230531/cc51e3760fbf4c78a76c9fce31cf5d68.png
[https_blog.csdn.net_xdnloveme_article_details_78035065]: https://blog.csdn.net/xdnloveme/article/details/78035065