EEUI 入门初探之撸起官方Demo

EEUI是基于Weex的独立框架(阿里低调出品)，使用Vue.js开发原生Android、iOS应用。至于很多人说WEEX不怎么好使，那先看看Weex原理吧！

渲染流程

这两张是Weex官网的原理图。即使用前端技术按照规则生成js，Andorid、iOS端在按照规则解析成原生视图。
所以Weex原理和Flutter,RN等框架一样，只是扮演着一个中间者的角色！！！至于好不好使，都是开源的东西，除了依赖于开源平台技术以及生态支持外，更多的还是在于开发实践者本身~

至于EEUI，它不只是一个UI,还是一个独立框架。目前知道它干的事，是基于Weex封装，更好的面向应用开发者，当然或许还有其它惊喜~

注意：EEUI 封装了官方的Weex，并修改了源码以更好的支持混合开发，所以项目中已经在使用Weex的，要考虑兼容性!!!

和官方Weex差异源码地址
 EEUI官网官网文档已经很详细了，下面就走下流程，尝尝鲜！

一、环境搭建

node npm 的安装
mac
windows
本机环境

二、EEUI脚手架安装

npm install eeui-cli -g

三、iOS 相关工具安装

开发平台: Mac

版本要求

ruby:2.5.0以上
cocoapods 1.5.0 以上

安装

Xcode(appStore 下载)
CocoaPods(建议1.5.3以上)

CocoaPods 使用过程中遇到问题及时问Google

本机版本

四、Android 相关工具安装

开发平台: Mac/Windows

版本要求

AndroidStudio: 3.5.0+

安装

JDK 是JAVA开发包，AndroidStudio是Android开发IDE。

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

五、创建项目

cd 进入文件目录执行 eeui create projectName命令

可能是公司内网问题一直报错

只能去githud下载源码

也就是cd 进入文件目录执行 git clone https://github.com/kuaifan/eeui-template.git

cd eeui-template 执行eeui setting就可以按提示设置App名称、版本等App信息，执行eeui setdemo就可以设置初始化演示模板。

执行 npm install ,最后npm run dev 项目已经运行起来了~

六、跑起iOS应用

cd eeui-template-master/platforms/ios/eeuiApp 运行 pod install --no-repo-update下载iOS 三方依赖。

直到下载完成项目目录下出现eeuiApp.xcworkspace，双击打开，运行模拟器

OK，跑起来了

七、跑起Android 应用

使用Android Stduio 打开 eeui-template-master/platforms/android/eeuiApp

第一次打开 AndroidStuido 时，由于本地环境未配置好，AndroidStuido 会提示错误，按照 IDE 提示，点击 sync 同步一下，大部分环境问题都可以解决,注意下载是比较慢！！！

安卓还需要下载对应模拟器，然后运行

至此 iOS 和 Andorid 的Demo 都已经运行起来了！

八、修改代码，让你对它充满想象

当我们点击列表的item 的时候，跳转后发现加载很慢。看看了源码知道，作者是加载https://editor.eeui.app/compile/editor/releases/1/official/8a4d237d53a906ce69d517e63435d2b3/src/pages/下的js。

这边咱们就创建一个test.vue,实现本地模板的加载！

为什么是参数是test.js，官方说是路由是自动配置。

下面在test.vue文件加一个导航和button 组合吧,这里官网组件代码都有，直接复制粘贴即可。

1.template

<template>
    <div>
        <!--样式①-->
        <navbar class="navbar">

            <navbar-item type="back"></navbar-item>

            <navbar-item type="title">
                <text class="text">我是Test</text>
            </navbar-item>

        </navbar>
        <scroller class="list">
            <text class="list-title">预设样式</text>
            <div class="list-item">
                <button class="button" :eeui="{text:'默认'}"></button>
                <button class="button" :eeui="{text:'红色', model:'red'}"></button>
            </div>
            <div class="list-item">
                <button class="button" :eeui="{text:'绿色', model:'green'}"></button>
                <button class="button" :eeui="{text:'蓝色', model:'blue'}"></button>
            </div>

            <div class="list-item">
                <button class="button" :eeui="{text:'粉红', model:'pink'}"></button>
                <button class="button" :eeui="{text:'黄色', model:'yellow'}"></button>
            </div>

            <div class="list-item">
                <button class="button" :eeui="{text:'橙色', model:'orange'}"></button>
                <button class="button" :eeui="{text:'灰色', model:'gray'}"></button>
            </div>

            <div class="list-item">
                <button class="button" :eeui="{text:'黑色', model:'black'}"></button>
                <button class="button" :eeui="{text:'白色', model:'white'}"></button>
            </div>

            <div class="list-item">
                <button class="button" :eeui="{text:'加载中', loading:true}"></button>
                <button class="button" :eeui="{text:'禁用', disabled:true}"></button>
            </div>

        </scroller>
    </div>
</template>

2.Style

<style scoped>
    .navbar {
        width: 750px;
        height: 100px;
        margin-bottom: 50px;
    }
    .list {
        width: 750px;
        flex: 1;
    }

    .list-title {
        margin-top: 24px;
        margin-bottom: 12px;
        padding-top: 36px;
        padding-right: 24px;
        padding-bottom: 24px;
        padding-left: 24px;
        font-size: 28px;
        color: #757575;
    }

    .list-item {
        width: 750px;
        flex-direction: row;
    }

    .button {
        font-size: 24px;
        margin-left: 37.5px;
        margin-right: 37.5px;
        margin-bottom: 20px;
        width: 300px;
        height: 80px;
    }
</style>

事件机制这里就不写了，篇幅太长了~

3.Android 点击自定义下的 Echarts图表或Switch开关进入如下页面

4.iOS 模拟器下

至此已经可以玩起Demo ,并成功跳转到一个自定义页面。小伙伴还发现，在写test.vue的时候按下ctrl+s时候控制台输出

进行开发环境的热更新，很nice。

EEUI 入门初探 之 撸起官方Demo