http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/v-0.10/references/modules/dom.md ---------------------------------------------------------------------- diff --git a/doc/source/v-0.10/references/modules/dom.md b/doc/source/v-0.10/references/modules/dom.md deleted file mode 100644 index 948abf0..0000000 --- a/doc/source/v-0.10/references/modules/dom.md +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: dom -type: references -order: 3.3 -version: 0.10 ---- - -# dom - -## Summary - -A series of dom apis that sending virtual-dom's messages to the native renderer to update the dom tree. The only API for developers to use in a `.we` file is `scrollToElement` <del>which you can use by calling the `$scrollTo` method</del>. Other APIs mentioned on this page should only be used through the native renderer in the `callNative` process. - -## API - -### scrollToElement(node, options) - -Scroll the page to the specified node. This API should only be used on the element in the `scroller` or `list` component. - -<del>This API can be used by calling the VM's method `$scrollTo` **(deprecated)**.</del> You can use `require('@weex-module/dom').scrollToElement` to call this API in your `.we` file. - -#### Arguments - -* `node`*(Node)*: an element that scrolled into the view. -* `options`*(object)*: some options. - * `offset`*(number)*: An offset to the visible position, default is `0`. - -#### Example - -```javascript -var dom = require('@weex-module/dom'); -dom.scrollToElement(this.$el('someId'), {offset: 10}); -``` - -### createBody(element) - -Create the body for the whole dom tree. Element type should only be the ones that can be used as roots (`div`, `scroller` and `list`). - -#### Arguments - -* `element`*(object)*: a object that specified the body node info like ref, type, children, etc. - -### addElement(parentNode, element, index) - -Add a element into the dom tree. - -#### Arguments - -* `parentNode`*(Node)*: specify the element's parent node. -* `element`*(object)*: a object that specified the config info for the node to be added. -* `index`*(number)*: insert the element to the specified position. - -### removeElement(node) - -Remove a node in the dom tree. - -#### Arguments - -* `node`*(Node)*: the node to be removed. - -### moveElement(node, parentNode, index) - -Move a exsited node into another parent (or the same parent) before the specified position. - -#### Arguments - -* `node`*(Node)*: the node to be moved. -* `parentNode`*(Node)*: the parent node to move into. -* `index`*(number)*:: according to the specified position index, will the node be inserted into. - -### addEvent(node, type) - -Inform the renderer that there are listeners for a specified event type. - -#### Arguments - -* `node`*(Node)*: the node to be listened on. -* `type`*(string)*: which type of events the node should be listened for. - -### removeEvent(node, type) - -Remove event listeners on the specified node for the specified event type. - -#### Arguments - -* `node`*(Node)*: on which node should the listeners to be removed -* `type`*(string)*: specify the event type. - -### updateAttrs(node, attr) - -Update attrbutes of the specified node. - -#### Arguments - -* `node`*(Node)*: the node to be updated. -* `attr`*(object)*: the attributes object with the attribute items to be updated. - -### updateStyle(node, style) - -Update styles of the specified node. - -#### Arguments - -* `node`*(Node)*: the node to be updated. -* `style`*(object)*: the style object with the style rules to be updated. - -### createFinish() - -Notify native renders that the series of messages for updating the native dom tree have reached a end. - -### refreshFinish() - -Notify native renders that the series of messages for refreshing a native dom tree have reached a end. -
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/v-0.10/references/modules/globalevent.md ---------------------------------------------------------------------- diff --git a/doc/source/v-0.10/references/modules/globalevent.md b/doc/source/v-0.10/references/modules/globalevent.md deleted file mode 100644 index 0db8c48..0000000 --- a/doc/source/v-0.10/references/modules/globalevent.md +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: globalEvent -type: references -order: 3.10 -version: 0.10 ---- - -# globalEvent -<span class="weex-version">v0.8+ (developing)</span> - -## Summary - -`globalEvent` are used to listen for persistent events, such as changes in positioning information, gyroscopes, and so on. A global event is a secondary API that requires additional APIs to work with. - -You can register events via `addEventListener`, which can be removed by `removeEventListener` when you do not need to listen for `globalEvent`. - -*AUCTION* -- Only instance level is not application level . - -## How to make your Module support global events -API development is complete, when the event needs to be sent, the need through the following methods: - -```javascript -/** - * - * @param eventName eventName - * @param params event params - */ -instance.fireGlobalEventCallback(eventName,params); -``` - -How to dispatch a global event in a weex-html5 component or module ? Just dispatch the event on the document element: - -```javascript -var evt = new Event('some-type') -evt.data = { foo: 'bar' } -document.dispatchEvent(evt) -``` - -### Example - -#### Android - -```java -Map<String,Object> params=new HashMap<>(); -params.put("key","value"); -mWXSDKInstance.fireGlobalEventCallback("geolocation",params); -``` -#### iOS - -```Objective-C -[weexInstance fireGlobalEvent:@"geolocation" params:@{@"key":@"value"}]; -``` - -## API - -### addEventListener(String eventName, String callback) - -register global event. - -#### Arguments - -* `eventName`*(string)*: The name of the event you want to listen to. -* `callback`*(function)*: the callback function after executing this action. - -#### Example - -```javascript -var globalEvent = require('@weex-module/globalEvent'); -globalEvent.addEventListener("geolocation", function (e) { - console.log("get geolocation") - }); -``` - -### removeEventListener(String eventName) - -remove global event - -#### Arguments - -* `eventName`*(string)*: You no longer need to listen for event names. - -#### Example - -```javascript -var globalEvent = require('@weex-module/globalEvent'); -globalEvent.removeEventListener("geolocation"); -``` - http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/v-0.10/references/modules/index.md ---------------------------------------------------------------------- diff --git a/doc/source/v-0.10/references/modules/index.md b/doc/source/v-0.10/references/modules/index.md deleted file mode 100644 index 2a094ca..0000000 --- a/doc/source/v-0.10/references/modules/index.md +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: Built-in Modules -type: references -order: 3 -has_chapter_content: true -version: 0.10 ---- - -# Built-in Modules - -## How to use - -You can use a simply way like `require('@weex-module/name')` to access the apis of module. e.g. - -```html -<script> -var dom = require('@weex-module/dom') - -module.exports = { - data: {}, - created: function () { - dom.scrollToElement(this.$el('someIdForElement'), { - offset: 0 - }) - } -} -</script> -``` \ No newline at end of file http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/v-0.10/references/modules/modal.md ---------------------------------------------------------------------- diff --git a/doc/source/v-0.10/references/modules/modal.md b/doc/source/v-0.10/references/modules/modal.md deleted file mode 100644 index 2ebad15..0000000 --- a/doc/source/v-0.10/references/modules/modal.md +++ /dev/null @@ -1,192 +0,0 @@ ---- -title: modal -type: references -order: 3.4 -version: 0.10 ---- - -# modal - -Weex provides a series of message boxes: `toast`, `alert`, `confirm` and `prompt`. - -## API -### toast(options) - -A toast provides simple feedback about an operation in a small popup. For example, navigating away from an email before you send it triggers a "Draft saved" toast to let you know that you can continue editing later. Toasts automatically disappear after a timeout. - -#### Arguments -- `options` (object): toast options. - - `message` (string): the text message that the toast shows. - - `duration` (number): the duration(seconds) that the toast shows. - -**Example:** - -```html -<template> - <div style="height: 200px; width: 400px; background-color: #00bfff; - justify-content: center; align-items: center" onclick="{{perform}}"> - <text style="font-size: 60px; color: #ffffff">Toast</text> - </div> -</template> - -<script> - module.exports = { - methods: { - perform: function () { - var modal = require('@weex-module/modal'); - modal.toast({ - 'message': 'I am a toast', - 'duration': 3 - }); - } - } - } -</script> -``` -### alert(options, callback) - -An alert box is often used if you want to make sure information comes through to the user. -When an alert box pops up, the user will have to click "OK" to proceed. - -#### Arguments - -- `options` (object): alert box options. - - `message` (string): the text message that the alert shows. - - `okTitle` (string): the text of positive button, default is 'OK'. - - `callback` (function): callback when complete. - This method has a callback function whose arguments will be: -- `result` (string): the title text of the confirm button that clicked by user. - -**Example:** - -```html -<template> - <div> - <div style="height: 200px; width: 400px; background-color: #00bfff; - justify-content: center; align-items: center" onclick="{{perform}}"> - <text style="font-size: 60px; color: #ffffff">Alert</text> - </div> - <text>{{params}}</text> - </div> -</template> - -<script> - module.exports = { - data: { - params: '' - }, - methods: { - perform: function () { - var modal = require('@weex-module/modal'); - var self = this; - modal.alert({ - 'message': 'I am alert message', - 'okTitle' : 'YES' - }, function (result) { - self.params = String(result) - }); - } - } - } -</script> -``` - -### confirm(options, callback) -A confirm box is often used if you want the user to verify or accept something. - -When a confirm box pops up, the user will have to click either confirm or cancel button to proceed. - -#### Arguments -- `options` (object): confirm box options. - - `message` (string): the message that the confirm shows. - - `okTitle` (string): the title of confirm button, default is 'OK'. - - `cancelTitle` (string): the title of cancel button, default is 'Cancel'. -- `callback` (function): callback when complete. - -This method has a callback function whose arguments will be: -- `result`(string): the title text of the button that clicked by user. -**Example:** - -```html -<template> - <div> - <div style="height: 200px; width: 400px; background-color: #00bfff; - justify-content: center; align-items: center" onclick="{{perform}}"> - <text style="font-size: 60px; color: #ffffff">Confirm</text> - </div> - <text>{{params}}</text> - </div> -</template> - -<script> - module.exports = { - data: { - params: '' - }, - methods: { - perform: function () { - var modal = require('@weex-module/modal'); - var self = this; - modal.confirm({ - 'message': 'I have read and accept the terms.', - 'okTitle' : 'YES', - 'cancelTitle' : 'NO' - }, function (e) { - self.params = String(e) - }); - } - } - } -</script> -``` - -### prompt(options, callback) - -A prompt box is often used if you want the user to input a value before entering a page. -When a prompt box pops up, the user will have to click either confirm or cancel button to proceed after entering an input value. - -#### Arguments -- `options` (object): some options. - - `message` (string): the message that the prompt shows. - - `okTitle` (string): the title text of confirm button, default is 'OK'. - - `cancelTitle` (string): the title text of cancel button, default is 'Cancel'. -- `callback` (function): callback when complete. - This method has a callback function whose arguments will be: -- `ret` (object): the argument will be a object, which has attributes `result` and `data`, like `{ result: 'OK', data: 'hello world' }` - - `result` (string): the title of the button that clicked by user. - - `data` (string): the value of the text that entered by user. - -**Example:** - -```html -<template> - <div> - <div style="height: 200px; width: 400px; background-color: #00bfff; - justify-content: center; align-items: center" onclick="{{perform}}"> - <text style="font-size: 60px; color: #ffffff">Prompt</text> - </div> - <text>{{params}}</text> - </div> -</template> - -<script> - module.exports = { - data: { - params: '' - }, - methods: { - perform: function () { - var modal = require('@weex-module/modal'); - var self = this; - modal.prompt({ - 'message': 'I am a prompt', - 'okTitle' : 'YES', - 'cancelTitle' : 'NO' - }, function (e) { - self.params = JSON.stringify(e) - }); - } - } - } -</script> -``` \ No newline at end of file http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/v-0.10/references/modules/navigator.md ---------------------------------------------------------------------- diff --git a/doc/source/v-0.10/references/modules/navigator.md b/doc/source/v-0.10/references/modules/navigator.md deleted file mode 100644 index fe4442c..0000000 --- a/doc/source/v-0.10/references/modules/navigator.md +++ /dev/null @@ -1,198 +0,0 @@ ---- -title: navigator -type: references -order: 3.5 -version: 0.10 ---- - -# Navigator -<span class="weex-version">v0.6.1+</span> - -As it's known to all that, we can navigate back and forth in the web browser using the navigation bar. -And The navigator module mimics the same behaviors in the iOS/Android application. Without such an ability, We will have to stay in the same page forever, so it is very important. Besides the navigation, the module can let us to specify whether to apply animation or not during the transition. - -**example** - -```html -<template> - <div class="div"> - <text class="text" onclick="onItemClick">click me! {{message}}</text> - </div> -</template> - -<script> - module.exports ={ - data:{ - message:"" - }, - methods:{ - onItemClick:function(e){ - - var navigator = require('@weex-module/navigator'); - var params = {'url':'http://weex.alibaba-inc.com/raw/html5/3d2996653c1d129603f9c935b895e998.js','animated':true}; - navigator.push(params, function(e) { - console.log('i am the callback.') - }); - } - } - } -</script> -<style> - .div { - flex-direction: row; - justify-content: space-between; - align-items: center; - width: 750; - height: 90; - padding-left:30; - padding-right:30; - - border-bottom-width: 1; - border-style: solid; - border-color: #dddddd; - } - .text{ - width: 750; - height: 90; - } -</style> -``` - -[try it](http://dotwe.org/004a5e3f26290cf5b9ce03806a574633) - -## API -### push(options, callback) - -push a weex page onto the navigator stack, you can specify whether apply animation when pushing. And you can also specify a callback function to be executed after the operation is over. - -**parameters** - -* options(object): some options. - * url(stirng): The URL of the weex page to push. - * animated(string): true, if the weex page is push through animation, otherwise, false. Default value is true. - -* callback(object): the callback function to be called after executing this action. - -```javascript -var params = { - 'url': 'navigator-demo.js', - 'animated' : 'true', -} -var navigator = require('@weex-module/navigator'); -navigator.push(params, function(e) { - //callback -}); -``` - -### pop(options, callback) -pop a weex page onto the navigator stack, you can specify whether apply animation when popping. And you can also specify a callback function to be executed after the operation is over. - -**parameters** - -* options(object): some options. - * animated(string): true if the weex page is pop through animation; otherwise, false. Default value is true. -* callback(object): the callback function after executing this action. - -**example** - -```javascript -var params = { - 'animated' : 'true', -} -var navigator = require('@weex-module/navigator'); -navigator.pop(params, function(e) { - //callback -}); -``` - -### close(options, callback) -close a weex page, you can specify a callback function to be executed after the operation is over. - -**parameters** - -* options(object): some options. - * animated(string): true, should animation be applied when closing. Default value is true. -* callback(object): the callback function after executing this action. - -### setNavBarBackgroundColor(params, callback) -set color for the navigation bar's background color, you can specify a callback function to be executed after the operation is over. - -**parameters** - -* params(object): some parameters. - * backgroundColor(string): it's a required param, no default value provided. -* callback(object): the callback function after executing this action. - - -### setNavBarLeftItem(params,callback) -set left item for the navigation bar, you can specify a callback function to be executed after the operation is over. - -**parameters** - -* params(object): parameters can not be empty, titleColor depends on title. And If title and icon are provided, only the title and its titleColor will be used. That's to say, icon will only be used when title is not present. - * title(string): the title for the bar button. - * titleColor (string): the title color. - * icon (string): the icon for the bar button, should be an an downloadable image. -* callback(object): the callback function after executing this action. - -### clearNavBarLeftItem(callback) -clear left item for the navigation bar, you can specify a callback function to be executed after the operation is over. - -**parameters** - -* callback(object): the callback function after executing this action. - -### setNavBarRightItem(params,callback) -set the right item for the navigation bar, you can specify a callback function to be executed after the operation is over. - -**parameters** - -* params(object): parameters can not be empty, titleColor depends on title. And If title and icon are provided, only the title and its titleColor will be used. That's to say, icon will be used when title is not present. - * title(string): the title for the bar button. - * titleColor (string): the title color. - * icon (string): the icon for the bar button, should be an an downloadable image. -* callback(object): the callback function after executing this action. - -### clearNavBarRightItem(params, callback) -clear the right item for the navigation bar, you can specify a callback function to be executed after the operation is over. -**parameters** - -* params(object): optional. -* callback(object): the callback function after executing this action. - - -### setNavBarMoreItem(params,callback) -set the more item for the navigation bar, you can specify a callback function to be executed after the operation is over. - -**parameters** - -Actually, the function does nothing. -* params(object): optional. -* callback(object): the callback function after executing this action. - -### clearNavBarMoreItem(params, callback) -clear the more item for the navigation bar, you can specify a callback function to be executed after the operation is over. - -**parameters** - -Actually, the function does nothing. -* params(object): optional. -* callback(object): the callback function after executing this action. - -### setNavBarTitle(params,callback) -set the title for the navigation bar, you can specify a callback function to be executed after the operation is over. - -**parameters** - -* params(object): parameters can not be empty. - * title(string): the title for the bar button. -* callback(object): the callback function after executing this action. - - -### clearNavBarTitle(params,callback) -clear the title for the navigation bar, you can specify a callback function to be executed after the operation is over. - -**parameters** - -* params(object): optional. -* callback(object): the callback function after executing this action. http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/v-0.10/references/modules/storage.md ---------------------------------------------------------------------- diff --git a/doc/source/v-0.10/references/modules/storage.md b/doc/source/v-0.10/references/modules/storage.md deleted file mode 100644 index 9c62109..0000000 --- a/doc/source/v-0.10/references/modules/storage.md +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: storage -type: references -order: 3.6 -version: 0.10 ---- - -# storage -<span class="weex-version">v0.7+</span> - -## Summary - -`storage` is a series of apis, allowing you to for example add, modify or delete stored data items. - -## API - -### setItem(key, value, callback) - -When passed a key name and value, will add that key to the storage, -or update that key's value if it already exists. - -#### Arguments - -* `key`*(string)*: the name of the key you want to store. "" or null is not allowed. -* `value`*(string)*: the name of the value you want to store."" or null is not allowed. -* `callback`*(object)*: the callback function after executing this action. - -##### Example - -```javascript -var storage = require('@weex-module/storage'); -storage.setItem('bar', 'bar-value', function(e) { - // callback.'e' is an object that contains 'result' and 'data'. e.result indicate whether `setItem` is succeed. - // e.data will return 'undefined' if success or 'invalid_param' if your key/value is ""/null. -}); -``` - -### getItem(key, callback) - -When passed a key name, will return that key's value. - -#### Arguments - -* `key`*(string)*: the name of the key you want to retrieve the value of."" or null is not allowed. -* `callback`*(object)*: the callback function after executing this action. - -##### Example - -```javascript -var storage = require('@weex-module/storage'); -storage.getItem('foo', function(e) { - //callback.'e' is an object that contains 'result' and 'data'. - // use 'e.data' to fetch the value of the key,if not found,'undefined' will return. -}); -``` - -### removeItem(key, callback) - -When passed a key name, will remove that key from the storage. - -#### Arguments - -* `key`*(string)*: the name of the key you want to remove."" or null is not allowed. -* `callback`*(object)*: the callback function after executing this action. - -##### Example - -```javascript -var storage = require('@weex-module/storage'); -storage.removeItem('foo', function(e) { - // callback. 'e' is an object that contains 'result' and 'data'. - // e.result will return 'success' or 'failed' according to the executing result. - // e.data will always return 'undefined' in this function if success. -}); -``` - -### length(callback) - -Returns an integer representing the number of data items stored in the Storage object. - -#### Arguments - -* `callback`*(object)*: the callback function after executing this action. - -##### Example - -```javascript -var storage = require('@weex-module/storage'); -storage.length(function(e) { - // callback. 'e' is an object that contains 'result' and 'data'. - //e.data will return that number. -}); -``` - -### getAllKeys(callback) - -Returns an array that contains all keys stored in Storage object. - -#### Arguments - -* `callback`*(object)*: the callback function after executing this action. - -##### Example - -```javascript -var storage = require('@weex-module/storage'); -storage.getAllKeys(function(e) { - // callback. 'e' is an object that contains 'result' and 'data'. - //e.data will return that array of keys. -}); -``` http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/v-0.10/references/modules/stream.md ---------------------------------------------------------------------- diff --git a/doc/source/v-0.10/references/modules/stream.md b/doc/source/v-0.10/references/modules/stream.md deleted file mode 100644 index 522e3b0..0000000 --- a/doc/source/v-0.10/references/modules/stream.md +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: stream -type: references -order: 3.7 -version: 0.10 ---- - -# stream - -A series of stream api. It provides a network request. - -## API - -### fetch(options, callback,progressCallback) - -Start a network request, use two callbacks to receive server's response data. - -**Arguments** - -* options(object): the request options, key value style dictionary. - - * method(string): the HTTP method `GET` or `POST`. - - * url(string): the request url. - - * headers(string): the HTTP request headers. - - * type(string): request type, 'json','text' or 'jsonp'(same as 'json' in native implementation) - - * body(string): the HTTP body. - -* callback(function): A callback function whose argument is the response object of the request. Callback function will receive a `response` object. - - * status(number): response status code. - - * ok(boolean): true if status code is bewteen 200ï½299. - - * statusText(string): status text - - * data(string): response data. It's a object if request option is `json`/`jsonp`, or *(string)* in other type value. - - * headers(object): response headers - -* progressCallback(function): A progress callback. This callback will be invoked before request finished. - - * readyState(number): Current request state.'1':request connection opened;'2':response headers received.;'3':response data is loading; - - * status(number): response status code. - - * length(number): bytes of data have received. You can read full length of response from 'headers'. - - * statusText(string): status text. - - * headers(object): response headers. - -### Example - -```html -<template> - <div> - <text onclick="startStream">click here to start stream</text> - </div> -</template> - -<script> - module.exports = { - methods: { - startStream: function () { - var stream_module = require('@weex-module/stream'); - stream_module.fetch({ - method: 'GET', - url: "http://httpbin.org/get";, - type:'json' - }, function(response) { - //finished response - console.log("all received:",response); - },function(response){ - //progress response - console.log("current bytes received:",response.length); - }); - } - } - } -</script> -``` -[Try it](http://dotwe.org/6e4ede64fdfe070b9696cc4cc3bdd086) http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/v-0.10/references/modules/timer.md ---------------------------------------------------------------------- diff --git a/doc/source/v-0.10/references/modules/timer.md b/doc/source/v-0.10/references/modules/timer.md deleted file mode 100644 index c82109d..0000000 --- a/doc/source/v-0.10/references/modules/timer.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: Timer -type: references -order: 3.8 -version: 0.10 ---- - -# Timer - -Weex encapsulates a series of APIs in order to start/stop a one-time task or a repeated task at a fixed delay. Please note that this module don't provide an accuracy delay. It provides best-effort delivery, but the actual delay may still exceed the delay user wants if the corresponding thread is busy. -Actually, this module is made for the polyfill of HTML5 timer APIs, developers **should not** use this module directly unless they know exactly what they are doing. - -## API - -All timeout or interval in this module are measured in milliseconds. -Also, timeout and interval should be a non-negative integer(the max of integer is 0x7FFFFFFF). If timeout or interval is negative, then it will be reset to zero, e.g. the task will be put in the task queue immediately. - -### setTimeout(fn, timeout) - -The `setTimeout()` method calls a function after a specified number of milliseconds. Use the `clearTimeout()` method to prevent the function from running. The function is only executed once. If you need to repeat execution, use the `setInterval()` method. - -#### Arguments - -- `fn` (function): The function that will be executed -- `timeout` (number): The number of milliseconds to wait before executing the function - -#### Return value - -A Number, representing the fnId value of the timer that is set. Use this value with the `clearTimeout()` method to cancel the timer. - -### setInterval(fn, interval) - -The `setInterval()` method calls a function at specified intervals (in milliseconds), and it will continue calling the function until `clearInterval()` is called. The fnId value returned by `setInterval()` is used as the parameter for the `clearInterval()` method. - -#### Arguments - -- `fn` (function): The function that will be executed -- `interval` (number): The intervals (in milliseconds) on how often to execute the function - -#### Return value - -A Number, representing the fnId value of the timer that is set. Use this value with the `clearInterval()` method to cancel the timer - -### clearTimeout(fnId) - -The `clearTimeout()` method clears a timer set with the `setTimeout()` method. The fnId value returned by `setTimeout()` is used as the parameter for the `clearTimeout()` method. If the function has not already been executed, you will be able to stop the execution by calling the `clearTimeout()` method, otherwise, this method has no influence on the task. - -#### Arguments - -- `fnId` (number): The fnId value of the timer returned by the `setTimeout()` method - -### clearInterval(fnId) - -The `clearInterval()` method clears a timer set with the `setInterval()` method. The fnId value returned by `setInterval()` is used as the parameter for the `clearInterval()` method. - -#### Arguments - -- `fnId` (number): The fnId of the timer returned by the `setInterval()` method - -[Try it](http://dotwe.org/996578e8f29b88d7d4fa01ab031fbbda) http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/v-0.10/references/modules/webview.md ---------------------------------------------------------------------- diff --git a/doc/source/v-0.10/references/modules/webview.md b/doc/source/v-0.10/references/modules/webview.md deleted file mode 100644 index 88c6f17..0000000 --- a/doc/source/v-0.10/references/modules/webview.md +++ /dev/null @@ -1,160 +0,0 @@ ---- -title: webview -type: references -order: 3.9 -version: 0.10 ---- - -# webview - -A series of web operation api like `goBack`, `goForward`, and `reload`. 'webview' module used with the web component. - -## API - -### goBack(webElement) - -Loads the previous location in the history stack. - -**Arguments** - -* webElement(web): the element of the web component. - -#### Example - -``` -var webview = require('@weex-module/webview'); -var webElement = this.$el('webview'); -webview.goBack(webElement); -``` - -### goForward(webElement) - -Loads the next location in the history stack. - -**Arguments** - -* webElement(web): the element of the web component. - -#### Example - -``` -var webview = require('@weex-module/webview'); -var webElement = this.$el('webview'); -webview.goForward(webElement); -``` - -### reload(webElement) - -Reloads the current web page. - -**Arguments** - -* webElement(web): the element of the web component. - -#### Example - -``` -var webview = require('@weex-module/webview'); -var webElement = this.$el('webview'); -webview.reload(webElement.ref); -``` - -## Example - -```html -<template> - <div class="browserStyle"> - <div style="flex-direction: row"> - <input id="urlInput" type="url" autofocus="false" placeholder="..." class="textStyle" value="{{input_text}}" oninput="input"> - </input> - </div> - <div style="flex-direction: row"> - <wxc-button value="LoadURL" class="buttonSytle" size="small" onclick="loadURL"></wxc-button> - <wxc-button value="Backward" class="buttonSytle" size="small" onclick="backforward"></wxc-button> - <wxc-button value="Forward" class="buttonSytle" size="small" onclick="forward"></wxc-button> - </div> - <div> - <web id="webview" src="{{src}}" class="webStyle"></web> - </div> - </div> -</template> - -<style> - - .browserStyle - { - width:600; - height: 825; - background-color:#778899 ; - } - - .textStyle - { - width:600; - height: 50; - background-color: #D3D3D3; - } - - .buttonSytle - { - width:180; - height: 50; - font-size: 12; - background-color: #D3D3D3; - margin:10; - padding-left: 5; - padding-right: 5; - } - - .webStyle - { - width:600; - height: 700; - background-color: #8B0000; - } - -</style> - -<script> - - var web_module = require('@weex-module/webview'); - - module.exports = { - data: { - src : "https://h5.m.taobao.com";, - input_text:"https://www.tmall.com"; - }, - - methods: { - - loadURL: function (e) { - var web_element = this.$el('webview'); - var input = this.$el("urlInput"); - this.src = this.input_text; - web_module.reload(web_element); - }, - - backforward: function (e) { - var web_element = this.$el('webview'); - web_module.goBack(web_element); - this.input_text = web_element.attr.src; - }, - - forward: function (e) { - var web_element = this.$el('webview'); - web_module.goForward(web_element); - this.input_text = web_element.attr.src; - }, - input:function (e) { - var input = this.$el("urlInput"); - this.input_text = input.attr.value; - } - - } - } -</script> -``` - -[Try it](http://dotwe.org/103d472645206cc1564f49717585abb4) - - http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/v-0.10/references/special-element.md ---------------------------------------------------------------------- diff --git a/doc/source/v-0.10/references/special-element.md b/doc/source/v-0.10/references/special-element.md deleted file mode 100644 index 4a4d57e..0000000 --- a/doc/source/v-0.10/references/special-element.md +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: Special Element -type: references -order: 1.10 -version: 0.10 ---- - -# Special Element - -## Content - -The element serves as content distribution outlet in a composed component template. The element itself will be replaced. - -alias: 'slot'. - -## Example - -As shown in the example, 'content' replaced by 'text'. - -```html -<we-element name="item"> - <template> - <div> - <content></content> - </div> - </template> -</we-element> - -<template> - <div> - <item> - <text>Content Text</text> - </item> - </div> -</template> -``` http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/v-0.10/references/specs/index.md ---------------------------------------------------------------------- diff --git a/doc/source/v-0.10/references/specs/index.md b/doc/source/v-0.10/references/specs/index.md deleted file mode 100644 index d303a16..0000000 --- a/doc/source/v-0.10/references/specs/index.md +++ /dev/null @@ -1,309 +0,0 @@ ---- -title: JS Bundle format -type: references -order: 4 -has_chapter_content: false -chapter_title: Low-level Specs -version: 0.10 ---- - -# JS Bundle format - -JS Bundle Version: v0.3.0 - -## v0.5.0 - -### Whole Syntax and Structure - -A JS Bundle is actually a JavaScript file which follows **ES5** standard. The code is used to define some custom components for the instance and bootstrap the instance with certain name, config and data. Developers could use all kinds of JS code packager like webpack, browserify, requirejs to organize your whole instance code. - -### Meta Info - -The JS Bundle Must begin with a comment line which is a JSON object like: - -```javascript -// { "framework": "Weex", "version": "0.5.0" } -``` - -This JSON object as least contains: - -* property `framework` must be `"Weex"` -* property `version` should be corresponded with the JS Bundle format version - -### Global Members - -* `__weex_define__(name, options)` -* `__weex_bootstrap__(name, config, data)` -* `__weex_document__` -* `__weex_require__(name)` - -#### `__weex_define__(name:string, options: object)` - -Define a custom component named `name` for current instance with `options`. - -**example:** - -```javascript -__weex_define__('rmb', { - template: { - type: 'div', - style: {flexDirection: 'row'}, - children: [ - {type: 'text', attr: {value: 'ï¿¥'}}, - {type: 'text', attr: {value: this.value}} - ] - }, - data: function () { - return { - value: '0' - } - }, - methods: {...} -}) -``` - -The enabled component options contains: - -* `template`: just the same as [v0.3.0](#details-of-template-option-definitions) -* `style`: just the same as [v0.3.0](#details-of-style-option-definitions) -* `data`: a function which return a plain object to observe by the ViewModel -* `methods`: a function map to proxy to the ViewModel -* `computed`: a map of several computed keys for the ViewModel -* `init`, `created`, `ready`: lifecycle methods -* `events`: event handlers for the ViewModel -<!-- * `components`: a map for options of sub components the ViewModel needed (So `__weex_define__(name, options)` equals to run `this.components[name] = options` in each custom components when `init`) --> - -The enabled ViewModel APIs contains: - -* `$el(id): Element`: find element by id in current ViewModel scope -* `$vm(id): ViewModel`: find sub ViewModel by id -* `$getConfig(): object`: get instance config info -* `$broadcast`/`$emit`/`$dispatch`/`$on`/`$off`: listen and fire component events -* `$transition` *(experimental)*: animation transition (see more in [animation native module](../animation.html)) - -#### `__weex_require__(name: string): object` - -Get a Weex native module with several native APIs. - -**example:** - -```javascript -var modal = __weex_require__('modal') -modal.toast({ - message: 'Hey!', - duration: 2 -}) -``` - -polyfill for v0.3.0 - -```javascript -function __weex_require__(name) { - var result - define('__weex_require__', function (r, e, m) { - result = r('@weex-module/' + name) - }) - return result -} -``` - -#### `__weex_bootstrap__(nameOrOptions: string|object, config: object?, data: object?): AppInstance | Error` - -Start to render by a certain component name or a direct component options as the root element, and some instance `config` and instance `data`. If everything fine, it will returns the root app instance. Otherwise it will return an `Error` instance which describes something wrong. - -**example:** - -```javascript -__weex_bootstrap__( - 'root', - { - // format 1: - // downgrade: { appVersion: '>= 0.5.0' }, - // format 2: - // downgrade: function (config) { return true } - }, - { - // external data - // value: '12345' - } -) -``` - -The instance `config` now only support `downgrade` property which allows two format: - -1. an object like `{ osVersion, appVersion, weexVersion, deviceModel }` -2. a function like `function (config) { return true }` to return a boolean value. `true` means normal and `false` means downgrade. - -The instance `data` will merge to root component data. So the root component is also easy to reuse and the instance data is easy to customize. - -#### `__weex_document__` - -An virtual-DOM `Document` instance. Also the host of [virtual-DOM APIs](./virtual-dom-apis.html). Every Weex instance has and must have just one `Document` instance. - -### Preserved Global Variables - -`define`, `bootstrap`, `module`, `exports`, `document`, `require`, `register`, `render` - -### A whole example - -```javascript -// { "framework": "Weex", "version": "0.5.0" } - -var modal = __weex_require__('modal') - -__weex_define__('item', { - template: { - type: 'div', - style: { flexDirection: 'row' }, - event: { - click: function (e) { - this.update(e) - } - }, - children: [ - { type: 'image', attr: { src: this.imageUrl }, ...}, - { type: 'text', attr: { value: this.title }, ...} - ] - }, - data: function () { - return { - imageUrl: '', - title: '' - } - }, - methods: { - update: function (e) { - modal.toast({ message: this.title }) - } - } -}) - -__weex_define__('app', { - template: { - type: 'div', - children: [ - { - type: 'item', - repeat: { - expression: function () { - return this.list - }, - key: '$index', - value: '$value'} - }, - attr: { - imageUrl: function () { - return this.$value.imageUrl - }, - title: function () { - return this.$value.title - } - } - } - ] - }, - data: function () { - return { - list: [ - { imageUrl: 'xxx', title: '111' }, - { imageUrl: 'yyy', title: '222' }, - { imageUrl: 'zzz', title: '333' } - ] - } - } -}) - -__weex_bootstrap__('app') -``` - -## v0.3.0 - -### Whole Syntax and Structure - -A JS Bundle is actually a JavaScript file which follows **ES5** standard. The code is organized by several modules with AMD-like format: - -```javascript -define('moduleName1', function (require, exports, module) { - // content of module1 -}) - -define('moduleName2', function (require, exports, module) { - // content of module2 -}) - -... -``` - -A whole Weex JS Bundle is concatenated by these modules and last a `bootstrap(rootComponentName, optionalConfig, optionalExternalData)` function call. - -```javascript -define('@weex-component/a', function (require, exports, module) { - // content of composed component <a> -}) - -define('@weex-component/b', function (require, exports, module) { - // content of composed component <b> -}) - -bootstrap('@weex-component/b') -``` - -As the sample above, the component name should be hyphenated (a-z, 0-9, "-"). Other characters are not allowed. - -And, the method call `bootstrap()` allows 1~3 parameters: root module name (String), config info (optional JSON) and external data (optional JSON). - -### Content of Composed Components - -A module of composed component contains 3 parts: whole options definition, additional template option definition and additional style option definition. - -- whole options is a piece of JavaScript code to put component options (except `template` option and `style` option) into `module.exports` -- `template` option is a piece of JSON-like object assigned to `module.exports.template` which describes the display structure of this component -- `style` option is a piece of JSON object assigned to `module.exports.style` which describes the reusable styles in this component - -The `template` option is required and appeared only once, and the `style` option and whole options definition are optional. - -These options are defined and transformed by Transformer. Actually you can also ignore all the format limitation and write options to `module.exports` as the same result if you are not going to use Transformer. But that's not recommended. - -#### Details of template option definitions - -A piece of multi-level embedded JSON-like object which describes the view structure. - -Every level JSON-like object has these members below: - -* `type`: a required string, component name/type -* `component`: an optional boolean, whether this component is composed or native -* `attr`: an optional k-v pairs which contains all attributes of an element, the value could be a string, number, boolean or a function that bind some data value -* `style`: an optional k-v pairs which contains all styles of an element, just the same format as the `attr` -* `classList`: an optional array of strings which contains class names for styling. -* `events`: an optional k-v pairs whose keys are event type and values are corresponding method names -* `children`: an optional array of child components info -* `append`: an optional string which determines a compiling workflow strategy: append node-by-node singly or a whole node tree just one time. the default value is `node` and another supported value is `tree`. -* `shown`: a optional function which returns a boolean value to determine whether this component should be displayed -* `repeat`: a optional function which returns a list data to displays components with each - -**Corresponding Keys to Weex Transformer:** - -- tag `name` in Weex file corresponds to `type` -- attr `if` in Weex file corresponds to `shown` -- attr `repeat` in Weex file corresponds to `repeat` -- attr `append` in Weex file corresponds to `append` -- attr `style` in Weex file with CSS syntax corresponds to `style` -- attr `class` in Weex file with class names separated by blanks corresponds to `classList` -- attr `on***` in Weex file with prefix `on` corresponds to a k-v pair in `events` -- other attributes in Weex file corresponds to `attr` -- Child nodes in Weex file corresponds to `children` - -All tag names, attr names are case-insensitive and transformed to lower-cased. But the attr values are case-sensitive. - -#### Details of style option definitions - -Just a two-levels JSON object. - -* The first levels are class names. -* The second levels are k-v pairs which describes style names & properties for each class name. - -**Corresponding Keys to Weex Transformer:** - -* class name corresponds to first level keys -* prop name corresponds to second level keys -* prop value corresponds to second level values http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/v-0.10/references/specs/js-bundle-format.md ---------------------------------------------------------------------- diff --git a/doc/source/v-0.10/references/specs/js-bundle-format.md b/doc/source/v-0.10/references/specs/js-bundle-format.md deleted file mode 100644 index 0b103d9..0000000 --- a/doc/source/v-0.10/references/specs/js-bundle-format.md +++ /dev/null @@ -1,307 +0,0 @@ ---- -title: JS Bundle format -type: references -order: 4.1 -version: 0.10 ---- - -# JS Bundle format - -JS Bundle Version: v0.3.0 - -## v0.5.0 - -### Whole Syntax and Structure - -A JS Bundle is actually a JavaScript file which follows **ES5** standard. The code is used to define some custom components for the instance and bootstrap the instance with certain name, config and data. Developers could use all kinds of JS code packager like webpack, browserify, requirejs to organize your whole instance code. - -### Meta Info - -The JS Bundle Must begin with a comment line which is a JSON object like: - -```javascript -// { "framework": "Weex", "version": "0.5.0" } -``` - -This JSON object as least contains: - -* property `framework` must be `"Weex"` -* property `version` should be corresponded with the JS Bundle format version - -### Global Members - -* `__weex_define__(name, options)` -* `__weex_bootstrap__(name, config, data)` -* `__weex_document__` -* `__weex_require__(name)` - -#### `__weex_define__(name:string, options: object)` - -Define a custom component named `name` for current instance with `options`. - -**example:** - -```javascript -__weex_define__('rmb', { - template: { - type: 'div', - style: {flexDirection: 'row'}, - children: [ - {type: 'text', attr: {value: 'ï¿¥'}}, - {type: 'text', attr: {value: this.value}} - ] - }, - data: function () { - return { - value: '0' - } - }, - methods: {...} -}) -``` - -The enabled component options contains: - -* `template`: just the same as [v0.3.0](#details-of-template-option-definitions) -* `style`: just the same as [v0.3.0](#details-of-style-option-definitions) -* `data`: a function which return a plain object to observe by the ViewModel -* `methods`: a function map to proxy to the ViewModel -* `computed`: a map of several computed keys for the ViewModel -* `init`, `created`, `ready`: lifecycle methods -* `events`: event handlers for the ViewModel -<!-- * `components`: a map for options of sub components the ViewModel needed (So `__weex_define__(name, options)` equals to run `this.components[name] = options` in each custom components when `init`) --> - -The enabled ViewModel APIs contains: - -* `$el(id): Element`: find element by id in current ViewModel scope -* `$vm(id): ViewModel`: find sub ViewModel by id -* `$getConfig(): object`: get instance config info -* `$broadcast`/`$emit`/`$dispatch`/`$on`/`$off`: listen and fire component events -* `$transition` *(experimental)*: animation transition (see more in [animation native module](../animation.html)) - -#### `__weex_require__(name: string): object` - -Get a Weex native module with several native APIs. - -**example:** - -```javascript -var modal = __weex_require__('modal') -modal.toast({ - message: 'Hey!', - duration: 2 -}) -``` - -polyfill for v0.3.0 - -```javascript -function __weex_require__(name) { - var result - define('__weex_require__', function (r, e, m) { - result = r('@weex-module/' + name) - }) - return result -} -``` - -#### `__weex_bootstrap__(nameOrOptions: string|object, config: object?, data: object?): AppInstance | Error` - -Start to render by a certain component name or a direct component options as the root element, and some instance `config` and instance `data`. If everything fine, it will returns the root app instance. Otherwise it will return an `Error` instance which describes something wrong. - -**example:** - -```javascript -__weex_bootstrap__( - 'root', - { - // format 1: - // downgrade: { appVersion: '>= 0.5.0' }, - // format 2: - // downgrade: function (config) { return true } - }, - { - // external data - // value: '12345' - } -) -``` - -The instance `config` now only support `downgrade` property which allows two format: - -1. an object like `{ osVersion, appVersion, weexVersion, deviceModel }` -2. a function like `function (config) { return true }` to return a boolean value. `true` means normal and `false` means downgrade. - -The instance `data` will merge to root component data. So the root component is also easy to reuse and the instance data is easy to customize. - -#### `__weex_document__` - -An virtual-DOM `Document` instance. Also the host of [virtual-DOM APIs](./virtual-dom-apis.html). Every Weex instance has and must have just one `Document` instance. - -### Preserved Global Variables - -`define`, `bootstrap`, `module`, `exports`, `document`, `require`, `register`, `render` - -### A whole example - -```javascript -// { "framework": "Weex", "version": "0.5.0" } - -var modal = __weex_require__('modal') - -__weex_define__('item', { - template: { - type: 'div', - style: { flexDirection: 'row' }, - event: { - click: function (e) { - this.update(e) - } - }, - children: [ - { type: 'image', attr: { src: this.imageUrl }, ...}, - { type: 'text', attr: { value: this.title }, ...} - ] - }, - data: function () { - return { - imageUrl: '', - title: '' - } - }, - methods: { - update: function (e) { - modal.toast({ message: this.title }) - } - } -}) - -__weex_define__('app', { - template: { - type: 'div', - children: [ - { - type: 'item', - repeat: { - expression: function () { - return this.list - }, - key: '$index', - value: '$value'} - }, - attr: { - imageUrl: function () { - return this.$value.imageUrl - }, - title: function () { - return this.$value.title - } - } - } - ] - }, - data: function () { - return { - list: [ - { imageUrl: 'xxx', title: '111' }, - { imageUrl: 'yyy', title: '222' }, - { imageUrl: 'zzz', title: '333' } - ] - } - } -}) - -__weex_bootstrap__('app') -``` - -## v0.3.0 - -### Whole Syntax and Structure - -A JS Bundle is actually a JavaScript file which follows **ES5** standard. The code is organized by several modules with AMD-like format: - -```javascript -define('moduleName1', function (require, exports, module) { - // content of module1 -}) - -define('moduleName2', function (require, exports, module) { - // content of module2 -}) - -... -``` - -A whole Weex JS Bundle is concatenated by these modules and last a `bootstrap(rootComponentName, optionalConfig, optionalExternalData)` function call. - -```javascript -define('@weex-component/a', function (require, exports, module) { - // content of composed component <a> -}) - -define('@weex-component/b', function (require, exports, module) { - // content of composed component <b> -}) - -bootstrap('@weex-component/b') -``` - -As the sample above, the component name should be hyphenated (a-z, 0-9, "-"). Other characters are not allowed. - -And, the method call `bootstrap()` allows 1~3 parameters: root module name (String), config info (optional JSON) and external data (optional JSON). - -### Content of Composed Components - -A module of composed component contains 3 parts: whole options definition, additional template option definition and additional style option definition. - -- whole options is a piece of JavaScript code to put component options (except `template` option and `style` option) into `module.exports` -- `template` option is a piece of JSON-like object assigned to `module.exports.template` which describes the display structure of this component -- `style` option is a piece of JSON object assigned to `module.exports.style` which describes the reusable styles in this component - -The `template` option is required and appeared only once, and the `style` option and whole options definition are optional. - -These options are defined and transformed by Transformer. Actually you can also ignore all the format limitation and write options to `module.exports` as the same result if you are not going to use Transformer. But that's not recommended. - -#### Details of template option definitions - -A piece of multi-level embedded JSON-like object which describes the view structure. - -Every level JSON-like object has these members below: - -* `type`: a required string, component name/type -* `component`: an optional boolean, whether this component is composed or native -* `attr`: an optional k-v pairs which contains all attributes of an element, the value could be a string, number, boolean or a function that bind some data value -* `style`: an optional k-v pairs which contains all styles of an element, just the same format as the `attr` -* `classList`: an optional array of strings which contains class names for styling. -* `events`: an optional k-v pairs whose keys are event type and values are corresponding method names -* `children`: an optional array of child components info -* `append`: an optional string which determines a compiling workflow strategy: append node-by-node singly or a whole node tree just one time. the default value is `node` and another supported value is `tree`. -* `shown`: a optional function which returns a boolean value to determine whether this component should be displayed -* `repeat`: a optional function which returns a list data to displays components with each - -**Corresponding Keys to Weex Transformer:** - -- tag `name` in Weex file corresponds to `type` -- attr `if` in Weex file corresponds to `shown` -- attr `repeat` in Weex file corresponds to `repeat` -- attr `append` in Weex file corresponds to `append` -- attr `style` in Weex file with CSS syntax corresponds to `style` -- attr `class` in Weex file with class names separated by blanks corresponds to `classList` -- attr `on***` in Weex file with prefix `on` corresponds to a k-v pair in `events` -- other attributes in Weex file corresponds to `attr` -- Child nodes in Weex file corresponds to `children` - -All tag names, attr names are case-insensitive and transformed to lower-cased. But the attr values are case-sensitive. - -#### Details of style option definitions - -Just a two-levels JSON object. - -* The first levels are class names. -* The second levels are k-v pairs which describes style names & properties for each class name. - -**Corresponding Keys to Weex Transformer:** - -* class name corresponds to first level keys -* prop name corresponds to second level keys -* prop value corresponds to second level values http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/v-0.10/references/specs/js-framework-apis.md ---------------------------------------------------------------------- diff --git a/doc/source/v-0.10/references/specs/js-framework-apis.md b/doc/source/v-0.10/references/specs/js-framework-apis.md deleted file mode 100644 index e1412c6..0000000 --- a/doc/source/v-0.10/references/specs/js-framework-apis.md +++ /dev/null @@ -1,191 +0,0 @@ ---- -title: JS Framework APIs -type: references -order: 4.2 -version: 0.10 ---- - -# JS Framework APIs -<span class="weex-version">0.4</span> - -## Intro about JS Runtime - -These APIs are designed for JS Framework and Native Engine working together. - -Considering the limitation of mobile phone resource, *Weex runs only one JS runtime* to handle all Weex instances. So it need a multi-instance management layer in JavaScript. These JS Framework APIs are just designed to do the management job. - -* First, each Weex instance have a lifecycle, from `createInstance` to `destroyInstance`. During this period, we can import some extra data by `refreshInstance`. -* To communicate with Native Engine, we have a couple of APIs: `sendTasks` and `receiveTasks`. They are used to call each other by some commands and messages. -* And when JS runtime start at the beginning of the app launching, we need something initialized and configured. So we supply some APIs like `registerComponents`, `registerModules`. -* The last API is just for debugging, we supply an API named `getRoot` to return the whole virtual-DOM data for developers. -* If any of these API calls failed, an `Error` object should be returned. - -## Called by native and supplied from JS Framework - -### `createInstance(instanceId, code, options, data)` - -Create a Weex instance from Native Engine - -* `instanceId`: The unique id for a Weex instance, generated by Native Engine. -* `code`: The JS bundle code send from Native Engine. It will be executed by `new Function(code)` in JS Framework. The code format depends on [JS Bundle Foramt](./js-bundle-format.html) -* `options`: *Optional*. An options object. *Currently it supports `debug` flag which enable printing log and `bundleUrl` flag which the url of bundle.* -* `data`: *Optional*. It's an chance to supply external data instead of the original data in JS bundle. - -Example: - -```javascript -createInstance('x', 'define(...); define(...); define(...); bootstrap(...)') -createInstance('x', '...', { bundleUrl, debug, ... }, { a: 1, b: 2 }}) -``` - -### `destroyInstance(instanceId)` - -Destroy an existed Weex instance by id from Native Engine - -### `refreshInstance(instanceId, data)` - -Refresh data to an existed Weex instance with certain external data from Native Engine - -Example: - -```javascript -refreshInstance('x', {a: 100, b: 200}) -``` - -### `registerComponents(components)` - -Register all native components - -* `components`: A array of whose items are component options that are force part to use. *Currently it supports `append` attribute which forces the appending mechanism (`tree` or `node`) when first time rendering.* - -Example: - -```javascript -registerComponents([ - { type: 'container' }, - { type: 'text' }, - { type: 'image' }, - { type: 'slider', append: 'tree' }, - { type: 'list' }, - { type: 'cell', append: 'tree' }, - ... -]) -``` - -### `registerModules(modules)` - -Register the name, methods and args format of each module - -* `modules`: A map that collects all native module definitions. Each module definition is an array which has several API definitions. Each API definition has a `name` string and an `args` array which contains a list of each parameter's type. - -**NOTE: the `node` type data will actually return its `ref` property. And the `function` type data will actually return a unique function id referring to it.** - -Example: - -```javascript -registerModules({ - event: [ - {name: 'openURL', args: ['string']} - ], - ... -}) -``` - -### `receiveTasks(instanceId, tasks)` - -Fire events or callbacks to an existed Weex instance from Native Engine - -* `tasks[]`: A task list. Each task has a `method="fireEvent|callback"` property and a list of `args`. - - In `fireEvent` method, the `args` is `ref` of the target, event `type`, event `data` and `domChanges` description in order. **Note: if some event make virtual-DOM data changed (e.g. value changed in `<input>` or current index changed in `<slider>`), the changing of the target element will be passed as `domChanges`.** - - In `callback` method, the `args` is `funcId` of a handler, `data` and `ifKeepAlive` which describes whether this callback handler should be keeping called. (Each callback handler is matched with a `funcId` when the original call happens.) - -Example: - -```javascript -receiveTasks('x', [{method: 'fireEvent', args: ['x', '13', 'click', {a: 100, b: 200}]}]) -receiveTasks('x', [{method: 'callback', args: ['x', '7', {a: 100, b: 200}, true]}]) -``` - -### `getRoot(instanceId)` - -Return a JSON object which describes the whole virtual DOM body of an existed Weex instance, which designed for debugging - -Example: - -```javascript -getRoot('x') -// {ref: '_root', type: 'container', attr: {...}, style: {...}, children: [...]} -``` - -## Called from JavaScript and implemented with native code - -### `sendTasks(instanceId, tasks)` - -Make native calls from JS Framework - -* `tasks[]`: A task list. Each task has a `module` name, a `method` name, and a `args[]` list. - -Example: - -```javascript -sendTasks('x', [ - {module: 'dom', method: 'addElement', args: ['_root', {ref: '1', type: 'container'}, -1]}, - {module: 'dom', method: 'addElement', args: ['1', {ref: '2', type: 'text', ...}, -1]}, - {module: 'dom', method: 'addElement', args: ['1', {ref: '3', type: 'image', ...}, -1]}, - ... -]) -``` - -## Supporting other JS Framework <sup>(experimental)</sup> - -### Register a new JS Framework - -```javascript -// lib/frameworks/index.js - -import Vue from '...' -import React from '...' -import Angular from '...' - -export const frameworks = { - Vue, - React, - Angular -} -``` - -### Expose JS Framework APIs - -```javascript -// 3rd-party-framework.js - -export function createInstance (id, code, config, data) { ... } -export function destroyInstance (id) { ... } -export function refreshInstance (id, data) { ... } -export function registerComponents (components) { ... } -export function registerModules (modules) { ... } -export function recieveTasks (id, tasks) { ... } -export function getRoot (id) { ... } -``` - -The virtual-DOM tasks should follow [virtual-DOM spec](./virtual-dom-apis.html). - -### Framework Helper - -You can import `lib/runtime/helper.js` to get two important things: - -* `Document` class, see [virtual-DOM spec](./virtual-dom-apis.html) for more. -* `sendTasks` method. - -### JS Bundle format - -You must ensure the JS Bundle has its first line of code like this: - -```javascript -// { "framework": "Vue" } -... -``` - -to allow JS Runtime to detect which JS Framework it should be opened by. - -If no valid annotation found. The JS Bundle will be opened by default JS Framework of Weex. http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/v-0.10/references/specs/virtual-dom-apis.md ---------------------------------------------------------------------- diff --git a/doc/source/v-0.10/references/specs/virtual-dom-apis.md b/doc/source/v-0.10/references/specs/virtual-dom-apis.md deleted file mode 100644 index 566de1a..0000000 --- a/doc/source/v-0.10/references/specs/virtual-dom-apis.md +++ /dev/null @@ -1,147 +0,0 @@ ---- -title: Virtual DOM APIs -type: references -order: 4.3 -version: 0.10 ---- - -# Virtual DOM APIs -<span class="weex-version">0.4</span> - -## `Document` - -Each instance has a corresponding document with the instance id. A document has many nodes which compose a node tree. - -### Constructor - -##### `new Document(id: string, url: string?)` - -### Members - -##### `createElement(tagName: string, props: Object?): Element` - -Create a certain type `Element`. And the `props` may contain `attr` object and `style` object. e.g. `createBody('div', {style: {backgroundColor: '#ffffff'}})` - -##### `createComment(text: string): Comment` - -Create a `Comment` with a certain comment text. - -##### `open()` - -Set a flag which means init rendering start, so each dom update will be called immediately - -##### `close()` - -Set a flag which means init rendering finished, so the dom updates later will be batched in each task. - -##### `fireEvent(el: Element, type: string, e: Object?, domChanges: Object?)` - -Fire an certain type of event on a certain element with an event object. When the event leads to some dom changes, the fourth parameter will describe the change just like `props` parameter in `createElement` method. - -#### Read-only & Getters - -##### `id: string` - -##### `URL: string?` - -##### `body: Element` - -body element - -##### `documentElement: Element` - -document element - -##### `getRef(ref: string): Node?` - -Get node by `ref` from the internal node map - -**Note**: the `documentElement` will be generated automatically when a document created, and the `body` should to be created manually and appended to `documentElement` to work. The `type` of a `body` must be one of `div`, `list` or `scroller`. - -## `Node` - -### Constructor - -##### `new Node()` - -### Members - -##### `destroy()` - -#### Read-only & Getters - -##### `ref: string` - -##### `nextSibling: Node?` - -##### `previousSibling: Node?` - -##### `parentNode: Node?` - -## `Element` extends `Node` - -### Constructor - -##### `new Element(type: string, props: Object?, ownerDocument: Document)` - -Create an element and the `props` may contain `attr` object and `style` object. - -### Members - -#### DOM Tree - -##### `appendChild(node: Node)` - -##### `insertBefore(node: Node, before: Node?)` - -##### `insertAfter(node: Node, after: Node?)` - -##### `removeChild(node: Node, preserved: boolean?)` - -Removes a child. The parameter `preserved` means whether destroy the removed node immediately or preserve it. - -##### `clear()` - -#### DOM props - -##### `setAttr(key: string, value: string, silent: boolean?)` - -If `silent` is true, it won't cause native calls. Used for handling event with virtual-DOM changes. - -##### `setStyle(key: string, value: string, silent: boolean?)` - -The `silent` parameter is just same as `setAttr` method. - -##### `setClassStyle(classStyle: Object)` - -The specificity of class style is lower than normal style. In another way the normal style will override the same name value in class style. - -##### `addEvent(type: string, handler: Function)` - -##### `removeEvent(type: string)` - -##### `fireEvent(type: string, e: any)` - -#### Read-only & Getters - -##### `toJSON(): Object` - -Format of `{ref: string, type: string, attr: Object, style: Object, event: Array(string), children: Array}` - -## `Comment` extends `Node` - -`Comment` won't be passed to the rendering engine. So it's very useful as a assistant placeholder sometimes. - -### Constructor - -##### `new Comment(value: string)` - -### Members - -#### Read-only & Getters - -##### `type: string` - -Returns `'comment'` - -##### `value: string` http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/v-0.10/references/text-style.md ---------------------------------------------------------------------- diff --git a/doc/source/v-0.10/references/text-style.md b/doc/source/v-0.10/references/text-style.md deleted file mode 100644 index 6b9ee4f..0000000 --- a/doc/source/v-0.10/references/text-style.md +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: Text Style -type: references -version: 0.10 -order: 1.8 ---- - -# Text Style -<span class="weex-version">0.5</span> - -Text alike components share some common style rules. The text alike components currently includes [`text`](./components/text.html) and [`input`](./components/input.html). - -## Properties - -- `color`: <colors> this property set the foreground color of an component's text content. -- `font-size`: <length> this property specifies the size of the font. -- `font-style`: <enum> `normal` | `italic`. This property lets you select italic or normal faces within a font-family. Default value is `normal`. -- `font-weight`: <enum> `normal` | `bold`. This property specifies the boldness of the font. Default value is `normal`. -- `text-decoration`: <enum> `none` | `underline` | `line-through`. This property is used to set the text formatting to underline or line-through. The default value is `none`. -- `text-align`: <enum> `left` | `center` | `right`. This property describes how inline content like text is aligned in its parent component. The default value is `left`. -- `font-family`:<string> this property set the font-family of the text. This property **doesn't guarantee** the given font will always be set to the text. If the specified font cannot be found at the device, a typeface fallback will occur and the default typeface will be load. The fallback mechanism may vary in different devices. -- `text-overflow`:<string> `clip` | `ellipsis`. This property determines how overflowed content that is not displayed is signaled to users. It can be clipped, display an ellipsis. - -The property `color` support multiple fomats of values, contains rgb, rgba, #fff, #ffffff, named-color. - -Example: - -```css -.my-class { color: red; } -.my-class { color: #f00; } -.my-class { color: #ff0000; } -.my-class { color: rgb(255, 0, 0); } -.my-class { color: rgba(255, 0, 0, 0.5); } -``` - -## Type of Style Value - -- length: number followed by length unit `px`, `px` can be omitted. -- colors: support multiple formats of values, including rgb (`rgb(255, 0, 0)`), rgba (`rgba(255, 0, 0, 0.5)`), hexadecimal (`#ff0000`), short hexadecimal (`#f00`), named color (`red`). -- enumerated values: a limited number of string values. - -**Note:** [The list of color keywords.](./color-names.html) - http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/v-0.10/tools/devtools-android.md ---------------------------------------------------------------------- diff --git a/doc/source/v-0.10/tools/devtools-android.md b/doc/source/v-0.10/tools/devtools-android.md deleted file mode 100644 index 9ce8991..0000000 --- a/doc/source/v-0.10/tools/devtools-android.md +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: Devtools for Android -type: tools -order: 2.1 -version: 0.10 ---- - -# Devtools for Android - -[](https://github.com/weexteam/weex_devtools_android/releases) [](https://www.codacy.com/app/weex_devtools/weex_devtools_android?utm_source=github.com&utm_medium=referral&utm_content=weexteam/weex_devtools_android&utm_campaign=Badge_Grade) [](https://codeclimate.com/github/weexteam/weex_devtools_android) [](https://codeclimate.com/github/weexteam/weex_devtools_android) [](https://github.com/weexteam/weex_devtools_android/issues) [  ](https://bintray.com/alibabaweex/maven/weex_inspector/_latestVersion) - -Weex devtools is a custom devtools for weex that implements [Chrome Debugging Protocol](https://developer.chrome.com/devtools/docs/debugger-protocol) inspired by [Stetho](https://github.com/facebook/stetho), it is designed to help you quickly inspect your app and debug your JS bundle source in a chrome web page.At present The devtools consist of two part : `Inspector` and `Debugger`. If you want it work well, you must install a `weex-devtool` as debug server. - -- **Inspector** - Inspector can be used to show your `Element` \ `NetWork` \ `Console log` \ `ScreenCast` \ `BoxModel` \ `Native View` and so on. - -- **Debugger** - Debugger can be used to debug your bundle js source, you can set `Breakpoint` \ watch `CallStack`. - -## Install and launch devtools server -Open your terminal then type `npm install -g weex-toolkit` and run.Launch it just type and run the command `weex debug`, then a Chrome web page will be opened. - -## Use on an android device or emulator - -### Taste of first debug with playground -If you are a green hand to the debug of weex, we recommend you to try your first debug with `playground`, what you need to do is just launch the playground and scan the QR code shown in the debug page which wound opened if the `devtools server` have been launched. after you scan the QR code, the web page will list your connected devices. - - - -#### How Debugger Works -Devtools expands [Chrome Debugging Protocol](https://developer.chrome.com/devtools/docs/debugger-protocol) and the mechanism of communication between client and debug sever is based on [JSON-RPC](https://en.wikipedia.org/wiki/JSON-RPC). - -##### Devtools Client -Devtools Client is integrated in App as aar, it connects to debug server through webscoket protocol with out permission check. I recommend you just packaged it in your debug version consider of the security mechanism. - -##### Devtools Debug Server -Devtools Debug Server is the center node of the communication, it connects to both app and chrome, acts as the turn server of debugging protocol messages and the manager of the js runtime. - -##### Chrome FrontEnd -Chrome's V8 engine acts as the javascript runtime, when debug mode is enabled, all the js code run on it. On the other side we also reuse most of the Chrome's debugging user interface, such as set breakpoint, see call stack and so on. - - - -### Enable devtools in your own app -Of course you can reuse the code of playground to build your own app, that is the simplest way to let your app's js code debuggable. On the other hand QR code is not necessary, if your review the source code you can draw a conclusion that QR CODE is just a way to set `devtools server` address. following those steps you can do the same thing. - -#### Gradle dependency on inspector. -There are two choices to set the dependency, the Choice A is recommanded if you have no change to weex_sdk or inspector, while if you use your own custom weex_sdk or inspector Choice B is suitable. - - * *A - aar dependency from jcenter*. - ```` - dependencies { - compile 'com.taobao.android:weex_inspector:0.0.8.1' - } - ```` -I strongly recommend you use the latest version since both weex sdk and devtools are developed iteratively and rapidly. See the release version list [here](https://github.com/weexteam/weex_devtools_android/releases). All the release version will publish to the [jcenter repo](https://bintray.com/alibabaweex/maven/weex_inspector). - - * *B - source code dependency.* - - you need to copy the dir of inspector to the same dir of your app and add `include ":inspector"`in your project's `settings.gradle` file just like playground have done, then add dependency in your app's `build.gralde`. - ```` - dependencies { - compile project(':inspector') - } - ```` - -##### Version compatibility - -| weex sdk | weex inspector | debug server | -|----------|----------------|--------------| -|0.8.0.1+ | 0.0.8.1 |0.2.39+ | -|0.7.0+ | 0.0.7.13 |0.2.38 | -|0.6.0+ | 0.0.2.2 | | - - -#### Initialize in your XXXApplication file. -```` - public class MyApplication extends Application { - public void onCreate() { - super.onCreate(); - initDebugEnvironment(true, "xxx.xxx.xxx.xxx"/*"DEBUG_SERVER_HOST"*/); - } - private void initDebugEnvironment(boolean enable, String host) { - WXEnvironment.sRemoteDebugMode = enable; - WXEnvironment.sRemoteDebugProxyUrl = "ws://" + host + ":8088/debugProxy/native"; - } -} -```` - -#### Ship It! - 1. You must launch your bundle server firstly. In your weex dir, run command "./start"; - 2. Launch your remote debug server. Run command `weex debug`, chrome will open a web page show a simply guidance and QR code; - 3. Launch your app and make sure debug mode was enabled. You will see a device list in the chrome web page opened by last step, each device item have two button, `Debugger` and `Inspector`;There are two way to enable debug mode: - * scaning the QR code and handle the content just like the playground have done. - * init it in the XXXApplication by calling `initDebugEnvironment(true, "xxx.xxx.xxx.xxx")`, if you call `initDebugEnvironment(true, "xxx.xxx.xxx.xxx")` after weex sdk inited, you need to call `WXSDKEngine.reload()` to refresh the runtime. - 4. Once you click the button `Inspector` chrome will open a page show the inspector view, on the other side, click the button `Debugger` chrome will open a new page to show the debug view; - - - - - ---- - -#### OPTIONS - -##### [**OPTION**] *set your remote bundle server ip.* - - For example, in the playground it is in the `IndexActivity.java`, you need to change the value of `DEFAULT_IP` in IndexActivity.java from `"your_current_IP"` to a server ip like `"30.30.30.150"`: -```` - private static final String DEFAULT_IP = "30.30.30.150"; // "your_current_IP"; -```` - -##### [**OPTION**] *enable network inspection.* -```` -OkHttpClient client = new OkHttpClient(); -client.networkInterceptors().add(new OkHttpInterceptor()); -```` - -###### Notice - The network inspection only support OKHttpClient right now!!! If you want to use the network inspection to catch your bundle request, you must change your bundle server ip to the real server ip. - -#### Known Issues - You can report issues and bugs [here](https://github.com/weexteam/weex_devtools_android/issues). We will reply as soon as possible. http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/v-0.10/tools/devtools-ios.md ---------------------------------------------------------------------- diff --git a/doc/source/v-0.10/tools/devtools-ios.md b/doc/source/v-0.10/tools/devtools-ios.md deleted file mode 100644 index 602f63d..0000000 --- a/doc/source/v-0.10/tools/devtools-ios.md +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: Devtools for IOS -type: tools -order: 2.2 -version: 0.10 ---- - -# Devtools for IOS - -Remote debug for your native iOS app using Chrome Developer Tools - -## weex-devtool launchï¼ - -0. install and run weex-devtool - - $:npm install -g weex-devtool - - $:weex-devtool - - it will launch chrome browser, showing wss ip address in chrome address bar. - - -## playground install WXDevtool - -1. Install dependencies. - - $:pod install - -### Usage - -1. AppDelegate.m header file - - #import "WXDevTool.h" - -2. Initialize inspector when the APP launched - - **Note: The inspector API must be called before weex is initialized** - - + (void)setDebug:(BOOL)isDebug; - - isDebug default is NO, now you open inspect model. opposite is YES, if you set isDebug to YES, then open debug model and inspect model. - - + (void)launchDevToolDebugWithUrl:(NSString *)url; - wssip was the wss address showing in the chrome address bar. - - * open debug model and inspector model - - egï¼- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions - { - [WXDevTool setDebug:YES]; - [WXDevTool launchDevToolDebugWithUrl:@"ws://wssip/debugProxy/native"]; - } - - * open inspect model, remove the @selector(setDebug:) or add [WXDevTool setDebug:NO] - - egï¼- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions - { - [WXDevTool launchDevToolDebugWithUrl:@"ws://wssip/debugProxy/native"]; - } - - -3. Build and running APP, this time chrome will display your device with App name, select inspector to open the inspector tab. -4. Log print support for different levels of print. - - eg: #import "WXDevTool.h" - PDLogE()/PDLogW() - -### WXDevtool Dependencies - -Your app must be linked against the following frameworks/dylibs - -* libicucore.dylib -* CFNetwork.framework -* CoreData.framework -* Security.framework -* Foundation.framework http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/v-0.10/tools/devtools.md ---------------------------------------------------------------------- diff --git a/doc/source/v-0.10/tools/devtools.md b/doc/source/v-0.10/tools/devtools.md deleted file mode 100644 index f883055..0000000 --- a/doc/source/v-0.10/tools/devtools.md +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: Devtools -type: tools -order: 2 -has_chapter_content: true -version: 0.10 ---- - -# Devtools - -Weex devtools is a custom devtools for weex that implements [Chrome Debugging Protocol](https://developer.chrome.com/devtools/docs/debugger-protocol), it is designed to help you quickly inspect your app and debug your JS bundle source in a chrome web page, both Android and IOS platform are supported. - -## Install - -``` - $ npm install -g weex-toolkit -``` -#### usage -``` -weex debug [options] [we_file|bundles_dir] - - Options: - - -h, --help output usage information - -V, --verbose display logs of debugger server - -v, --version display version - -p, --port [port] set debugger server port - -e, --entry [entry] set the entry bundlejs path when you specific the bundle server root path - -m, --mode [mode] set build mode [transformer|loader] - -w, --watch watch we file changes auto build them and refresh debugger page![default enabled] -``` - -#### start debugger -``` -$weex debug -``` -this command will start debug server and launch a chrome opening `DeviceList` page. -this page will display a qrcode ,you can use `Playground App` scan it for starting debug. - -#### start debugger with a we file -``` -$weex debug your_weex.we -``` -this command will compile `your_weex.we` to `your_weex.js` and start the debug server as upon command. -`your_weex.js` will deploy on the server and displayed in `DeviceList` page as another qrcode contain the url of your_weex.js - - -#### start debugger with a directory of we files -``` -$weex debug your/we/path -e index.we -``` -this command will build every file in your/we/path and deploy them on the bundle server. your directory will mapping to http://localhost:port/weex/ -use -e to set the entry of these bundles. and the url of "index.we" will display on device list page as another qrcode. - -## Features - -### Connect devices - - -### Inspector - Inspector can be used to show your `Element` \ `Network` \ `Console log` \ `ScreenCast` \ `BoxModel` \ `Native View` and so on. - - - -#### Element -##### native view element - - -##### weex dom element - - -#### Network - -##### show the total time and latency - - -##### show the header and response - - -#### Console - - -#### Resource - - -### Debugger - - Debugger can be used to debug your bundle js source, you can set `Breakpoint` \ watch `CallStack`. - - - -#### Breakpoint and CallStack - - - -## Integrate devtools - -* Android - * See the doc [Weex devtools (Android)](/tools/devtools-android.html), it will lead you to config and use it step by step. -* IOS - * See the doc [Weex devtools (IOS)](/tools/devtools-ios.html), it will lead you to config and use it step by step. - http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/v-0.10/tools/index.md ---------------------------------------------------------------------- diff --git a/doc/source/v-0.10/tools/index.md b/doc/source/v-0.10/tools/index.md deleted file mode 100644 index 731c2f9..0000000 --- a/doc/source/v-0.10/tools/index.md +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: CLI -type: tools -order: 1 -has_chapter_content: true -version: 0.10 ---- - -# Weex-Toolkit - -Please access [npmjs.com](https://www.npmjs.com/package/weex-toolkit) for latest version - -Weex CLI tool set - -## Pre Install -some dependencies need recent version of npm to install - -if your -``` -$ npm --version -``` -output less then `2.15.1`, please run below cmd upgrade your npm at first -``` -sudo npm install -g npm -``` - -## Install -``` -$npm install -g weex-toolkit -``` - -## Usage - -``` -$weex foo/bar/input_path [options] - -$weex create file_name [options] - -Options: - --qr display QR code for native runtime, **default action** - -o,--output transform weex we file to JS Bundle, output path (single JS bundle file or dir) - [for create sub cmd] it specified we file output path - --watch using with -o , watch input path , auto run transform if change - happen - -s,--server start a http file server, weex .we file will be transforme to JS - bundle on the server , specify local root path using the option - --port http listening port number ,default is 8081 - --wsport websocket listening port number ,default is 8082 - -f, --force [for create sub cmd] force to replace exsisting file(s) - --version show version of weex toolkit - --help Show help -``` - -## Examples - -#### crate a `we file`(weex source file) using standard template -``` -$weex create hello-world-weex -``` -a file named 'hello-world-weex.we' we be created in current directory - - -#### transform a `we file` to JS Bundle -``` -$weex your_best_weex.we -o . -``` -`your_best_weex.we` will be transform to JS Bundle file `your_best_weex.js` , saved in your current directory - -#### transform a `we file` to JS Bundle , watch this file ï¼auto run transformer if change happen. -``` -$weex your_best_weex.we -o . --watch -``` - -#### transform every we file in a directory -``` -$weex we/file/storage/path -o outputpath -``` -every `we file` in `we/file/storage/path` we be transform to JS Bundle , saved in `outputpath` path - -#### preview your we file using Weex Playground App -download & install [weex playground App](http://alibaba.github.io/weex/download.html) -``` -$weex your_best_weex.we --qr -``` -a QR code will display in your terminal , using Playground App scan that. - - -#### start http server -``` -$weex -s . -``` -a http server will start running , your current directory(.) will be the document root for the server , every weex .we file will be transforme to JS Bundle when access through the server - -## Issue & Feedback - -[Github Issue List](https://github.com/weexteam/weex-toolkit/issues) -
