Weex——灵活的移动端高性能动态化方案-勾股-鬼道.pdf

Weex @ @? 1400+ /photo/fashion-person-woman-hand-4970/ /appcelerator/appcelerator-html5-prez?nal 1. 2. 3. https://www.?/photos/kbaranowski/12891634553/ …… … http://alibaba.github.io/weex/demo.html /photo/fashion-person-woman-hand-4970/ Weex pages + router + features Page A Page B Page C …… API API Router API Weex Page HTML/CSS/JavaScript Native inspired from: /photo/fashion-person-woman-hand-4970/ Live Demo https://www.?/photos/eugeniaofthewasps/6712475025/ 1. template 2. style 3. script 1. template 2. style 3. script https://habrahabr.ru/company/dataart/blog/272737/ 1. 2. 3. https://www.?/photos/tareqworx/16047593308/ https://www.?/photosN00/5055786207/ template 1. Virtual DOM tree 2. tag name, attributes, children 1. style=... 2. class=... 3. event=... 3. data binding style 1. single-class selector only 2. scoped attributes if/repeat 135 attributes append append=tree|node ? node ? tree attributes id this.$el(id) DOM (scoped in component) 1. div 2. scroller 3. list cell 4. text 5. image 6. slider 7.input (experimental) 1. box model flexbox 2. position: relative | absolute | fixed | sticky 3. opacity background-color …… 4. 1. click 2. appear 3. disappear 4. change script ? ViewModel options ? module.exports 1.init - at beginning of the constructor 2.created - data observed 3.ready - virtual dom compiled API 1. 2. 3. attributes - 1. this.$on(type, handler) 2. this.$off(type, handler) - 1. this.$emit(type, detail) 2. this.$dispatch(type, detail) 3. this.$broadcast(type, detail) Future to Ship 1. Key Features: Form, Animation, Gesture, … 2. More Resources 3. More Tools 4. Better Dev Experience More docs/samples/playground-app http://alibaba.github.io/weex/ How it works /photo/watch-gears-technic-technical-8180/ DSL HTML/JS/CSS Virtual DOM iOS RenderEngine iOS UI Android RenderEngine Android UI H5 RenderEngine H5 UI WeDeSx LFile transformer JS Bundle Server JS JS Framework JSCore / V8 JS-Native Bridge callJs callNative iOS RenderEngine Android RenderEngine