EEUI 入门初探 之 撸起官方Demo

·  阅读 2960

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。

五、创建项目

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。

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改