react-awtk

介绍

本项目基于 valence-native 实现，在此对原作者表示感谢。本项目目前处于实验阶段，欢迎大家一起完善。

反应式 GUI 编程已经成为 Web、桌面和移动开发的主流范式，reactjs 是反应式 GUI 编程的主要代表。react-awtk 使得开发者可以用 reactjs 的方式来开发 AWTK 应用程序。

主要特色：

原生的窗口动画和控件动画。
内置 Router 实现窗口之间的导航。
JSX 兼容 AWTK Designer 生成的 XML。
兼容 AWTK Designer 生成的各种资源。
目前支持 nodejs/web，以后会增加对 quickjs 和 jerryscript 的支持。

示例

export class CheckButtonPage extends Component {constructor(props) {super(props);this.state = {value: 1,};}addValue(delta) {let value = this.state.value + delta;this.setState({ value: value % 2 });}render() {console.log('CheckButtonPage');return (<WindowcloseCurrent={this.props.closeCurrent}animHint="htranslate"name={toWindowName(this)}closable="confirm"onRequestCloseWindow={(element, evt) => {console.log(element, evt);if (app.confirm('Confirm', 'Are your sure?')) {app.closeWindow();}}}><Label x="c" y="100" w="80%" h="30" text={this.state.value} /><CheckButtonx="c"y="160"w="100"h="22"text="Click me"value={this.state.value}onChanged={(element, evt) => {this.setState({ value: element.getValue() });}}/><IncDecClosex="c"y="b"w="100%"h="40"onChanged={delta => {this.addValue(delta);}}/></Window>);}
}

以下以 nodejs 版本为例

准备

请先参考 awtk 建立对应平台的开发环境。

获取 awtk 并编译

git clone https://github.com/zlgopen/awtk.git
cd awtk; scons; cd -

获取 awtk-nodejs 并编译

git clone https://github.com/zlgopen/awtk-nodejs.git
cd awtk-nodejs

如果没有安装 node-gyp，请用下列命令安装：

npm install -g node-gyp
node-gyp configure

npm install
npm run build;

获取 react-awtk 并编译

git clone https://github.com/zlgopen/react-awtk.git
cd react-awtk
npm install
npm run build

运行 demo

cd demo

安装依赖

npm install

生成资源

python scripts/update_res.py all

运行

npm run build
npm run start

使用 vscode 开发和调试。

code .

文档

入门指南
Web 版本使用方法

参考资料：

https://reactjs.org/
http://www.hackingwithreact.com/

使用reactjs开发AWTK应用程序相关推荐

苏宁：我们开发百度小程序遇到的那些“坑”
2018年5月,受百度邀请,苏宁首批入驻百度小程序平台.作为微信小程序的开发工程师,我接手了"开荒"百度智能小程序(以下简称百度小程序)的任务,自5月初开发,一个多月就完成了苏宁易 ...
程序员开发什么小程序挣钱_作为程序员赚钱的5种独特方式
程序员开发什么小程序挣钱 1.赚钱报告错误 (1. Make money reporting bugs) You can earn money by helping other companies f ...
[WP]使用ApacheCordova开发HTML5-WindowsPhone应用程序
下载代码示例这篇文章介绍 Apache 科尔多瓦,创建使用 HTML5 和 JavaScript,跨平台移动应用程序的框架,并显示了如何使用它为 Windows Phone 开发应用程序. Wind ...
那些对混合云开发和应用程序环境的错误认识
企业架构师们在开发混合云计算应用程序并为支持程序云计算而选择云计算供应商之前,他们应当好好完成他们的准备工作.选择错误的供应商和在错误的环境中开发应用程序都会对应用程序的运行性能.工作流程.变更成本. ...
开发微信小程序入门前
开发微信小程序入门前百牛信息技术bainiu.ltd整理发布于博客园 2016年09月21日晚微信发不了微信"小程序"的内测版,一时间整个互联网都炸了锅.个大新闻.论坛都在讨论 ...
WordPress 网站开发“微信小程序“实战(二)
原文链接:https://devework.com/wordpres...,转载请用明链注明来源,谢谢! 本文是"WordPress 开发微信小程序"系列的第二篇,本文记录的是开发 ...
“六成应用开发不需要程序员”喜提热搜背后，RPA 会抢饭碗吗？
整理 | 伍杏玲出品 | 程序人生(ID:coder_life) 近日,一则"六成应用开发不需要程序员"喜提热搜,据 Gartner 数据显示,到 2024 年,全球约有 65% ...
报表引擎API开发入门— EJB程序数据源
2019独角兽企业重金招聘Python工程师标准>>> 我们前面讲了几个数据源,今天我们来讲一下EJB数据源,这篇讲完我们数据源这部分就讲完了.数据连接不需要直接访问数据库,而是使用 ...
如何使用Ajax技术开发Web应用程序(2)
在上一篇文章中,我们讨论了如何通过javascript从一个远程XML文件中取得数据.在这篇文章中,我们将学会怎样对数据作更复杂的处理.作为一个示例,我们会准备一组XML数据,将数据分割成独立的片断并 ...

使用reactjs开发AWTK应用程序

react-awtk

介绍

准备

运行 demo

文档

参考资料：

使用reactjs开发AWTK应用程序相关推荐

最新文章

热门文章