Code Monkey home page Code Monkey logo

lukai912 / gaiax Goto Github PK

View Code? Open in Web Editor NEW

This project forked from alibaba/gaiax

0.0 0.0 0.0 99.85 MB

动态模板引擎是一套轻量化、跨平台、高性能的纯原生移动端卡片渲染动态化解决方案

Home Page: https://youku-gaiax.github.io/

License: Apache License 2.0

Shell 0.11% JavaScript 2.89% Ruby 0.07% C++ 4.21% C 35.07% Objective-C 10.23% Java 7.20% Rust 15.55% Kotlin 17.39% TypeScript 1.95% CSS 1.86% Objective-C++ 0.67% Swift 0.28% Makefile 0.14% HTML 1.26% CMake 0.10% Batchfile 0.04% SCSS 0.01% MDX 0.96%

gaiax's Introduction

GaiaX-logo

动态模板引擎是阿里巴巴优酷技术团队研发的一套轻量级的纯原生动态化卡片跨端解决方案

README-en README-zh Docs-zh GitHub release GitHub Stars GitHub Forks user repos GitHub Contributors License

动态模板引擎

动态模板引擎是阿里巴巴优酷技术团队研发的一套轻量级的纯原生动态化卡片跨端解决方案。

除了客户端SDK外,还提供了模板可视化搭建工具Studio,以及Demo工程(包含模板示例,以及扫码预览),支持从模板创建、编辑、真机调试、预览等研发全链路技术。

动态模板引擎的目标是在保证原生体验与性能的同时,帮助客户端开发实现低代码。

目标

以下这些目标是我们项目前进的方向:

  • 高性能
  • 跨端技术
  • 可视化搭建
  • 纯Native渲染

支持平台

  • Android
  • iOS
  • Harmony

核心概念

GaiaX-arch

使用到的技术

Rust/Android/Kotlin/iOS/OC/C++/JNI/CSS/FlexBox

使用方法

Android

依赖

增加jitpack源:

// 方式1:在setting.gradle中增加
pluginManagement {
    repositories {
        gradlePluginPortal()
        google()
        maven { url 'https://jitpack.io' }
        mavenCentral()
    }
}
dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        google()
        maven { url 'https://jitpack.io' }
        mavenCentral()
    }
}

// 方式2:在根build.gradle中增加
allprojects {
    repositories {
        maven { url 'https://jitpack.io' }
    }
}

Android-Support version:

implementation 'com.github.alibaba.GaiaX:GaiaX-Adapter:$version-support'
implementation 'com.github.alibaba.GaiaX:GaiaX:$version-support'
implementation 'com.alibaba:fastjson:1.2.76'

AndroidX version:

implementation 'com.github.alibaba.GaiaX:GaiaX-Adapter:$version'
implementation 'com.github.alibaba.GaiaX:GaiaX:$version'
implementation 'com.alibaba:fastjson:1.2.76'

模板文件

// 用于存放模板资源的路径
/assets/${templateBiz}/${templateId}

调用方式

// SDK使用方式

// 初始化          - 初始化SDK
GXTemplateEngine.instance.init(activity)

// 构建模板参数     - 模板信息
// activity       - 上下文
// templateBiz    - 业务ID
// templateId     - 模板ID
val item = GXTemplateEngine.GXTemplateItem(activity, "templateBiz", "templateId")

// 构建模板参数     - 视口大小(模板绘制尺寸,类似于Android中画布的概念)
val size = GXTemplateEngine.GXMeasureSize(100F.dpToPx(), null)

// 构建模板参数     - 模板数据
val dataJson = AssetsUtils.parseAssets(activity, "template-data.json")
val data = GXTemplateEngine.GXTemplateData(dataJson)

// 创建模板视图     - 根据模板参数创建出一个原生View
val view = GXTemplateEngine.instance.createView(item, size)

// 视图绑定数据
GXTemplateEngine.instance.bindData(view, data)

// 将插入模板插入到容器中进行渲染
findViewById<ViewGroup>(R.id.template_container).addView(view, 0)

iOS

CocoaPods

在Podfile中添加依赖

