hanks10100 / weex Goto Github PK

View Code? Open in Web Editor NEW

This project forked from alibaba/weex

2.0 4.0 1.0 314.73 MB

A framework for building Mobile cross-platform UI

Home Page: http://alibaba.github.io/weex

License: Apache License 2.0

Java 45.01% JavaScript 48.11% Shell 0.08% HTML 0.04% CSS 0.20% Ruby 0.04% Objective-C 6.20% C 0.30% Objective-C++ 0.01%

weex's Introduction

Weex

A framework for building Mobile cross-platform UI.

Android iOS HTML5

Support Android 4.1 (API 16) and iOS 7.0+.

For Windows

Please INSTALL Git for Windows and run all the following commands in git-bash.

Meet Weex

Install Weex Playground App to see examples we already written.
If you want to write a demo, install weex-toolkit in Node.js 4.0+ and
Run weex init to generate & start a simple project in an empty folder.
Follow the instructions in the project README.
Enjoy it.

Use Weex

Android

Prerequisites 0. Install Node.js 4.0+ 0. Under project root 0. npm install, install project 0. ./start 0. Install Android Environment
Run playground, In Android Studio 0. Open android/playground 0. In app/java/com.alibaba.weex/IndexActivity, modify CURRENT_IP to your local IP 0. Click (Run button)
Add an example

Runtime

On Android Platform , Weex code is executed in weex_v8core which is based on Google V8 JavaScript engine.

iOS

Prerequisites
Install Node.js 4.0+ 0. Under project root 0. npm install, install project 0. ./start 0. Install iOS Environment 0. Install CocoaPods
Run playground 0. cd ios/playground 0. pod install 0. Open WeexDemo.xcworkspace in Xcode 0. Click (Run button) or use default shortcut cmd + r in Xcode 0. If you want to run the demo on your device, don't need to modify CURRENT_IP manually. ~~In DemoDefine.h(you can search this file by Xcode default shortcut cmd + shift + o), modify CURRENT_IP to your local IP~~
Add an example

Scripts

See SCRIPTS.md for more information.

IDE Plugin & Syntax Highlight & DevTool

Weex team have developed a DevTool to help you to improve we file debug efficiency.

See more stuff on this wiki page

Weex Community

StackOverflow: Ask questions about Weex.
SegmentFault (cn): 中文交流与讨论
FAQ
Articles (cn): Weex 相关文章集合

Contributing

See Weex Contributing Guide for more information.

weex's People

Contributors

Stargazers

Watchers

Forkers

dongnaebi

weex's Issues

[done] 10.15 - 10.25

[frm] Framework 冻结对全局对象和原型的修改 [0.5d]
[frm] 将 runtime 独立打包发布 [2d] 门柳
[frm] 打包时区分开发版和产品版 [1d] 门柳
[frm] 完善 Framework 的测试（覆盖率 90%） [1.5d]
[frm] 讨论 CSS 伪类的实现思路 [1d]
[frm] 简化 jsfm 发布流程，去除内部定制接口 [1d] 门柳
[frm] 重构“实例测试” [1d] 门柳
[frm] Framework 支持严格模式 [0.5d] 门柳
[frm] 修复 insertBefore 和 insertAfter 的校验逻辑 [0.5d] 门柳
[frm] 在绑定事件时添加校验 [0.3d] 门柳
[frm] 补全所有 callAddElement 的同级 API [2d] 门柳
[h5] 支持获取元素宽高、位置等布局信息 [0.5d] 门柳

Weex Gallery

验证 Weex 的能力

定制 UI

Weex 与 UI 相关的基础能力：

Material Design

Material Design 的设计风格是否被认可（尤其在 iOS 上）？
现有 Weex 组件的是基于旧版 OEM 实现的，在其基础上实现 Material Design 不仅效率低下，也有些不伦不类。

weex-bootstrap.css

一套完整的【基础】 + 【组件】样式库，提供给开发者使用，可以定制风格。

复杂交互

手势
跨屏

动画

Weex 与动画相关的基础能力：

animation module
<transition>
<transition-group>
<canvas>

微动效

Motion Graphic
Cinema Graph

复杂动画

帧动画（分段、分层）
路径动画
变形动画
骨骼动画（动画控制）
动画联动

可交互动画

如：拨动琴弦的效果

过渡效果
挤压、拖拽

发现和其他技术的结合点

PWA

Progressive Weex App，实现缓存机制，和 zcache 有点像。

服务端渲染

在服务端将页面渲染成 callNative 指令序列，客户端仅需 Weex Runtime 就能正常渲染页面。需要进一步完善 Vanilla 框架。

