This is an automated email from the ASF dual-hosted git repository. kyork pushed a commit to branch master in repository https://gitbox.apache.org/repos/asf/incubator-weex-site.git
The following commit(s) were added to refs/heads/master by this push: new 347348e Feat update rax docs (#563) 347348e is described below commit 347348e5a091e265401ab825edc2014f1c930f74 Author: 亚城 <narutos...@163.com> AuthorDate: Fri Dec 6 10:59:39 2019 +0800 Feat update rax docs (#563) * feat: add demos * docs: add menu * feat: add rax logo * feat: add img * feat: remove empty date * docs: 增加 rax 介绍文档与组件文档 * docs: 增加英文文档 * doc: 文档修复 --- docs/.vuepress/components/IndexPage.vue | 2 +- docs/.vuepress/public/vue-rax.png | Bin 120960 -> 163126 bytes docs/docs/components/a.md | 22 +++- docs/docs/components/cell.md | 15 ++- docs/docs/components/div.md | 25 ++++ docs/docs/components/image.md | 33 ++++- docs/docs/components/indicator.md | 2 +- docs/docs/components/input.md | 23 +++- docs/docs/components/list.md | 80 ++++++++++++ docs/docs/components/loading.md | 2 +- docs/docs/components/recycle-list.md | 2 +- docs/docs/components/refresh.md | 63 ++++++++- docs/docs/components/richtext.md | 2 +- docs/docs/components/scroller.md | 63 ++++++++- docs/docs/components/slider.md | 48 ++++++- docs/docs/components/text.md | 24 +++- docs/docs/components/textarea.md | 35 ++++- docs/docs/components/video.md | 25 +++- docs/docs/components/waterfall.md | 92 ++++++++++++- docs/docs/components/web.md | 26 +++- docs/guide/front-end-frameworks.md | 6 +- docs/guide/images/vue-rax.png | Bin 120960 -> 162056 bytes docs/zh/docs/components/a.md | 23 +++- docs/zh/docs/components/cell.md | 18 ++- docs/zh/docs/components/div.md | 25 ++++ docs/zh/docs/components/image.md | 33 ++++- docs/zh/docs/components/indicator.md | 2 +- docs/zh/docs/components/input.md | 23 +++- docs/zh/docs/components/list.md | 82 +++++++++++- docs/zh/docs/components/loading.md | 2 +- docs/zh/docs/components/refresh.md | 65 +++++++++- docs/zh/docs/components/richtext.md | 2 +- docs/zh/docs/components/scroller.md | 63 ++++++++- docs/zh/docs/components/slider.md | 47 ++++++- docs/zh/docs/components/text.md | 23 +++- docs/zh/docs/components/textarea.md | 35 ++++- docs/zh/docs/components/video.md | 27 +++- docs/zh/docs/components/waterfall.md | 93 +++++++++++++- docs/zh/docs/components/web.md | 26 +++- docs/zh/guide/front-end-frameworks.md | 4 + docs/zh/guide/images/vue-rax.png | Bin 120960 -> 162056 bytes docs/zh/guide/introduction.md | 2 +- docs/zh/guide/use-rax-in-weex.md | 221 ++++++++++++++++++++++++++++++++ 43 files changed, 1365 insertions(+), 41 deletions(-) diff --git a/docs/.vuepress/components/IndexPage.vue b/docs/.vuepress/components/IndexPage.vue index 08b4428..224d789 100644 --- a/docs/.vuepress/components/IndexPage.vue +++ b/docs/.vuepress/components/IndexPage.vue @@ -30,7 +30,7 @@ <h3>{{weex.charc3Title}}</h3> <div>{{weex.charc3Content}}</div> </div> - <img src="https://img.alicdn.com/tfs/TB1UrQ4qAvoK1RjSZFNXXcxMVXa-808-1180.png" width="50%" height="100%" /> + <img src="https://gw.alicdn.com/tfs/TB1WFkDjkT2gK0jSZFkXXcIQFXa-808-1180.png" width="50%" height="100%" /> </div> <div class="character-o"> diff --git a/docs/.vuepress/public/vue-rax.png b/docs/.vuepress/public/vue-rax.png index 1e6e57e..c10f02e 100644 Binary files a/docs/.vuepress/public/vue-rax.png and b/docs/.vuepress/public/vue-rax.png differ diff --git a/docs/docs/components/a.md b/docs/docs/components/a.md index 87f2dfb..990acd6 100644 --- a/docs/docs/components/a.md +++ b/docs/docs/components/a.md @@ -30,7 +30,7 @@ It's forbidden to add text directly to `<a>`, use [`<text>`](./text.html) to wra The execution order of callback function of click and href is **undefined**. Do **not** use click event to do the preprocessing of `href`. ::: -## Examples +## Vue Example ```Html <a href="http://emas-ha-remote-log-poc.oss-cn-beijing.aliyuncs.com/eweex/app/biz-docs-com-mod/upload/271ccdca-db41-423d-981c-c7c6751ba479/show_1.js"> @@ -39,3 +39,23 @@ The execution order of callback function of click and href is **undefined**. Do ``` [Demo](http://dotwe.org/vue/3b789771e48be92a70bd682f084b84b5) + +## Rax Example + +`rax-link` is the component `<a>` of rax, which can run in web and weex. + +```jsx +import { createElement, render } from 'rax'; +import Driver from "driver-universal"; +import Link from 'rax-link'; +import Text from 'rax-text'; + +function App() { + return <Link href={"//www.google.com"} onPress={(e)=>{console.log(e)}}> + <Text>click me</Text> + </Link> +} +``` + +[rax-link doc](https://rax.js.org/docs/components/link) + diff --git a/docs/docs/components/cell.md b/docs/docs/components/cell.md index 9a385ce..df2570c 100644 --- a/docs/docs/components/cell.md +++ b/docs/docs/components/cell.md @@ -28,8 +28,21 @@ This type of component supports all kinds of weex component as its child compone * **common events**. Check out [common events](../events/common-events.html). -## Example +## Vue Example Please refer to * [list](./list.html) * [waterfall](./waterfall.html) + +## Rax Example + +```jsx +import RecyclerView from 'rax-recyclerview'; +``` + +```jsx +<RecyclerView.Cell>{...}</RecyclerView.Cell> +``` + +[rax-recyclerview doc](https://rax.js.org/docs/components/recyclerview) + diff --git a/docs/docs/components/div.md b/docs/docs/components/div.md index 1ebbc77..02f3548 100644 --- a/docs/docs/components/div.md +++ b/docs/docs/components/div.md @@ -21,3 +21,28 @@ ## Events * **common events**. Check out [common events](../events/common-events.html). + +## Rax Example + +`rax-view` is the component `<div>` of rax, which can run in web and weex. + +```jsx +import { createElement, render } from 'rax'; +import Driver from "driver-universal"; +import View from "rax-view"; + +function App() { + return <View + style={{ + width: '200rpx', + height: '200rpx', + backgroundColor: '#222831', + }} + />; +} + +render(<App />, document.body, { driver: Driver }); +``` + +[rax-view doc](https://rax.js.org/docs/components/view) + diff --git a/docs/docs/components/image.md b/docs/docs/components/image.md index c55f3a5..29e0f2a 100644 --- a/docs/docs/components/image.md +++ b/docs/docs/components/image.md @@ -161,6 +161,35 @@ export default { Complete example goes [here](http://dotwe.org/vue/94de9307517240dec066d2ea57fe54a0). -## Examples +## Vue Example * [Base64 example](http://dotwe.org/vue/ba477790c85ea12bbf7ad3a5f0885b5c) -* [Lazy load image example](http://dotwe.org/vue/b0b146e4e6fa4890f800e18cb950f803) \ No newline at end of file +* [Lazy load image example](http://dotwe.org/vue/b0b146e4e6fa4890f800e18cb950f803) + +## Rax Example + +`rax-image` is the component `<image>` of rax, which can run in web and weex. + +```jsx +import { createElement, render } from 'rax'; +import Driver from "driver-universal"; +import Image from 'rax-image'; + +const App = () => { + return ( + <Image + source={{ + uri: 'https://gw.alicdn.com/tfs/TB1bBD0zCzqK1RjSZFpXXakSXXa-68-67.png', + }} + style={{ + height: '68rpx', + width: '67rpx' + }} + /> + ); +}; + +render(<App />, document.body, { driver: Driver }); +``` + +[rax-image doc](https://rax.js.org/docs/components/image) + diff --git a/docs/docs/components/indicator.md b/docs/docs/components/indicator.md index 423a1c8..7a2a20e 100644 --- a/docs/docs/components/indicator.md +++ b/docs/docs/components/indicator.md @@ -22,6 +22,6 @@ No attributes. No events. -## Example +## Vue Example Please refer to [slider](./slider.html) diff --git a/docs/docs/components/input.md b/docs/docs/components/input.md index f99c1e6..f42fa45 100644 --- a/docs/docs/components/input.md +++ b/docs/docs/components/input.md @@ -139,7 +139,7 @@ input does not support the common-event `click`. Please listen to the `input` * for `focus` and `blur` events: - `timestamp`: the time stamp of the event. -## Demo +## Vue Example - [input with normal content and binding actions Example] (http://dotwe.org/vue/c2c9a853e5184d8ade57d1d93432f31f) - [ date & time Example ](http://dotwe.org/vue/23ec083078356ef0e31618164e5a184b) @@ -148,3 +148,24 @@ input does not support the common-event `click`. Please listen to the `input` - [Other Examples](http://dotwe.org/vue/aec5342b15d3c01b3b427384a71b0874) [try it](http://dotwe.org/vue/3470e4d0194f3879a72d38e2ab02cc9f) + +## Rax Example + +`rax-textinput` is the component `<textarea>` of rax, which can run in web and weex. + +```jsx +import { createElement, render } from "rax"; +import Driver from 'driver-universal'; +import TextInput from "rax-textinput"; + +function App() { + return ( + <TextInput autoFocus={true} /> + ); +} + +render(<App />, document.body, { driver: Driver }); +``` + +[rax-textinput doc](https://rax.js.org/docs/components/textinput) + diff --git a/docs/docs/components/list.md b/docs/docs/components/list.md index 2ed3a09..2738c56 100644 --- a/docs/docs/components/list.md +++ b/docs/docs/components/list.md @@ -76,3 +76,83 @@ For example, a vertical list nested in a vertical list or scroller is not allowe [load more demo](http://dotwe.org/vue/d31c85e7cd2dc54fa098e920a5376c38) + +## Rax Example + +`rax-recyclerview` is the component `<list>` of rax, which can run in web and weex. + +```jsx +import { createElement, Component, render } from 'rax'; +import View from 'rax-view'; +import Text from 'rax-text'; +import Driver from "driver-universal" +import RecyclerView from 'rax-recyclerview'; + +function Thumb() { + return ( + <RecyclerView.Cell> + <View style={styles.button}> + <View style={styles.box} /> + </View> + </RecyclerView.Cell> + ); +} +let THUMBS = []; +for (let i = 0; i < 20; i++) THUMBS.push(i); +let createThumbRow = (val, i) => <Thumb key={i} />; + +function App() { + return ( + <View style={styles.root}> + <View style={styles.container}> + <RecyclerView + style={{ + height: 500 + }}> + <RecyclerView.Header> + <Text>Sticky view is not header</Text> + </RecyclerView.Header> + <RecyclerView.Header> + <View style={styles.sticky}> + <Text>Sticky view must in header root</Text> + </View> + </RecyclerView.Header> + {THUMBS.map(createThumbRow)} + </RecyclerView> + </View> + </View> + ); +} + +let styles = { + root: { + width: '750rpx', + }, + container: { + padding: '20rpx', + borderStyle: 'solid', + borderColor: '#dddddd', + borderWidth: '1rpx', + marginLeft: '20rpx', + height: '1000rpx', + marginRight: '20rpx', + marginBottom: '10rpx', + }, + button: { + margin: '7rpx', + padding: '5rpx', + alignItems: 'center', + backgroundColor: '#eaeaea', + borderRadius: '3rpx', + }, + box: { + width: '64rpx', + height: '64rpx', + } +}; + +render(<App />, document.body, { driver: Driver }); +``` + +[rax-recyclerview doc](https://rax.js.org/docs/components/recyclerview) + diff --git a/docs/docs/components/loading.md b/docs/docs/components/loading.md index 799291e..227b10a 100644 --- a/docs/docs/components/loading.md +++ b/docs/docs/components/loading.md @@ -65,6 +65,6 @@ The `<loading>` Component provide a pullup to loading function for some special </loading> ``` -## Example +## Vue Example - Complete example goes [here](http://dotwe.org/vue/70db1e2d322a50065369033cb9a5b58f) diff --git a/docs/docs/components/recycle-list.md b/docs/docs/components/recycle-list.md index 475034b..c1d358f 100644 --- a/docs/docs/components/recycle-list.md +++ b/docs/docs/components/recycle-list.md @@ -129,7 +129,7 @@ Different from the understanding in the front-end framework, the logic to implem * Component custom event Plan support. Features such as `vm.$on`, `vm.$once`, `vm.$emit`, `vm.$off` are not fully tuned, the interface is available, but the behavior may be slightly different (parameters are missing), do not use it for the time being. -## Demo +## Example ```html <recycle-list for="(item, i) in longList" switch="type"> <cell-slot case="A"> diff --git a/docs/docs/components/refresh.md b/docs/docs/components/refresh.md index 07f292f..656863e 100644 --- a/docs/docs/components/refresh.md +++ b/docs/docs/components/refresh.md @@ -76,6 +76,67 @@ To be rendered properly, the `<refresh>` Component must appear inside the specia -## Example +## Vue Example - Complete example goes [here](http://dotwe.org/vue/b9fbd9b7a0b0aaa46e3ea46e09213539) + +## Rax Example + +`rax-refreshcontrol` is the component `<refresh>` of rax, which can run in web and weex. + +```jsx +import { createElement, Component, render } from 'rax'; +import View from 'rax-view'; +import Text from 'rax-text'; +import Driver from 'driver-universal'; +import RecyclerView from 'rax-recyclerview'; +import RefreshControl from 'rax-refreshcontrol'; + +class RefreshControlDemo extends Component { + state = { + isRefreshing: false, + loaded: 0, + refreshText: '↓ Pull To Refresh' + }; + + handleRefresh = (e) => { + this.setState({ + isRefreshing: true, + refreshText: 'Refreshing', + }); + setTimeout(() => { + // update Data + this.setState({ + isRefreshing: false, + refreshText: '↓ Pull To Refresh', + }); + }, 1000); + }; + + render() { + return ( + <View> + <RecyclerView + refreshControl={null}> + <RefreshControl + refreshing={this.state.isRefreshing} + onRefresh={this.handleRefresh} + > + <Text>{this.state.refreshText}</Text> + </RefreshControl> + <RecyclerView.Cell> + <View> + <Text>this is list</Text> + </View> + </RecyclerView.Cell> + </RecyclerView> + </View> + ); + } +} + +render(<RefreshControlDemo/>, document.body, { driver: Driver }); +``` + +[rax-refreshcontrol doc](https://rax.js.org/docs/components/refreshcontrol) + diff --git a/docs/docs/components/richtext.md b/docs/docs/components/richtext.md index f702fd4..8645ee6 100644 --- a/docs/docs/components/richtext.md +++ b/docs/docs/components/richtext.md @@ -75,6 +75,6 @@ Only limited css styles listed below are supported by richtext. * The `a` tag has a `pseudo-ref` property whose value will be sent with the itemclick event. **Please be noted that the default jump behavior on `a` tag will be disabled at this moment.`[Demo](http://editor.weex.io/p/sunshl/Contribute/commit/b21e1133830b48767c6d00d712e415b2) * If `itemclick` is specified on nested nodes, only the event on the outer node will take effect. -## Example +## Vue Example [Demo](http://dotwe.org/vue/8a817e1acb46c2910caf1b53b8016a48) diff --git a/docs/docs/components/scroller.md b/docs/docs/components/scroller.md index ed16904..fb6f5d6 100644 --- a/docs/docs/components/scroller.md +++ b/docs/docs/components/scroller.md @@ -59,7 +59,7 @@ common styles: check out [common styles for components](../styles/common-styles. Nested lists or scrollers within the same direction are not supported. In other words. nested list/scroller must have different directions. For example, a vertical list nested in a vertical list or scroller is not allowed. However, a vertical list nested in a horizontal list or scroller is legal. -## example +## Vue Example ```html <template> @@ -148,3 +148,64 @@ For example, a vertical list nested in a vertical list or scroller is not allowe ``` [try it](http://dotwe.org/vue/2f22f14fb711d88515e63c3f67bed46a) + +## Rax Example + +`rax-scrollview` is the component `<scroller>` of rax, which can run in web and weex. + +```jsx +import { createElement, render } from 'rax'; +import Driver from "driver-universal" +import View from 'rax-view'; +import ScrollView from 'rax-scrollview'; + +function Thumb() { + return ( + <View style={styles.button}> + <View style={styles.box} /> + </View> + ); +} + +let THUMBS = []; +for (let i = 0; i < 20; i++) THUMBS.push(i); +let createThumbRow = (val, i) => <Thumb key={i} />; + +function App () { + return ( + <View style={{ ...styles.container, ...{ height: 500 } }}> + <ScrollView> + {THUMBS.map(createThumbRow)} + </ScrollView> + </View> + ); +} + +let styles = { + container: { + padding: 20, + borderStyle: 'solid', + borderColor: '#dddddd', + borderWidth: 1, + marginLeft: 20, + marginRight: 20, + marginBottom: 10, + }, + button: { + margin: 7, + padding: 5, + alignItems: 'center', + backgroundColor: '#eaeaea', + borderRadius: 3, + }, + box: { + width: 64, + height: 64, + } +}; + +render(<App />, document.body, { driver: Driver }); +``` + +[rax-scrollview doc](https://rax.js.org/docs/components/scrollview) + diff --git a/docs/docs/components/slider.md b/docs/docs/components/slider.md index e8b65c8..86e3a80 100644 --- a/docs/docs/components/slider.md +++ b/docs/docs/components/slider.md @@ -30,7 +30,8 @@ It supports all kinds of weex components as its slides. The `indicator` componen * **change**. Triggerd when the slide's index is changed. The event object contains the attribute of `index`, which is the index number of the currently shown slide. * **scroll**. This event is fired when scrolling. The current `offsetXRatio` value is given in this event callback. And `offsetXRatio` means the current slide offset ratio which value range is [-1, 1]. Negative value means the slide is shifted to left and positive value means to right. For example, -0.2 means 20% of the current slide is slided beyonds left border of the slider. -## Example +## Vue Example + ```html <template> <div> @@ -81,3 +82,48 @@ It supports all kinds of weex components as its slides. The `indicator` componen * [Demo of setting scroll event](http://dotwe.org/vue/00aff16c6c1c9e9c1209d2db70b94b24) * [Demo of auto-play with indicator](http://dotwe.org/vue/7c9c0f5cc6e4571a962b8f0cf627fab3) * [Demo Ocean](http://dotwe.org/vue/c851d5fe09e54709a6128dbc5bf74a6e) + +## Rax Example + +`rax-slider` is the component `<slider>` of rax, which can run in web and weex. + +```jsx +import { createElement, Component, render, createRef } from 'rax'; +import View from 'rax-view'; +import Image from 'rax-image'; +import Slider from 'rax-slider'; +import Driver from 'driver-universal'; + +const App = () => { + const handleChange = (idx) { + console.log('change to ', idx); + } + + return ( + <View> + <Slider + className="slider" + width="750" + height="500" + autoPlay + onChange={handleChange} + > + <View style={styles.itemWrap}> + <Image style={styles.image} source={{height: 500, width: 375, uri: '//gw.alicdn.com/tfs/TB19NbqKFXXXXXLXVXXXXXXXXXX-750-500.png'}} /> + </View> + <View style={styles.itemWrap}> + <Image style={styles.image} source={{height: 500, width: 375, uri: '//gw.alicdn.com/tfs/TB1tWYBKFXXXXatXpXXXXXXXXXX-750-500.png'}} /> + </View> + <View style={styles.itemWrap}> + <Image style={styles.image} source={{height: 500, width: 375, uri: '//gw.alicdn.com/tfs/TB1SX_vKFXXXXbyXFXXXXXXXXXX-750-500.png'}} /> + </View> + </Slider> + </View> + ); +} + +render(<App />, document.body, { driver: Driver }); +``` + +[rax-slider doc](https://rax.js.org/docs/components/slider) + diff --git a/docs/docs/components/text.md b/docs/docs/components/text.md index d4ec54a..cb50633 100644 --- a/docs/docs/components/text.md +++ b/docs/docs/components/text.md @@ -80,5 +80,27 @@ Generally speaking, you would meet inconsistent word-break behavior if one of th Developers could add `\uFEFF` namely [ZERO WIDTH NO-BREAK SPACE](http://jkorpela.fi/chars/spaces.html) just after the character with inconsistent word-break behavior to force no-break strategy, ref [demo](http://dotwe.org/vue/88a4b46f0dc1d1f6d82c506f490029ce) to see more detail。`\uFEFF` may not work on all Android ROMs, as some of them may just ignore it. ::: -## Example +## Vue Example * [Basic usage for `<text>`](http://dotwe.org/vue/7d2bf6e112ea26984fd5930663f092e0). + + +## Rax Example + +`rax-text` is the component `<text>` of rax, which can run in web and weex. + +```jsx +import { createElement, render } from 'rax'; +import Driver from "driver-universal"; +import Text from 'rax-text'; + +function App() { + return ( + <Text>Text</Text> + ); +} + +render(<App />, document.body, { driver: Driver }); +``` + +[rax-text doc](https://rax.js.org/docs/components/text) + diff --git a/docs/docs/components/textarea.md b/docs/docs/components/textarea.md index 9843800..89df18f 100644 --- a/docs/docs/components/textarea.md +++ b/docs/docs/components/textarea.md @@ -49,7 +49,7 @@ The difference between `active` and `focus` is that when the cursor is inside th * @param isShow: boolean, showing or hiding the keyboard. * @param keyboardSize: keyboard height in web pixel format. -## Example +## Vue Example ```html <template> @@ -116,3 +116,36 @@ The difference between `active` and `focus` is that when the cursor is inside th * [Demo](http://dotwe.org/vue/a1877866e8b91ffa1e6ea9bc66c200fa) * [Demo of events](http://dotwe.org/vue/2ba8ebc4e6970e1e86725c3e80296e40) * [Demo of binding](http://dotwe.org/vue/d884b0c18891a05d653253c0f0a94bc1) + +## Rax Example + +`rax-textinput` is the component `<textarea>` of rax, which can run in web and weex. + +```jsx +import { createElement, render } from "rax"; +import Driver from 'driver-universal'; +import TextInput from "rax-textinput"; + +function App() { + return ( + <View style={{margin: '20rpx'}}> + <TextInput + multiline={true} + numberOfLines={3} + style={{ + height: '150rpx', + width: '600rpx', + borderWidth: '1rpx', + borderColor: '#dddddd', + borderStyle: 'solid' + }} + /> + </View> + ); +} + +render(<App />, document.body, { driver: Driver }); +``` + +[rax-textinput doc](https://rax.js.org/docs/components/textinput) + diff --git a/docs/docs/components/video.md b/docs/docs/components/video.md index 7917a2e..0a6e919 100644 --- a/docs/docs/components/video.md +++ b/docs/docs/components/video.md @@ -28,7 +28,7 @@ A `text` is the only valid type of child component. * **finish** Triggered when playback state is Finished. * **fail** Triggered when playback state is Failed. -# Example +# Vue Example ```html <template> @@ -81,3 +81,26 @@ A `text` is the only valid type of child component. * [Demo](http://dotwe.org/vue/01d3d27073a471bb234b1a76e130d197) * [Demo of autoplay](http://dotwe.org/vue/342d32830f51f72df6acab21fb1c21bd) * [Demo of controls](http://dotwe.org/vue/7bdf54dce22def3d3850f65d95f5eac9) + +## Rax Example + +`rax-video` is the component `<video>` of rax, which can run in web and weex. + +```jsx +import { createElement, Component, render } from "rax"; +import Video from "rax-video"; +import Driver from "driver-universal"; + +render( + <Video + style={{ width: '750rpx', height: '400rpx' }} + autoPlay + src="https://cloud.video.taobao.com/play/u/2780279213/p/1/e/6/t/1/d/ld/36255062.mp4" + />, + document.body, + { driver: Driver } +); +``` + +[rax-video doc](https://rax.js.org/docs/components/video) + diff --git a/docs/docs/components/waterfall.md b/docs/docs/components/waterfall.md index 93fe2ba..b1d3745 100644 --- a/docs/docs/components/waterfall.md +++ b/docs/docs/components/waterfall.md @@ -49,6 +49,96 @@ common events: check out the [common events](/docs/events/common-events.html) All subcomponents in waterfall support the scrollToElement API in [dom module](../modules/dom.html) -## Example +## Vue Example [waterfall example](http://dotwe.org/vue/7a9195643e9e8da352b0d879cdbe68c0) + +## Rax Example + +`rax-waterfall` is the component `<waterfall>` of rax, which can run in web and weex. + +```jsx +import { createElement, useState, useRef, render } from 'rax'; +import View from 'rax-view'; +import Text from 'rax-text'; +import Driver from "driver-universal" +import RefreshControl from 'rax-refreshcontrol'; +import Waterfall from 'rax-waterfall'; + +const data = [ + { height: 550, item: {} }, + { height: 624, item: {} }, + { height: 708, item: {} }, + { height: 600, item: {} }, + { height: 300, item: {} }, + { height: 100, item: {} }, + { height: 400, item: {} }, + { height: 550, item: {} }, + { height: 624, item: {} }, + { height: 708, item: {} }, + { height: 600, item: {} }, + { height: 300, item: {} }, + { height: 100, item: {} }, + { height: 400, item: {} } +]; + +let App = (props) => { + + let [refreshing, setRefreshing] = useState(false); + let handleRefresh = () => { + if (refreshing) { + return; + } + setRefreshing(true); + setTimeout(() => { + setRefreshing(false); + }, 500); + } + let loadMore = () => { + console.log('load more'); + } + + return ( + <Waterfall + columnWidth={370} + columnCount={2} + columnGap={10} + dataSource={data} + renderHeader={() => { + return [ + <RefreshControl + key="0" + refreshing={refreshing} + onRefresh={handleRefresh}> + <Text>RefreshControl</Text> + </RefreshControl>, + <View key="1" style={{ + height: 100, + backgroundColor: '#efefef', + marginBottom: 10 + }}><Text>Header Mod</Text></View> + ]; + }} + renderFooter={() => { + return <View key="3" style={{width: 750, height: 100, backgroundColor: '#efefef', marginTop: 10}}><Text>Footer Mod</Text></View>; + }} + renderItem={(item, index) => { + return ( + <View style={{ + height: item.height, + backgroundColor: '#efefef', + marginBottom: 10 + }}> + <Text>{index}</Text> + </View> + ); + }} + onEndReached={loadMore} /> + ); +} + +render(<App />, document.body, { driver: Driver }); +``` + +[rax-waterfall doc](https://rax.js.org/docs/components/waterfall) + diff --git a/docs/docs/components/web.md b/docs/docs/components/web.md index a39dac8..26d8668 100644 --- a/docs/docs/components/web.md +++ b/docs/docs/components/web.md @@ -120,6 +120,30 @@ Support **[common styles](../styles/common-styles.html)**. - `<web>` can not have any nested child component. - You can use [webview module](../modules/webview.html) to control `<web>` component, see the [example](http://dotwe.org/vue/a3d902040b79ab38d1ffd753366fb939). -## Examples +## Vue Example - [Browser example](http://dotwe.org/vue/a3d902040b79ab38d1ffd753366fb939) + +## Rax Example + +`rax-embed` is the component `<web>` of rax, which can run in web and weex. + +```jsx +import { createElement, render, Component } from 'rax'; +import Driver from 'driver-universal'; +import Embed from 'rax-embed'; + +function App() { + const urlParam = { + paramOne:123, + paramTwo:456 + }; + return <Embed urlParam={urlParam} src={'http://taobao.com'} + useIframeInWeb={true} style={{ height: 750, width: 750 }} /> +} + +render(<App />, document.body, { driver: Driver }); +``` + +[rax-embed doc](https://rax.js.org/docs/components/embed) + diff --git a/docs/guide/front-end-frameworks.md b/docs/guide/front-end-frameworks.md index 837d08a..1b60988 100644 --- a/docs/guide/front-end-frameworks.md +++ b/docs/guide/front-end-frameworks.md @@ -81,6 +81,8 @@ Please refer to [Use Vue.js in Weex](./use-vue-in-weex.html) document to learn m ## Rax -Rax is a front-end framework with React-compatible APIs. +Rax is a front-end framework with React-compatible APIs.Please refer to [Rax's official website](https://alibaba.github.io/rax/) to get more information. -Please refer to [Rax's official website](https://alibaba.github.io/rax/) to get more information. +::: tip +Please refer to [Use Rax in Weex](./use-rax-in-weex.html) document to learn more technics about Weex and Rax. +::: diff --git a/docs/guide/images/vue-rax.png b/docs/guide/images/vue-rax.png index 1e6e57e..a748fd6 100644 Binary files a/docs/guide/images/vue-rax.png and b/docs/guide/images/vue-rax.png differ diff --git a/docs/zh/docs/components/a.md b/docs/zh/docs/components/a.md index e29aa7d..0f714b7 100644 --- a/docs/zh/docs/components/a.md +++ b/docs/zh/docs/components/a.md @@ -30,7 +30,7 @@ `click` 事件的回调函数和 `href` 跳转的执行顺序**未被定义**,**不要**使用 `click` 来进行 `href` 跳转前的逻辑处理。 ::: -## 示例 +## Vue 示例 ```Html <a href="http://emas-ha-remote-log-poc.oss-cn-beijing.aliyuncs.com/eweex/app/biz-docs-com-mod/upload/271ccdca-db41-423d-981c-c7c6751ba479/show_1.js"> @@ -39,3 +39,24 @@ ``` [示例](http://dotwe.org/vue/3b789771e48be92a70bd682f084b84b5) + + +## Rax 示例 + +`rax-link` 是 `<a>` 组件的上层封装,抹平了 Web 和 Weex 的展现 + +```jsx +import { createElement, render } from 'rax'; +import Driver from "driver-universal"; +import Link from 'rax-link'; +import Text from 'rax-text'; + +function App() { + return <Link href={"//www.google.com"} onPress={(e)=>{console.log(e)}}> + <Text>点击跳转</Text> + </Link> +} +``` + +[rax-link 文档](https://rax.js.org/docs/components/link) + diff --git a/docs/zh/docs/components/cell.md b/docs/zh/docs/components/cell.md index e2da8a8..1d484d4 100644 --- a/docs/zh/docs/components/cell.md +++ b/docs/zh/docs/components/cell.md @@ -10,7 +10,6 @@ Cell 支持添加任意类型的组件作为自己的子组件,但是请不要 ## 属性 -* **keep-scroll-position** boolean. 控制当 Cell 被添加到列表中时,列表的滚动位置是否要保持不变。 * **insert-animation** string, cell 的插入动画。当前只支持 `none` 和 `default`。 * **delete-animation** string, cell 的删除动画。当前只支持 `none` 和 `default`。 @@ -30,8 +29,23 @@ Cell 支持添加任意类型的组件作为自己的子组件,但是请不要 * **通用事件**. 参见[通用事件](../events/common-events.html) -## 示例 +## Vue 示例 Cell 的例子请参考 * [list](./list.html) * [waterfall](./waterfall.html) + +## Rax 示例 + +Rax 中 cell 是 `rax-recyclerview` 提供的子组件,使用方式如下 + +```jsx +import RecyclerView from 'rax-recyclerview'; +``` + +```jsx +<RecyclerView.Cell>{...}</RecyclerView.Cell> +``` + +[rax-recyclerview 文档](https://rax.js.org/docs/components/recyclerview) + diff --git a/docs/zh/docs/components/div.md b/docs/zh/docs/components/div.md index 382a270..00eb069 100644 --- a/docs/zh/docs/components/div.md +++ b/docs/zh/docs/components/div.md @@ -21,3 +21,28 @@ ## 事件 * **通用事件** 支持所有[通用事件](../events/common-events.html)。 + +## Rax 示例 + +`rax-view` 是 `<div>` 组件的上层封装,抹平了 Web 和 Weex 的展现 + +```jsx +import { createElement, render } from 'rax'; +import Driver from "driver-universal"; +import View from "rax-view"; + +function App() { + return <View + style={{ + width: '200rpx', + height: '200rpx', + backgroundColor: '#222831', + }} + />; +} + +render(<App />, document.body, { driver: Driver }); +``` + +[rax-view 文档](https://rax.js.org/docs/components/view) + diff --git a/docs/zh/docs/components/image.md b/docs/zh/docs/components/image.md index 56a805e..b7a159a 100644 --- a/docs/zh/docs/components/image.md +++ b/docs/zh/docs/components/image.md @@ -160,7 +160,36 @@ export default { 参见[完整示例](http://dotwe.org/vue/94de9307517240dec066d2ea57fe54a0)。 -## 示例 +## Vue 示例 * [Base64 示例](http://dotwe.org/vue/ba477790c85ea12bbf7ad3a5f0885b5c) -* [Lazy load image 示例](http://dotwe.org/vue/b0b146e4e6fa4890f800e18cb950f803) \ No newline at end of file +* [Lazy load image 示例](http://dotwe.org/vue/b0b146e4e6fa4890f800e18cb950f803) + +## Rax 示例 + +`rax-image` 是 `<image>` 组件的上层封装,抹平了 Web 和 Weex 的展现 + +```jsx +import { createElement, render } from 'rax'; +import Driver from "driver-universal"; +import Image from 'rax-image'; + +const App = () => { + return ( + <Image + source={{ + uri: 'https://gw.alicdn.com/tfs/TB1bBD0zCzqK1RjSZFpXXakSXXa-68-67.png', + }} + style={{ + height: '68rpx', + width: '67rpx' + }} + /> + ); +}; + +render(<App />, document.body, { driver: Driver }); +``` + +[rax-image 文档](https://rax.js.org/docs/components/image) + diff --git a/docs/zh/docs/components/indicator.md b/docs/zh/docs/components/indicator.md index daaea72..7a57676 100644 --- a/docs/zh/docs/components/indicator.md +++ b/docs/zh/docs/components/indicator.md @@ -22,6 +22,6 @@ 无事件 -## 示例 +## Vue 示例 请参考 [slider](./slider.html) diff --git a/docs/zh/docs/components/input.md b/docs/zh/docs/components/input.md index 1ced9ad..4a5dc7a 100644 --- a/docs/zh/docs/components/input.md +++ b/docs/zh/docs/components/input.md @@ -126,7 +126,7 @@ placeholder 字符颜色。默认值是 `#999999` 目前不支持 this.$el(id).value = '' 这种方式改写 input value。只支持在 `<input>` 组件的 input、change 事件中改写。 ::: -## 示例 +## Vue 示例 - [input标签使用及事件处理 demo](http://dotwe.org/vue/c2c9a853e5184d8ade57d1d93432f31f) @@ -138,3 +138,24 @@ placeholder 字符颜色。默认值是 `#999999` * [其他示例集合](http://dotwe.org/vue/aec5342b15d3c01b3b427384a71b0874) <IPhoneImg imgSrc="https://img.alicdn.com/tfs/TB10jc9nVzqK1RjSZFvXXcB7VXa-297-479.png" /> + +## Rax 示例 + +`rax-textinput` 是 `<textarea>` 组件的上层封装,抹平了 Web 和 Weex 的展现 + +```jsx +import { createElement, render } from "rax"; +import Driver from 'driver-universal'; +import TextInput from "rax-textinput"; + +function App() { + return ( + <TextInput autoFocus={true} /> + ); +} + +render(<App />, document.body, { driver: Driver }); +``` + +[rax-textinput 文档](https://rax.js.org/docs/components/textinput) + diff --git a/docs/zh/docs/components/list.md b/docs/zh/docs/components/list.md index f035ef6..85ad2bc 100644 --- a/docs/zh/docs/components/list.md +++ b/docs/zh/docs/components/list.md @@ -107,8 +107,88 @@ 滚动到列表某个指定项是常见需求,`<list>` 拓展了该功能,可通过 `dom.scrollToElement()` 滚动到指定 `<cell>`。更多信息可参考 [dom module](/docs/modules/dom.html)。 相应的 demo 可参考 [<scroller> 示例](http://dotwe.org/vue/014c0dc53edf7320df7701ebf7c0b2be)中的实现。 -## 示例 +## Vue 示例 [简单示例](http://dotwe.org/vue/c9ab413141713d5c7ea3e5083eb4dbd1) [滑动加载](http://dotwe.org/vue/f188936d60c6ca45d342d34f0659a2be) [头部示例](http://dotwe.org/vue/b66212f9779e20f456ba48ab91fd199f) [cell appear事件](http://dotwe.org/vue/b9e8186c38641f41a7bb1785b3d3fa92) + +## Rax 示例 + +`rax-recyclerview` 是 `<list>` 组件的上层封装,抹平了 Web 和 Weex 的展现 + +```jsx +import { createElement, Component, render } from 'rax'; +import View from 'rax-view'; +import Text from 'rax-text'; +import Driver from "driver-universal" +import RecyclerView from 'rax-recyclerview'; + +function Thumb() { + return ( + <RecyclerView.Cell> + <View style={styles.button}> + <View style={styles.box} /> + </View> + </RecyclerView.Cell> + ); +} +let THUMBS = []; +for (let i = 0; i < 20; i++) THUMBS.push(i); +let createThumbRow = (val, i) => <Thumb key={i} />; + +function App() { + return ( + <View style={styles.root}> + <View style={styles.container}> + <RecyclerView + style={{ + height: 500 + }}> + <RecyclerView.Header> + <Text>Sticky view is not header</Text> + </RecyclerView.Header> + <RecyclerView.Header> + <View style={styles.sticky}> + <Text>Sticky view must in header root</Text> + </View> + </RecyclerView.Header> + {THUMBS.map(createThumbRow)} + </RecyclerView> + </View> + </View> + ); +} + +let styles = { + root: { + width: '750rpx', + }, + container: { + padding: '20rpx', + borderStyle: 'solid', + borderColor: '#dddddd', + borderWidth: '1rpx', + marginLeft: '20rpx', + height: '1000rpx', + marginRight: '20rpx', + marginBottom: '10rpx', + }, + button: { + margin: '7rpx', + padding: '5rpx', + alignItems: 'center', + backgroundColor: '#eaeaea', + borderRadius: '3rpx', + }, + box: { + width: '64rpx', + height: '64rpx', + } +}; + +render(<App />, document.body, { driver: Driver }); +``` + +[rax-recyclerview 文档](https://rax.js.org/docs/components/recyclerview) + diff --git a/docs/zh/docs/components/loading.md b/docs/zh/docs/components/loading.md index 050ac78..259801d 100644 --- a/docs/zh/docs/components/loading.md +++ b/docs/zh/docs/components/loading.md @@ -44,6 +44,6 @@ </loading> ``` -## 示例 +## Vue 示例 [基本用法](http://dotwe.org/vue/1c303ff427e3a92fc8ef5846c00b35e5) <IPhoneImg imgSrc="https://img.alicdn.com/tfs/TB1QYo8n9zqK1RjSZFpXXakSXXa-1242-2208.png" /> diff --git a/docs/zh/docs/components/refresh.md b/docs/zh/docs/components/refresh.md index bdded90..0287e1e 100644 --- a/docs/zh/docs/components/refresh.md +++ b/docs/zh/docs/components/refresh.md @@ -48,6 +48,67 @@ </refresh> ``` -## 示例 +## Vue 示例 [基本用法](http://dotwe.org/vue/fccb7c6b9a9f4b7b1f3f7518344cf1bb) -<IPhoneImg imgSrc="https://img.alicdn.com/tfs/TB1EMM7nYvpK1RjSZPiXXbmwXXa-1242-2208.png" /> \ No newline at end of file +<IPhoneImg imgSrc="https://img.alicdn.com/tfs/TB1EMM7nYvpK1RjSZPiXXbmwXXa-1242-2208.png" /> + +## Rax 示例 + +`rax-refreshcontrol` 是 `<refresh>` 组件的上层封装,提供了 Weex 下拉刷新能力 + +```jsx +import { createElement, Component, render } from 'rax'; +import View from 'rax-view'; +import Text from 'rax-text'; +import Driver from 'driver-universal'; +import RecyclerView from 'rax-recyclerview'; +import RefreshControl from 'rax-refreshcontrol'; + +class RefreshControlDemo extends Component { + state = { + isRefreshing: false, + loaded: 0, + refreshText: '↓ Pull To Refresh' + }; + + handleRefresh = (e) => { + this.setState({ + isRefreshing: true, + refreshText: 'Refreshing', + }); + setTimeout(() => { + // update Data + this.setState({ + isRefreshing: false, + refreshText: '↓ Pull To Refresh', + }); + }, 1000); + }; + + render() { + return ( + <View> + <RecyclerView + refreshControl={null}> + <RefreshControl + refreshing={this.state.isRefreshing} + onRefresh={this.handleRefresh} + > + <Text>{this.state.refreshText}</Text> + </RefreshControl> + <RecyclerView.Cell> + <View> + <Text>this is list</Text> + </View> + </RecyclerView.Cell> + </RecyclerView> + </View> + ); + } +} + +render(<RefreshControlDemo/>, document.body, { driver: Driver }); +``` + +[rax-refreshcontrol 文档](https://rax.js.org/docs/components/refreshcontrol) + diff --git a/docs/zh/docs/components/richtext.md b/docs/zh/docs/components/richtext.md index 14e8a39..34e33cb 100644 --- a/docs/zh/docs/components/richtext.md +++ b/docs/zh/docs/components/richtext.md @@ -74,6 +74,6 @@ * `a`标签设置了pseudo-ref。此时itemclick事件会被触发,并且携带pseudo-ref的值。**此时 `a` 标签的无效。**。[示例](http://editor.weex.io/p/sunshl/Contribute/commit/b21e1133830b48767c6d00d712e415b2) * 若多个嵌套节点上均包含 `itemclick` 事件,则只有最外层节点上的 `itemclick` 会被触发 -## 示例 +## Vue 示例 [示例](http://dotwe.org/vue/8a817e1acb46c2910caf1b53b8016a48) diff --git a/docs/zh/docs/components/scroller.md b/docs/zh/docs/components/scroller.md index ed1e287..649769a 100644 --- a/docs/zh/docs/components/scroller.md +++ b/docs/zh/docs/components/scroller.md @@ -104,7 +104,7 @@ - `options {Object}`:可选项,属性为: - `offset {number}`:一个到其可见位置的偏移距离,默认是 0 -## 示例 +## Vue 示例 - [scrollerstart 事件](http://dotwe.org/vue/6e3c7fb21976e80c2959f330ddd1b26a) - [设置 scroller 事件触发频率](http://dotwe.org/vue/d896b0896293ec55c209729fdfc7bff2) @@ -119,3 +119,64 @@ - [聊天窗口](http://dotwe.org/vue/21d8b0a79c20e95139353d9cc8b634f5),页面局部可滚动,底部输入框不可滚动。 <IPhoneImg imgSrc="https://img.alicdn.com/tfs/TB11_g_n7voK1RjSZPfXXXPKFXa-264-439.gif" /> + +## Rax 示例 + +`rax-scrollview` 是 `<scroller>` 组件的上层封装,抹平了 Web 和 Weex 的展现 + +```jsx +import { createElement, render } from 'rax'; +import Driver from "driver-universal" +import View from 'rax-view'; +import ScrollView from 'rax-scrollview'; + +function Thumb() { + return ( + <View style={styles.button}> + <View style={styles.box} /> + </View> + ); +} + +let THUMBS = []; +for (let i = 0; i < 20; i++) THUMBS.push(i); +let createThumbRow = (val, i) => <Thumb key={i} />; + +function App () { + return ( + <View style={{ ...styles.container, ...{ height: 500 } }}> + <ScrollView> + {THUMBS.map(createThumbRow)} + </ScrollView> + </View> + ); +} + +let styles = { + container: { + padding: 20, + borderStyle: 'solid', + borderColor: '#dddddd', + borderWidth: 1, + marginLeft: 20, + marginRight: 20, + marginBottom: 10, + }, + button: { + margin: 7, + padding: 5, + alignItems: 'center', + backgroundColor: '#eaeaea', + borderRadius: 3, + }, + box: { + width: 64, + height: 64, + } +}; + +render(<App />, document.body, { driver: Driver }); +``` + +[rax-scrollview 文档](https://rax.js.org/docs/components/scrollview) + diff --git a/docs/zh/docs/components/slider.md b/docs/zh/docs/components/slider.md index 1bbe1eb..6dc054e 100644 --- a/docs/zh/docs/components/slider.md +++ b/docs/zh/docs/components/slider.md @@ -30,7 +30,7 @@ Slider 组件用于在一个页面中展示多个图片,在前端这种效果 * **change** 当轮播索引改变时,触发该事件。该事件给前端的参数中含有 `index`表示当前切换到的序号。 * **scroll** 列表发生滚动时将会触发该事件。在参数中有 `offsetXRatio`,它表示当前图片偏移的比率,取值范围是 [-1, 1]。负值表示当前图片向左滑,正值表示向右划。比如 -0.2 表示当前图片向左滑,并且有 20% 的区域超出了容器边缘。 -## 示例 +## Vue 示例 ```html <template> <div> @@ -81,3 +81,48 @@ Slider 组件用于在一个页面中展示多个图片,在前端这种效果 * [滚动事件示例](http://dotwe.org/vue/00aff16c6c1c9e9c1209d2db70b94b24) * [自动播放和indicator示例](http://dotwe.org/vue/7c9c0f5cc6e4571a962b8f0cf627fab3) * [Ocean示例](http://dotwe.org/vue/c851d5fe09e54709a6128dbc5bf74a6e) + +## Rax 示例 + +`rax-slider` 是 `<slider>` 组件的上层封装,抹平了 Web 和 Weex 的展现 + +```jsx +import { createElement, Component, render, createRef } from 'rax'; +import View from 'rax-view'; +import Image from 'rax-image'; +import Slider from 'rax-slider'; +import Driver from 'driver-universal'; + +const App = () => { + const handleChange = (idx) { + console.log('change to ', idx); + } + + return ( + <View> + <Slider + className="slider" + width="750" + height="500" + autoPlay + onChange={handleChange} + > + <View style={styles.itemWrap}> + <Image style={styles.image} source={{height: 500, width: 375, uri: '//gw.alicdn.com/tfs/TB19NbqKFXXXXXLXVXXXXXXXXXX-750-500.png'}} /> + </View> + <View style={styles.itemWrap}> + <Image style={styles.image} source={{height: 500, width: 375, uri: '//gw.alicdn.com/tfs/TB1tWYBKFXXXXatXpXXXXXXXXXX-750-500.png'}} /> + </View> + <View style={styles.itemWrap}> + <Image style={styles.image} source={{height: 500, width: 375, uri: '//gw.alicdn.com/tfs/TB1SX_vKFXXXXbyXFXXXXXXXXXX-750-500.png'}} /> + </View> + </Slider> + </View> + ); +} + +render(<App />, document.body, { driver: Driver }); +``` + +[rax-slider 文档](https://rax.js.org/docs/components/slider) + diff --git a/docs/zh/docs/components/text.md b/docs/zh/docs/components/text.md index 55503d3..1ee769f 100644 --- a/docs/zh/docs/components/text.md +++ b/docs/zh/docs/components/text.md @@ -82,6 +82,27 @@ word-break 行为是不可预测的且与 Android ROM 强相关。事实上,wo 开发者可通过在意外换行处添加 `\uFEFF` 即 [ZERO WIDTH NO-BREAK SPACE](http://jkorpela.fi/chars/spaces.html) 以触发**强制不换行**,详细用法可参考[demo](http://dotwe.org/vue/88a4b46f0dc1d1f6d82c506f490029ce)。请注意这个方法**无法**保证在所有 Android ROM 上有效,一些 ROM 会忽略 *ZERO WIDTH NO-BREAK SPACE* 指令。 ::: -## 示例 +## Vue 示例 * [`<text>`的基本用法](http://dotwe.org/vue/7d2bf6e112ea26984fd5930663f092e0) + +## Rax 示例 + +`rax-text` 是 `<text>` 组件的上层封装,抹平了 Web 和 Weex 的展现 + +```jsx +import { createElement, render } from 'rax'; +import Driver from "driver-universal"; +import Text from 'rax-text'; + +function App() { + return ( + <Text>Text</Text> + ); +} + +render(<App />, document.body, { driver: Driver }); +``` + +[rax-text 文档](https://rax.js.org/docs/components/text) + diff --git a/docs/zh/docs/components/textarea.md b/docs/zh/docs/components/textarea.md index ca3bed7..d41ff74 100644 --- a/docs/zh/docs/components/textarea.md +++ b/docs/zh/docs/components/textarea.md @@ -50,7 +50,7 @@ * @param isShow: boolean, 显示或隐藏键盘。 * @param keyboardSize: 键盘的高度,以前端使用的样式单位返回。 -## 示例 +## Vue 示例 ```html <template> @@ -117,3 +117,36 @@ * [示例](http://dotwe.org/vue/a1877866e8b91ffa1e6ea9bc66c200fa) * [事件示例](http://dotwe.org/vue/2ba8ebc4e6970e1e86725c3e80296e40) * [绑定示例](http://dotwe.org/vue/d884b0c18891a05d653253c0f0a94bc1) + +## Rax 示例 + +`rax-textinput` 是 `<textarea>` 组件的上层封装,抹平了 Web 和 Weex 的展现 + +```jsx +import { createElement, render } from "rax"; +import Driver from 'driver-universal'; +import TextInput from "rax-textinput"; + +function App() { + return ( + <View style={{margin: '20rpx'}}> + <TextInput + multiline={true} + numberOfLines={3} + style={{ + height: '150rpx', + width: '600rpx', + borderWidth: '1rpx', + borderColor: '#dddddd', + borderStyle: 'solid' + }} + /> + </View> + ); +} + +render(<App />, document.body, { driver: Driver }); +``` + +[rax-textinput 文档](https://rax.js.org/docs/components/textinput) + diff --git a/docs/zh/docs/components/video.md b/docs/zh/docs/components/video.md index c1f03c7..f85bb59 100644 --- a/docs/zh/docs/components/video.md +++ b/docs/zh/docs/components/video.md @@ -28,7 +28,7 @@ Video 组件用于在页面中嵌入视频内容。 * **finish** 当 playback 的状态是 Finished 时触发。 * **fail** 当 playback 状态是 Failed 时触发。 -# 示例 +# Vue 示例 ```html <template> @@ -80,4 +80,27 @@ Video 组件用于在页面中嵌入视频内容。 ``` * [示例](http://dotwe.org/vue/01d3d27073a471bb234b1a76e130d197) * [自动播放示例](http://dotwe.org/vue/342d32830f51f72df6acab21fb1c21bd) -* [手动控制示例](http://dotwe.org/vue/7bdf54dce22def3d3850f65d95f5eac9) \ No newline at end of file +* [手动控制示例](http://dotwe.org/vue/7bdf54dce22def3d3850f65d95f5eac9) + +## Rax 示例 + +`rax-video` 是 `<video>` 组件的上层封装,抹平了 Web 和 Weex 的展现 + +```jsx +import { createElement, Component, render } from "rax"; +import Video from "rax-video"; +import Driver from "driver-universal"; + +render( + <Video + style={{ width: '750rpx', height: '400rpx' }} + autoPlay + src="https://cloud.video.taobao.com/play/u/2780279213/p/1/e/6/t/1/d/ld/36255062.mp4" + />, + document.body, + { driver: Driver } +); +``` + +[rax-video 文档](https://rax.js.org/docs/components/video) + diff --git a/docs/zh/docs/components/waterfall.md b/docs/zh/docs/components/waterfall.md index 374aa92..a1e3ebd 100644 --- a/docs/zh/docs/components/waterfall.md +++ b/docs/zh/docs/components/waterfall.md @@ -60,7 +60,7 @@ - appear:用于监听子组件出现事件(一般绑定于子组件之上例如:监听最后一个元素出现,加载新的数据) - disappear:用于监听子组件滑出屏幕事件(一般绑定于子组件之上) -## 示例 +## Vue 示例 [体验示例](http://dotwe.org/vue/c2d4c7b54d92ac83bb2024ebbf3ccf92) 上述示例使用了4种子组件,同时点击不同的单元格,可体验 `<waterfall>` 不同属性间的区别。 @@ -71,3 +71,94 @@ <IPhoneImg imgSrc="https://img.alicdn.com/tfs/TB1iEk9nVzqK1RjSZFCXXbbxVXa-544-960.gif" /> + +## Rax 示例 + +`rax-waterfall` 是 `<waterfall>` 组件的上层封装,抹平了 Web 和 Weex 的展现 + +```jsx +import { createElement, useState, useRef, render } from 'rax'; +import View from 'rax-view'; +import Text from 'rax-text'; +import Driver from "driver-universal" +import RefreshControl from 'rax-refreshcontrol'; +import Waterfall from 'rax-waterfall'; + +// 数据需要指定高度 +const data = [ + { height: 550, item: {} }, + { height: 624, item: {} }, + { height: 708, item: {} }, + { height: 600, item: {} }, + { height: 300, item: {} }, + { height: 100, item: {} }, + { height: 400, item: {} }, + { height: 550, item: {} }, + { height: 624, item: {} }, + { height: 708, item: {} }, + { height: 600, item: {} }, + { height: 300, item: {} }, + { height: 100, item: {} }, + { height: 400, item: {} } +]; + +let App = (props) => { + + let [refreshing, setRefreshing] = useState(false); + let handleRefresh = () => { + if (refreshing) { + return; + } + setRefreshing(true); + setTimeout(() => { + setRefreshing(false); + }, 500); + } + let loadMore = () => { + console.log('load more'); + } + + return ( + <Waterfall + columnWidth={370} + columnCount={2} + columnGap={10} + dataSource={data} + renderHeader={() => { + return [ + <RefreshControl + key="0" + refreshing={refreshing} + onRefresh={handleRefresh}> + <Text>RefreshControl</Text> + </RefreshControl>, + <View key="1" style={{ + height: 100, + backgroundColor: '#efefef', + marginBottom: 10 + }}><Text>Header Mod</Text></View> + ]; + }} + renderFooter={() => { + return <View key="3" style={{width: 750, height: 100, backgroundColor: '#efefef', marginTop: 10}}><Text>Footer Mod</Text></View>; + }} + renderItem={(item, index) => { + return ( + <View style={{ + height: item.height, + backgroundColor: '#efefef', + marginBottom: 10 + }}> + <Text>{index}</Text> + </View> + ); + }} + onEndReached={loadMore} /> + ); +} + +render(<App />, document.body, { driver: Driver }); +``` + +[rax-waterfall 文档](https://rax.js.org/docs/components/waterfall) + diff --git a/docs/zh/docs/components/web.md b/docs/zh/docs/components/web.md index 4ff8120..3dc41cf 100644 --- a/docs/zh/docs/components/web.md +++ b/docs/zh/docs/components/web.md @@ -82,8 +82,32 @@ <style></style> ``` -## 示例 +## Vue 示例 * [体验示例](http://dotwe.org/vue/9f8a7be89a4ad881ff515145cc9306ea) 上述示例监听了 pagestart、pagefinish 及 error 事件,同时使用了 [webview module](../modules/webview.html) 提供的 API。 + +## Rax 示例 + +`rax-embed` 是 `<web>` 组件的上层封装,抹平了 Web 和 Weex 的展现 + +```jsx +import { createElement, render, Component } from 'rax'; +import Driver from 'driver-universal'; +import Embed from 'rax-embed'; + +function App() { + const urlParam = { + paramOne:123, + paramTwo:456 + }; + return <Embed urlParam={urlParam} src={'http://taobao.com'} + useIframeInWeb={true} style={{ height: 750, width: 750 }} /> +} + +render(<App />, document.body, { driver: Driver }); +``` + +[rax-embed 文档](https://rax.js.org/docs/components/embed) + diff --git a/docs/zh/guide/front-end-frameworks.md b/docs/zh/guide/front-end-frameworks.md index b6e0df3..4f2d57c 100644 --- a/docs/zh/guide/front-end-frameworks.md +++ b/docs/zh/guide/front-end-frameworks.md @@ -81,3 +81,7 @@ Weex 从 [v0.10.0](https://github.com/alibaba/weex/releases/tag/v0.10.0)(发 ## Rax Rax 是一个兼容 React 接口的前端框架,请参考 [Rax 的官方网站](https://alibaba.github.io/rax/) 来获得更多信息。 + +::: tip +关于在 Weex 中使用 Rax 的技巧请参阅: [《在 Weex 中使用 Rax》](./use-rax-in-weex.html)。 +::: \ No newline at end of file diff --git a/docs/zh/guide/images/vue-rax.png b/docs/zh/guide/images/vue-rax.png index 1e6e57e..a748fd6 100644 Binary files a/docs/zh/guide/images/vue-rax.png and b/docs/zh/guide/images/vue-rax.png differ diff --git a/docs/zh/guide/introduction.md b/docs/zh/guide/introduction.md index f5b0ae0..b77cfe0 100644 --- a/docs/zh/guide/introduction.md +++ b/docs/zh/guide/introduction.md @@ -15,7 +15,7 @@ Weex 渲染引擎与 DSL 语法层是分开的,Weex 并不强依赖任何特 想初步了解 Weex 其实非常简单。 * 安装 [Weex Playground](https://weex.apache.org/zh/guide/playground.html). 在 Playground 里,你可以打开各种示例。 -* 访问 [Online Editor](http://dotwe.org/vue). 在这个网站上,你可以浏览、修改、新建各种基于 Vue.js 的[单页面]((https://vuejs.org/v2/guide/single-file-components.html))例子,并用 WeexPlayground 应用扫码查看实时效果。 +* 访问 [Online Editor](http://dotwe.org/vue). 在这个网站上,你可以浏览、修改、新建各种基于 Vue.js 的[单页面](https://vuejs.org/v2/guide/single-file-components.html)例子,并用 WeexPlayground 应用扫码查看实时效果。 ::: tip 尽管 Weex Playground 是 Apache Weex 的一部分,但 Online Editor 不是。 diff --git a/docs/zh/guide/use-rax-in-weex.md b/docs/zh/guide/use-rax-in-weex.md index a110a7c..8f2e735 100644 --- a/docs/zh/guide/use-rax-in-weex.md +++ b/docs/zh/guide/use-rax-in-weex.md @@ -1,3 +1,224 @@ # 在 Weex 中使用 Rax > **Rax 是一个兼容 React 接口的前端框架,请访问 [Rax 的官方网站](https://alibaba.github.io/rax/) > 了解更多信息。** + +[[toc]] + +在 WeexSDK [v0.10.0](https://github.com/alibaba/weex/releases/tag/v0.10.0) (发布于 2016 年 2 月 17 日)以及后续的版本中,集成了 v2 版本的 Vue.js。Vue 是一套构建用户界面的渐进式框架,详情请参阅其[官方网站](https://cn.vuejs.org/)。 + +> 如果没有特别指示,文章中的 "Vue.js" 或者 "Vue" 都指的是 v2 版本的 Vue。 + +## 什么是 Rax + +如果你习惯于 React 的书写方式,欢迎使用 Rax,Rax 是一款超轻量,高性能,易上手的前端解决方案。 +一次开发多端运行,同时支持 Weex Web 小程序等不同端。 + +## 环境变量 + +Weex 提供 WXEnvironment 用来获取 Weex 运行的环境变量,Rax 页面可以通过 WXEnvironment 访问。 +提供字段如下: + +* platform (String) Current running platform, could be "Android", "iOS" or "Web". +* weexVersion (String) The version of Weex SDK. +* appName (String) Mobile app name or browser name. +* appVersion (String) The version of current app. +* osName (String) The OS name, could be "Android" or "iOS". +* osVersion (String) The version of current OS. +* deviceModel (String) Mobile phone device model. (native only) +* deviceWidth (Number) Screen resolution width. +* deviceHeight (Number) Screen resolution height. + +Rax 环境中的全局变量 Weex 在 WeexSDK 0.15 版本之后提供 + +## Weex Rax Framework + +Native 和 Web 天生就有很多差异,为了让开发者有更好的体验,大部分的差异是不需要让开发者去关心的。因此 Native 端通过 Framework 模拟出了大量 Web 端的标准全局 API。 + +常用 API 包括 + + +| W3C API ||||| +| -- | -- | -- | -- | -- | +| name | closed | atob | btoa | performance | +| document | location | navigator | screen | devicePixelRatio | +| fetch | setTimeout | clearTimeout | setInterval | clearInterval | +| requestAnimationFrame | cancelAnimationFrame | alert | open | close | +| postMessage | addEventListener | removeEventListener | dispatchEvent | onerror | +| Promise | Symbol | Map | Set | WeakMap | +| WeakSet | Headers | Response | Request | XMLHttpRequest | +| URL | URLSearchParams | FontFace | WebSocket | Event | +| CustomEvent | matchMedia | | | | + +其中部分实现依赖 Weex Module 能力 + +* fetch 使用 @weex-module/stream +* setTimeout 使用 @weex-module/timer +* clearTimeout 使用 @weex-module/timer +* setInterval 使用 @weex-module/timer +* clearInterval 使用 @weex-module/timer +* requestAnimationFrame 使用 @weex-module/timer +* cancelAnimationFrame 使用 @weex-module/timer +* alert 使用 @weex-module/modal +* open 使用 @weex-module/navigator +* close 使用 @weex-module/navigator +* postMessage 使用 BroadcastChannel 能力 +* addEventListener 跨页面监听使用 BroadcastChannel 能力,页面内监听使用内部的 Emitter +* onerror 使用 @weex-module/globalEvent + +模块规范 +| API | 描述 | +| -- | -- | +| define | 组件定义 | +| require | 组件依赖,支持 Rax 组件与 Weex 原生模块,注意 Weex 模块需要以 @weex-module/ 开头 | + +其他 API + +| API | 描述 | +| -- | -- | +| `__weex_document__` | createInstanceContext 过程中创建的 Document 实例 | +| `__weex_module_supports__` | weex.isRegisteredModule | +| `__weex_tag_supports__` | weex.isRegisteredComponent | +| `__weex_define__` | 组件定义 | +| `__weex_require__` | 组件依赖,支持 Rax 组件与 Weex 原生模块,注意 Weex 模块需要以 |@weex-module/ 开头 +| `__weex_downgrade__` | 页面降级方法,依赖 @weex-module/instanceWrap | +| `__weex_env__` | WXEnvironment | +| `__weex_options__` | 创建 Instance 所传递的参数 | +| `__weex_data__` | 创建 Instance 所传递的数据 | +| `__weex_config__` | 同 __weex_options__ | + +## 样式支持 + +Rax 样式在 Weex 端与 Weex 所提供能力相同,并无额外扩展样式。 + +## 使用组件 + +Rax 的基础组件内部实现抹平了各端的差异,在 Weex 端的实现是Weex 提供的基础组件。例如 rax-view 的实现是 div,rax-text 的实现是 text。 + +Rax 基础组件会将所有属性向下透传,并对核心逻辑进行多端的兼容。 +示例: + +```jsx +<list loadmoreoffset={...}> + ... +</list> +``` + +Weex 组件与 Rax 混用 + +```jsx +<View> + <text>Hello Rax</text> +</View> +``` + +## 使用 Weex 模块 + +Rax 提供了多端兼容的 API [universal-api](https://rax.js.org/docs/api/introduce)。 +但在某些特殊场景下,如果向自己引用原生模块的方法,可以按照如下方式使用 + +以 Weex Dom 模块为例 + +```jsx +let dom = require('@weex-module/dom'); +dom.scrollToElement(someNode, { + offset: 20, +}); +``` + +或 + +```jsx +let dom = __weex_require__('@weex-module/dom'); +dom.scrollToElement(someNode, { + offset: 20, +}); +``` + +## 页面降级 + +Rax 页面降级可以使用 Weex Module @weex-module/instanceWrap, +也可以使用更方便的辅助工具 @weex-project/downgrade + +Rax Framework 中也提供了全局的降级方法 `__weex_downgrade__` 方便开发者使用 + +## 事件 + +组件通用事件与 Weex 通用事件相同,Rax 中需要以 on 开头驼峰方式命名 + +```jsx +<View onClick={() => {}}> + ... +</View> +``` + +页面事件,需要通过 setNativeProps API 手动向 body 节点绑定 + +```jsx +let bodyProps = { + onViewAppear: () => {}, + onViewDisAppear: () => {} +}; +let weexDocument = typeof __weex_document__ === 'object' ? __weex_document__ : typeof document === 'object' ? document : {}; +if (weexDocument && weexDocument.body) { + setNativeProps(findDOMNode(weexDocument.body), bodyProps); +} +``` + +事件冒泡 + +```jsx +let bodyProps = { + bubble: true, +}; +let weexDocument = typeof __weex_document__ === 'object' ? __weex_document__ : typeof document === 'object' ? document : {}; +if (weexDocument && weexDocument.body) { + setNativeProps(findDOMNode(weexDocument.body), bodyProps); +} +``` + +阻止冒泡 + +```jsx +<View onClick={(event) => { + event.stopPropagation(); +}}> + ... +</View> +``` + +## 事件通信 + +Weex 提供了页面间通信的能力 BroadcastChannel(weex v0.9+), Rax 页面中可以通过 Window 的全局方法进行通信。 + +### 页面间通信 + +页面 A 发送消息 + +```jsx +window.postMessage('{hello:1}', '*'); +``` + +页面 B 接收消息 + +```jsx +window.addEventListener('message', (e) => { + console.log('data is', e.data); +}); +``` + +### 页面内消息广播 + +页面内发送消息 + +```jsx +window.dispatchEvent(new CustomEvent('eventName', { detail: 1 })); +``` + +页面内接收消息 + +```jsx +window.addEventListener('eventName', (event) => { + const {detail} = event; + // 业务逻辑 +}); +```