// 依赖
pod 'GaiaXiOS'

模板文件

在App或者FrameWork中添加模板文件

// 用于存放模板资源的路径
xxx.bundle/templateId

调用方式

// SDK使用方式

// 引入头文件
#import <GaiaXiOS/GaiaXiOS.h>

//注册模板服务
[TheGXRegisterCenter registerTemplateServiceWithBizId:bizId templateBundle:@"xxx.bundle"];

// 构建模板参数     - 模板信息
// templateBiz    - 业务ID
// templateId     - 模板ID
GXTemplateItem *item = [[GXTemplateItem alloc] init];
item.templateId = templateId;
item.bizId = templateBiz;

// 构建模板参数     - 视口大小(模板绘制尺寸)
CGSize size = CGSizeMake(1080, NAN);

// 构建模板参数     - 模板数据
GXTemplateData *data = [[GXTemplateData alloc] init];
data.data = @{@"xxx": @"xxx"};

// 创建模板视图     - 根据模板参数创建出一个原生View
UIView *view = [TheGXTemplateEngine creatViewByTemplateItem:item measureSize:size];

// 视图绑定数据
[TheGXTemplateEngine bindData:data onView:view];

// 将插入模板插入到容器中进行渲染
[self.view addSubview:view];

Harmony

依赖管理

在oh-package.json5文件中中添加依赖

// 依赖
"dependencies": {
  "GaiaxHarmony": "",
}

模板文件

在项目rawfile目录

// 用于存放模板资源的路径
src/main/resouces/rawfile/xxxx

调用方式

// SDK使用方式

// 引入头文件
import { GXTemplateItem } from 'GaiaxHarmony/src/main/ets/context/GXTemplateItem';
import { GXTemplateData } from 'GaiaxHarmony/src/main/ets/context/GXTemplateData';
import { GXComponent } from 'GaiaxHarmony/src/main/ets/components/GXComponent';
import { Size } from 'gxstretch';

// 构建模板参数     - 模板信息
templateItem = new GXTemplateItem('bizId', 'templateId', 'templateVersion')

// 构建模板参数     - 模板数据
templateData = new GXTemplateData();
templateData.data = @{@"xxx": @"xxx"};

// 构建模板参数     - 视口大小(模板绘制尺寸)
measureSize: Size<number> = new Size(NaN, NaN);

// 创建模板视图    
GXComponent({
    templateItem: this.templateItem,
    templateData: this.templateData,
    measureSize: this.measureSize
})

2024鸿蒙迭代路线图

image

如何贡献代码

我们非常欢迎您为项目贡献代码。在您编写代码之前,请先创建一个issue或者pull request以便我们能够讨论方案的细节与方案的合理性。您可以针对以下领域贡献代码:

  • 包大小
  • 运行时性能
  • 跨端一致性
  • 单元测试用例
  • 文档或者使用案例
  • 等等

工具

问题反馈

  • 外部接入方须从Github上按照模板提示提出ISSUE,详细的描述问题,并@负责人的Github账户。

  • ISSUE的处理优先级,由高到低排序,1~7:

    • Level1 - 可被复现的BUG。
    • Level2 - 在GaiaX规划中的新增需求。
    • Level3 - GaiaStdio相关问题。
    • Level4 - 文档问题。
    • Level5 - 未在GaiaX规划中的新增需求。
    • Level6 - 不可被复现的BUG。
    • Level7 - 其他问题。
  • 各模块负责人Github账户:

许可证

Ali-GaiaX-Project is a template dynamic develop solutions developed by Alibaba and licensed under the Apache License (Version 2.0)
This product contains various third-party components under other open source licenses. 
See the NOTICE file for more information.

gaiax's People

Contributors

biezhihua avatar jingcheng1988 avatar mxpds6688 avatar fullalien avatar johntsaii avatar ronghui1219 avatar dqelong avatar amjunliang avatar broven avatar zylcold avatar yufamg avatar pj0579 avatar qiqiangqq avatar msliu3 avatar denty avatar cofbro avatar speedrn avatar oraoto avatar alibaba-oss avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.