WebAssembly

Native WebAssembly loader
WebAssembly Service

Flux

ReactiveX

Firebase (BaaS)

图表

地图

VR

发现新的使用场景

多屏实时互动

能够实现线下多屏互动的简单应用。（例如可以面对面玩的桌游，多人同时扫一个二维码就可以开始游戏）

体感（陀螺仪）

分享和推送

优化开发体验

工具
工作流

重点任务

[jsfm] v0.17 change log

Rearranged the file structure

In js framework v0.16, the folder structure is:

html5
  ├── browser
  ├── default
  ├── native
  ├── runtime
  ├── shared
  ├── vanilla
  └── vdom

In js framework v0.17, the folder structure is:

html5
  ├── frameworks
  │   ├── legacy
  │   └── vanilla
  ├── render
  │   ├── browser
  │   └── native
  ├── runtime
  │   └── vdom
  └── shared

The default folder is renamed to legacy.

Adjusted develop environment

Add weex-vue-framework, support to render Vue components.
Temporarily remove weex-rx-framework, it would be restored in v0.18 .
Release weex-js-runtime package. alibaba#1497
Use rollup instead of webpack.
Use buble instead of babel.
Modify the build script.
Support to use process.env.

Refactored weex runtime

Refactored the runtime module: simplifying the dependency, split virtual dom, required the shared polyfill and export several API.

See alibaba#1508 for more details.

New features

Add getComponentRect api for dom module. alibaba#1455
Wrap IFFE and use strict mode in js bundle. alibaba#1483
Freeze the prototype of intrenal and build-in objects. alibaba#1529
Support component API. alibaba#969 alibaba#1578

Tests

Improve the test coverage.
Refactor "case test" file structure.

weex-template-compiler 功能增强

[done] 9.25-9.30

已完成工作

[framework] 升级 rollup
[framework] babel 升级为 buble 进行打包
[framework] 添加 Array.from 和 Object. setPrototypeOf 的 polyfill [0.5d]
[html5] run weex-vue-framework
[lint] 校验颜色值格式 [0.5d]
[toolkit] 兼容性问题 #1218
[lint] 存在不合理的属性名
[lint] 🐴 接入 lint 工具 [1d] 门柳
[lint] 屏蔽 console 输出，将校验结果当做 JSON 返回 [1d] 门柳
[pack] 基本实现 weexpack run ios 功能 [2d] 早弦
[pack] 基本实现 weexpack run android 功能 [2d] 早弦
[pack] README 加上预先环境配置说明，完善README [0.5d] 早弦
[pack] Android 真机调试 [0.5d]
[pack] 加速 Android 编译优化过程

[jsfm] v0.19 change log

v0.19.1

checkout form jsfm-feature-0.17

Refactor Weex Runtime

v0.1.9.2

fix the registerService bug
modify the build script

v0.19.3

inject service object to each instance

Weex FAQ (目录)

todo

Useful code snippets

[done] 9.17 - 9.24

已完成工作

[toolkit] 错误提示机制 [2d]
[framework] static 指令实现与测试 [1d] 早弦
[framework] 配置手淘iOS编译环境，探查weex jscore内存 [0.5d]
[lint] 封装 npm 可执行脚本
[lint] 调整 lint 方式，简化 weex 文件的引入
[lint] 支持校验远端文件（url）
[lint] 输出出错的代码片段 [1.5d] 门柳
[lint] 校验编译前 .we 模板中指令的写法 [1d]
[lint] 完善使用文档 [1d] 门柳
[lint] 统一输出风格 [1.5d] 门柳
[lint] 将工具代码转成 ES5
[html5] geolocation API module 大法
[html5] slider enhancement: slider-neighbor component [1d] 大法
明确打包工具的结构和流程 [0.5] 早弦
明确打包工具项目架构 [0.5] 门柳
打包工具 ios 运行lib封装[1d] 早弦

.we 和 .vue 的语法差异

Overview

描述	Weex	Vue
类名	`class="btn btn-{{type}}"`	`:class="['btn', 'btn-' + type]"`
if 指令	`if="{{!foo}}"`	`v-if="!foo"`
循环指令	`repeat="{{item in list}}"`	`v-for="item in list"`
事件绑定	`onclick="handler"`	`@click="handler"`
样式绑定	`style="color:{{textColor}}"`	`:style="{ color: textColor }"`
属性绑定	`src="{{rightItemSrc}}"`	`:src="rightItemSrc"`
自定义的原生事件	`onclick="xxx"`	`@click.native="xxx"`
内容槽	`<content></content>`	`<slot></slot>`
初始化数据	`data: { value: 'x' }`	`props: { value: { default: 'x' } }`
标签 id	`id="xxx"`	`ref="xxx"`
获取节点	`this.$el('xxx')`	`this.$refs.xxx`
触发自定义事件	`this.$dispatch()`	`this.$emit()`

[done] 10.8 - 10.14

[lint] 削弱不严重的校验规则 [0.5d] 门柳
[lint] 禁止使用以 _ 和 $ 开头的属性名
[framework] babel 升级为 buble 进行测试 @Jinjiang
[toolkit] 方便实现扩展机制 [2d] 子宽
提供工具（方法）辅助业务方排查内存问题 [1d]
[lint] 修复错误 issue 链接 [0.2d] 门柳
[frm] 排查新添数据项没有绑定的行为 [1d] （无需修改）
[lint] 完善 issue 文档，添加丰富实例 [0.6d] 门柳
[loader] weex-loader 改进，增加不同环境兼容性 @子宽
[lint] 排查问题，优化输出，发布稳定版本 [0.5d] 门柳
[lint] 发布到 tnpm [0.3d] 门柳
weex 打包工具交接 [0.5d]
基于开发者需求，讨论 weex 下一步工作计划 [1d]

[Vue] Feature Test Report

Vue Test Report

（未打勾是还未测试，带括号的是有些问题的）

Vue Features

DSL

Global API

Lifecycle

Misc

delimiters
functional component
named component

Properties

Directives

v-text (DOM 相关，不支持)
v-html (DOM 相关，不支持)
v-show (基于 CSS display 属性，不支持)
v-templates (DOM 相关，不支持)
v-if
v-else
v-else-if
v-for
v-on & @
v-bind & :
v-modal
v-pre (no style on native)
v-cloak (基于 CSS display 属性，不支持)
v-once

Styles

box-mode
flexbox
position
paint

Common Events

click
longpress (Android still trigger click, iOS don't)
appear
disappear

Components

Modules

在 Weex 中使用 Vue 的限制

请将weex-vue-render和weex模块分开发布！

现在npm 中的weex-vue-render中，直接包含了一个全局weex,无法在webpack中模块化工作！！！

Vue 2.x 版 Weex 组件的开发指引

初衷

Weex 计划将前端框架的内核切换成 Vue 2.x，推荐使用 Vue 的语法写应用。原生页面的渲染逻辑不需要修改，但是在 Web 端如果继续使用现有 HTML5 render，仍然无法绕过 callNative 和 callJS 这层通信，性能优化有瓶颈。

目的是开发一套和 Weex 内置组件行为一致的 Vue 2.x 版的组件，使得 Weex 的页面在 Web 端可以只依赖 Vue 和当前组件库运行，可以不依赖 Weex 容器。

开发方式

经过讨论决定这部分代码也会放在Weex 主仓库中，暂时在Hanks10100/weex 中开发，分支是 html5-feature-vue-render。

如果有意向贡献代码，可以先向 Hanks10100/weex 中的 html5-feature-vue-render 分支发 Pull Request，最后统一合入主仓库。

代码地址： https://github.com/Hanks10100/weex/tree/html5-feature-vue-render/html5/render/vue

项目结构

组件代码在 `html5/render/vue` 中

npm run build:vue 可以打包 Vue 组件代码，生成的文件是 dist/vue-renderer.js 和 dist/vue-renderer.min.js。
npm run dev:vue 可以监听文件变化并且热更新。

测试代码在 `html5/test/render/vue` 中

npm run test:vue 可以测试 vue 组件部分的代码，测试框架是 karma 和 mocha 。

TIPS: 执行 npm run test:vue -- --no-single-run 可以使每次文件有改动都自动运行一次测试。

开发规范

直接使用 render 函数写组件，不使用模板。
遵守 .eslintrc 定义的的编码规则。
实现组件后也要写测试代码。

What about WebAssembly

WebAssembly Service
Native WebAssembly loader

Design

JS Service

loadWebAssembly('path/to/lib.wasm').then(instance => {
    // ...
})

Native module

const wasm = weex.requireModule('wasm')
wasm.load('path/to/lib.wasm', instance => {
    // ...
})

Use <script type="module"> in .we and .vue

<script type="module" src="path/to/lib.wasm"></script>

Vue Examples 真机测试结果

《使用 Vue 开发原生应用的注意事项》

moved to https://weex-project.io/cn/references/vue/difference-with-web.html

《将 `.we` 转成 `.vue` 的方法》

moved to https://weex-project.io/cn/references/migration/migration-from-weex.html