http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/references/modules/modal.md ---------------------------------------------------------------------- diff --git a/doc/source/references/modules/modal.md b/doc/source/references/modules/modal.md deleted file mode 100644 index 5fd034e..0000000 --- a/doc/source/references/modules/modal.md +++ /dev/null @@ -1,146 +0,0 @@ ---- -title: modal -type: references -order: 3.4 -version: 2.1 ---- - -# 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. - - For Android: If the duration is longer than 3, it will use a system defined variable called **LONG**, otherwise it will use another variable called **SHORT** - - For iOS: It will show the toast during the specified time. - -### 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. - -### 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. - -### 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 class="wrapper"> - <text class="button" @click="showToast">Toast</text> - <text class="button" @click="showAlert">Alert</text> - <text class="button" @click="showConfirm">Confirm</text> - <text class="button" @click="showPrompt">Prompt</text> - </div> -</template> - -<script> - var modal = weex.requireModule('modal') - - export default { - methods: { - showToast (event) { - console.log('will show toast') - modal.toast({ - message: 'This is a toast', - duration: 0.3 - }) - }, - showAlert (event) { - console.log('will show alert') - modal.alert({ - message: 'This is a alert', - duration: 0.3 - }, function (value) { - console.log('alert callback', value) - }) - }, - showConfirm (event) { - console.log('will show confirm') - modal.confirm({ - message: 'Do you confirm ?', - duration: 0.3 - }, function (value) { - console.log('confirm callback', value) - }) - }, - showPrompt (event) { - console.log('will show prompt') - modal.prompt({ - message: 'This is a prompt', - duration: 0.3 - }, function (value) { - console.log('prompt callback', value) - }) - } - } - }; -</script> - -<style scoped> - .wrapper { - flex-direction: column; - justify-content: center; - } - .button { - font-size: 60px; - width: 450px; - text-align: center; - margin-top: 30px; - margin-left: 150px; - padding-top: 20px; - padding-bottom: 20px; - border-width: 2px; - border-style: solid; - color: #666666; - border-color: #DDDDDD; - background-color: #F5F5F5 - } -</style> -``` - -[try it](http://dotwe.org/vue/a7dddfb24edb72be947fc4eec3803f1d) \ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/references/modules/navigator.md ---------------------------------------------------------------------- diff --git a/doc/source/references/modules/navigator.md b/doc/source/references/modules/navigator.md deleted file mode 100644 index e3ce51a..0000000 --- a/doc/source/references/modules/navigator.md +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: navigator -type: references -order: 3.5 -version: 2.1 ---- - -# 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. - -## 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. - -### 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 - -```html -<template> - <div class="wrapper"> - <text class="button" @click="jump">Jump</text> - </div> -</template> - -<script> - var navigator = weex.requireModule('navigator') - var modal = weex.requireModule('modal') - - export default { - methods: { - jump (event) { - console.log('will jump') - navigator.push({ - url: 'http://dotwe.org/raw/dist/519962541fcf6acd911986357ad9c2ed.js', - animated: "true" - }, event => { - modal.toast({ message: 'callback: ' + event }) - }) - } - } - }; -</script> - -<style scoped> - .wrapper { - flex-direction: column; - justify-content: center; - } - .button { - font-size: 60px; - width: 450px; - text-align: center; - margin-top: 30px; - margin-left: 150px; - padding-top: 20px; - padding-bottom: 20px; - border-width: 2px; - border-style: solid; - color: #666666; - border-color: #DDDDDD; - background-color: #F5F5F5 - } -</style> -``` - -[try it](http://dotwe.org/vue/5c670b07735ee6d08de5c8eb93f91f11) \ No newline at end of file http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/references/modules/picker.md ---------------------------------------------------------------------- diff --git a/doc/source/references/modules/picker.md b/doc/source/references/modules/picker.md deleted file mode 100644 index 64f0ed6..0000000 --- a/doc/source/references/modules/picker.md +++ /dev/null @@ -1,129 +0,0 @@ ---- -title: picker -type: references -order: 3.11 -version: 2.1 ---- - -# picker - -<span class="weex-version">v0.9+</span> - -## Summary - -A series of stream api. It provides function: pick data,pick date,pick time - -## API -### `pick(options, callback[options])` - -pick data(single column) - -#### Arguments - -- `options {Object}`:pick options - - `index {number}`:default selected row - - `items {array}`:picker's data - -- `callback {function (ret)}`:the callback function after executing this action.`ret {Object}` is `callback` 's parameter: - - `result {string}`:result is one of success,cancel,error - - `data {number}`:the selected index,it exists when result is success. - -### `pickDate(options, callback[options])` - -pick date - -#### Arguments - -- `options {Object}`:pick date options - - `value {string}`:Requiredï¼date picker selected value by defaultï¼date's form is yyyy-MM-dd - - `max {string}`:optionalï¼dateâs max value - - `min {string}`:optionalï¼date's min value - -- `callback {function (ret)}`ï¼the callback function after executing this action.ret {Object} is callback 's parameter: - - `result {string}`:result is one of success,cancel,error - - `data {string}`:the selected valueï¼the form of data is yyyy-MM-dd ,it exists when result is success. - -### `pickTime(options, callback[options])` - -pick time - -#### Arguments - -- `options {Object}`:pick time options - - `value {string}`:requiredï¼the form of value is HH:mm - -- `callback {function (ret)}`:the callback function after executing this action.ret {Object} is callback 's parameterï¼ - - `result {string}`:result is one of success,cancel,error - - `data {string}`:the selected valueï¼the form of data is HH:mm,it exists when result is success. - -## Example - -```html -<template> - <div class="wrapper"> - <div class="group"> - <text class="label">Time: </text> - <text class="title">{{value}}</text> - </div> - <div class="group"> - <text class="button" @click="pickTime">Pick Time</text> - </div> - </div> -</template> - -<script> - const picker = weex.requireModule('picker') - - export default { - data () { - return { - value: '' - } - }, - methods: { - pickTime () { - picker.pickTime({ - value: this.value - }, event => { - if (event.result === 'success') { - this.value = event.data - } - }) - } - } - } -</script> - -<style scoped> - .wrapper { - flex-direction: column; - justify-content: center; - } - .group { - flex-direction: row; - justify-content: center; - margin-bottom: 40px; - align-items: center; - } - .label { - font-size: 40px; - color: #888888; - } - .title { - font-size: 80px; - color: #41B883; - } - .button { - font-size: 36px; - width: 280px; - color: #41B883; - text-align: center; - padding-top: 25px; - padding-bottom: 25px; - border-width: 2px; - border-style: solid; - border-color: rgb(162, 217, 192); - background-color: rgba(162, 217, 192, 0.2); - } -</style> -``` \ No newline at end of file http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/references/modules/storage.md ---------------------------------------------------------------------- diff --git a/doc/source/references/modules/storage.md b/doc/source/references/modules/storage.md deleted file mode 100644 index faac53c..0000000 --- a/doc/source/references/modules/storage.md +++ /dev/null @@ -1,172 +0,0 @@ ---- -title: storage -type: references -order: 3.6 -version: 2.1 ---- - -# 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. - -### 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. - -### 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 = weex.requireModule('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. - -### getAllKeys(callback) - -Returns an array that contains all keys stored in Storage object. - -#### Arguments - -* `callback`*(object)*: the callback function after executing this action. - -## Example - -```html -<template> - <div class="list"> - <div class="group center"> - <div class="panel"><text class="text">{{state}}</text></div> - </div> - <div class="group"> - <div class="panel"><text class="text" @click="setItem">set</text></div> - <div class="panel"><text class="text" @click="getItem">get</text></div> - <div class="panel"><text class="text" @click="removeItem">remove</text></div> - <div class="panel"><text class="text" @click="getAll">all</text></div> - </div> - </div> -</template> - -<script> - const storage = weex.requireModule('storage') - const modal = weex.requireModule('modal') - - export default { - data () { - return { - keys: '[]', - length: 0, - state: '----' - } - }, - methods: { - setItem () { - storage.setItem('name', 'Hanks', event => { - this.state = 'set success' - console.log('set success') - }) - }, - getItem () { - storage.getItem('name', event => { - console.log('get value:', event.data) - this.state = 'value: ' + event.data - }) - }, - removeItem () { - storage.removeItem('name', event => { - console.log('delete value:', event.data) - this.state = 'deleted' - }) - }, - getAll () { - storage.getAllKeys(event => { - // modal.toast({ message: event.result }) - if (event.result === 'success') { - modal.toast({ - message: 'props: ' + event.data.join(', ') - }) - } - }) - } - } - } -</script> - -<style scoped> - .panel { - height: 100px; - flex-direction: column; - justify-content: center; - border-width: 2px; - border-style: solid; - border-color: rgb(162, 217, 192); - background-color: rgba(162, 217, 192, 0.2); - } - .group { - flex-direction: row; - justify-content: space-between; - width: 650px; - margin-left: 50px; - margin-top: 50px; - margin-bottom: 50px; - } - .center { - justify-content: center; - } - .text { - font-size: 50px; - text-align: center; - padding-left: 25px; - padding-right: 25px; - color: #41B883; - } - .small { - font-size: 32px; - padding-left: 35px; - padding-right: 35px; - color: #41B883; - } -</style> -``` - -[try it](http://dotwe.org/vue/3fdd3e2d1646ca41199d80c7be799858) \ No newline at end of file http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/references/modules/stream.md ---------------------------------------------------------------------- diff --git a/doc/source/references/modules/stream.md b/doc/source/references/modules/stream.md deleted file mode 100644 index 986ccdb..0000000 --- a/doc/source/references/modules/stream.md +++ /dev/null @@ -1,131 +0,0 @@ ---- -title: stream -type: references -order: 3.7 -version: 2.1 ---- - -# 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): response 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. - -### Note - - - Default Content-Type is 'application/x-www-form-urlencoded'. (The type specified in fetch is the response type!) - - You need to set the Content-Type header to 'application/json' manually if you want to post the json body. - -### Example - -```html -<template> - <div class="wrapper"> - <div class="group"> - <text class="title">Weex Star :</text> - <text class="count">{{weexStar}}</text> - </div> - <div class="group"> - <text class="title">Vue Star :</text> - <text class="count">{{vueStar}}</text> - </div> - </div> -</template> - -<script> - var stream = weex.requireModule('stream') - export default { - data () { - return { - weexStar: 'unknown', - vueStar: 'unknown' - } - }, - - methods: { - getStarCount (repo, callback) { - return stream.fetch({ - method: 'GET', - type: 'json', - url: 'https://api.github.com/repos/' + repo - }, callback) - } - }, - created () { - this.getStarCount('alibaba/weex', res => { - this.weexStar = res.ok ? res.data.stargazers_count : '(network error)' - }) - this.getStarCount('vuejs/vue', res => { - this.vueStar = res.ok ? res.data.stargazers_count : '(network error)' - }) - } - } -</script> - - -<style scoped> - .wrapper { - flex-direction: column; - justify-content: center; - } - .group { - flex-direction: row; - justify-content: center; - margin-bottom: 40px; - } - .title { - font-size: 45px; - color: #888888; - } - .count { - font-size: 45px; - font-weight: bold; - margin-left: 12px; - color: #41B883; - } -</style> -``` - -[try it](http://dotwe.org/vue/29bbf2d49fc8a204f98240044bbe211a) \ No newline at end of file http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/references/modules/timer.md ---------------------------------------------------------------------- diff --git a/doc/source/references/modules/timer.md b/doc/source/references/modules/timer.md deleted file mode 100644 index 9e7da63..0000000 --- a/doc/source/references/modules/timer.md +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: Timer -type: references -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). The behavior of invalid value for timeout or interval is undefined. - -### 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/vue/ad564965f1eac5a4bc86946ecff70a0c) http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/references/modules/websocket.md ---------------------------------------------------------------------- diff --git a/doc/source/references/modules/websocket.md b/doc/source/references/modules/websocket.md deleted file mode 100644 index cb36ed1..0000000 --- a/doc/source/references/modules/websocket.md +++ /dev/null @@ -1,218 +0,0 @@ ---- -title: WebSocket -type: references -order: 3.11 -version: 2.1 ---- - -# WebSocket -<span class="weex-version">v0.12+</span> - -## Summary - -WebSockets is an advanced technology that makes it possible to open an interactive communication session between the user's H5/iOS/android and a server. With this API, you can send messages to a server and receive event-driven responses without having to poll the server for a reply - -## **Notes:** -- iOS and h5 provide webSocket default handle. if you use webSocket in android environment . you should provide custom adapter implementation,source: - - [DefaultWebSocketAdapter.java](https://github.com/apache/incubator-weex/blob/dev/android/commons/src/main/java/com/alibaba/weex/commons/adapter/DefaultWebSocketAdapter.java); - - [DefaultWebSocketAdapterFactory.java](https://github.com/apache/incubator-weex/blob/dev/android/commons/src/main/java/com/alibaba/weex/commons/adapter/DefaultWebSocketAdapterFactory.java); - - refer: [weex playground](https://github.com/apache/incubator-weex/tree/dev/android/playground) - -## API -### `WebSocket(url, protocol)` - -create websocket - -#### Arguments - -- `url {string}`:The URL to which to connect; -- `protocol {string}`:the websocket protocol - -### `send(data)` - -Transmits data to the server over the WebSocket connection - -#### Arguments - -- `data {string}`:A text string to send to the server. - -### `close(code,reason)` - -Closes the WebSocket connection or connection attempt, if any. If the connection is already CLOSED, this method does nothing. - -#### Arguments - -- `code {number}`: the status code explaining why the connection is being closed. -- `reason {string}`:a string explaining why the connection is closing - -### `onopen(options)` - -An event listener to be called when the WebSocket connection's readyState changes to OPEN; this indicates that the connection is ready to send and receive data. - -#### Arguments - -- `options {object}`:an empty object - -### `onmessage(options)` - -An event listener to be called when a message is received from the server - -#### Arguments - -- `options {object}`:the server message options - - `data {string}`: The listener received message - -### `onclose(options)` - -An event listener to be called when the WebSocket connection's readyState changes to CLOSED - -#### Arguments - -- `options {object}`:the CloseEvent is sent to clients using WebSockets when the connection is closed - - `code {number}`: Returns an unsigned short containing the close code send by the server - - `reason {string}`: Returns a string indicating the reason the server closed the connection - - `wasClean {boolen}`: Returns a Boolean that Indicates whether or not the connection was cleanly closed. - -### `onerror(options)` - -An event listener to be called when an error occurs. - -#### Arguments - -- `options {object}`:the error event - - `data {string}`: The listener received error data - -### Example - -```html -<template> - <scroller> - <div> - <div style="background-color: #286090"> - <text class="title" style="height: 80px ;padding: 20px;color: white">websocket</text> - </div> - <input type="text" placeholder="please input message to send" class="input" autofocus="false" value="" @change="onchange" @input="oninput" ref="input"/> - <div style="flex-direction: row; justify-content: center;"> - <text class="button" @click="connect">connect</text> - <text class="button" @click="send">send</text> - <text class="button" @click="close">close</text> - </div> - - <div style="background-color: lightgray"> - <text class="title" style="height: 80px ;padding: 20px;color: black">method = send</text> - </div> - <text style="color: black;height: 80px">{{sendinfo}}</text> - - - <div style="background-color: lightgray"> - <text class="title" style="height: 80px ;padding: 20px;color: black">method = onopen</text> - </div> - <text style="color: black;height: 80px">{{onopeninfo}}</text> - - <div style="background-color: lightgray"> - <text class="title" style="height: 80px ;padding: 20px;color: black">method = onmessage</text> - </div> - <text style="color: black;height: 400px">{{onmessage}}</text> - - <div style="background-color: lightgray"> - <text class="title" style="height: 80px ;padding: 20px;color: black">method = onclose</text> - </div> - <text style="color: black;height: 80px">{{oncloseinfo}}</text> - - <div style="background-color: lightgray"> - <text class="title" style="height: 80px ;padding: 20px;color: black">method = onerror</text> - </div> - <text style="color: black;height: 80px">{{onerrorinfo}}</text> - - <div style="background-color: lightgray"> - <text class="title" style="height: 80px ;padding: 20px;color: black">method = close</text> - </div> - <text style="color: black;height: 80px">{{closeinfo}}</text> - - </div> - - </scroller> -</template> - -<style scoped> - .input { - font-size: 40px; - height: 80px; - width: 600px; - } - .button { - font-size: 36px; - width: 150px; - color: #41B883; - text-align: center; - padding-top: 25px; - padding-bottom: 25px; - border-width: 2px; - border-style: solid; - margin-right: 20px; - border-color: rgb(162, 217, 192); - background-color: rgba(162, 217, 192, 0.2); - } -</style> - - -<script> - var websocket = weex.requireModule('webSocket') - export default { - data () { - return { - connectinfo: '', - sendinfo: '', - onopeninfo: '', - onmessage: '', - oncloseinfo: '', - onerrorinfo: '', - closeinfo: '', - txtInput:'', - navBarHeight: 88, - title: 'Navigator', - dir: 'examples', - baseURL: '' - } - }, - methods: { - connect:function() { - websocket.WebSocket('ws://echo.websocket.org',''); - var self = this; - self.onopeninfo = 'connecting...' - websocket.onopen = function(e) - { - self.onopeninfo = 'websocket open'; - } - websocket.onmessage = function(e) - { - self.onmessage = e.data; - } - websocket.onerror = function(e) - { - self.onerrorinfo = e.data; - } - websocket.onclose = function(e) - { - self.onopeninfo = ''; - self.onerrorinfo = e.code; - } - }, - send:function(e) { - var input = this.$refs.input; - input.blur(); - websocket.send(this.txtInput); - this.sendinfo = this.txtInput; - }, - oninput: function(event) { - this.txtInput = event.value; - }, - close:function(e) { - websocket.close(); - }, - }, - } -</script> -``` - -[Have a try](http://dotwe.org/vue/6d8bdfe66f24fda1a2dc6158b0182573) http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/references/modules/webview.md ---------------------------------------------------------------------- diff --git a/doc/source/references/modules/webview.md b/doc/source/references/modules/webview.md deleted file mode 100644 index c67dfe7..0000000 --- a/doc/source/references/modules/webview.md +++ /dev/null @@ -1,156 +0,0 @@ ---- -title: webview -type: references -order: 3.9 -version: 2.1 ---- - -# 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 = weex.requireModule('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 = weex.requireModule('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 = weex.requireModule('webview'); -var webElement = this.$el('webview'); -webview.reload(webElement.ref); -``` - -## Example - -```html -<template> - <div class="wrapper"> - <div class="group"> - <input class="input" v-model="value" ref="input" type="url" autofocus="false"></input> - </div> - <div class="group"> - <text class="button" @click="loadURL">LoadURL</text> - <text class="button" @click="reload">reload</text> - </div> - <web ref="webview" :src="url" class="webview" @pagestart="start" @pagefinish="finish" @error="error"></web> - </div> -</template> - -<script> - const webview = weex.requireModule('webview') - const modal = weex.requireModule('modal') - - export default { - data () { - return { - url : 'https://m.alibaba.com', - value: 'https://m.alibaba.com' - } - }, - methods: { - loadURL (event) { - this.url = this.value - modal.toast({ message: 'load url:' + this.url }) - setTimeout(() => { - console.log('will go back.') - modal.toast({ message: 'will go back' }) - webview.goBack(this.$refs.webview) - }, 10000) - }, - reload (event) { - console.log('will reload webview') - modal.toast({ message: 'reload' }) - webview.reload(this.$refs.webview) - }, - start (event) { - console.log('pagestart', event) - modal.toast({ message: 'pagestart' }) - }, - finish (event) { - console.log('pagefinish', event) - modal.toast({ message: 'pagefinish' }) - }, - error (event) { - console.log('error', event) - modal.toast({ message: 'error' }) - } - } - } -</script> - -<style scoped> - .group { - flex-direction: row; - justify-content: space-around; - margin-top: 20px; - } - .input { - width: 600px; - font-size: 36px; - padding-top: 15px; - padding-bottom: 15px; - border-width: 2px; - border-style: solid; - border-color: #BBBBBB; - } - .button { - width: 225px; - text-align: center; - background-color: #D3D3D3; - padding-top: 15px; - padding-bottom: 15px; - margin-bottom: 30px; - font-size: 30px; - } - - .webview { - margin-left: 75px; - width: 600px; - height: 750px; - border-width: 2px; - border-style: solid; - border-color: #41B883; - } -</style> -``` - -[try it](http://dotwe.org/vue/221ff37113a12d692a7a92a100f20162) \ No newline at end of file http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/references/native-dom-api.md ---------------------------------------------------------------------- diff --git a/doc/source/references/native-dom-api.md b/doc/source/references/native-dom-api.md deleted file mode 100644 index 37729a2..0000000 --- a/doc/source/references/native-dom-api.md +++ /dev/null @@ -1,212 +0,0 @@ ---- -title: Native DOM APIs -type: references -order: 6 -version: 2.1 -has_chapter_content: true ---- - -# Native DOM APIs - -Weex in the JS engine, for each page provides a set of Native DOM APIs. This interface is very close to the HTML DOM APIs. Using this interface we can control native rendering logic via JavaScript. And Weex upper layer of Vue 2.0 is based on this interface to adapt. - -In most cases, the JS framework will encapsulate native DOM APIs. That way, the developer does not need to work directly on the Native DOM. - -+ `Document` class: full page document. -+ `Node` class: the base class of nodes. -+ `Element` class: element node, inherited from Node, single view unit. -+ `Comment` class: comment node, inherited from Node, no practical meaning, usually used as placeholders. - -Each Weex page has a `weex.document` object, which is an instance of the Document class and is the starting point for all the following interface calls. - -Let's take a look at their usage in detail: - -## `Document` class -Each `Document` instance will automatically have a `documentElement` property when it is created. This attribute represents the document node. The document node can have a body, which is the main node of the document. - -Note: The document node body only accepts `<div>`, `<list>`, or `<scroller>` three types of element nodes. - -### Constructor -`new Document(id: string, url: string?)` - -### Member method -`createElement(tagName: string, props: Object?): Element` - -+ Creates an `Element` instance of a specific type `tagName`, which is an element node. Props can contain attr objects and style objects. Such as `createBody ('div', {style: {backgroundColor: '#ffffff'}})`. - -`createComment(text: string): Comment` - -+ Create an instance of ·`Comment`, which is a comment node and set a text description. - -`createBody(tagName: string, props: Object?): Element` - -+ Create a document body node and automatically mount it under `documentElement`. - -`fireEvent(el: Element, type: string, e: Object?, domChanges: Object?)` -Triggers a particular type of event. When the event modifies the DOM's properties or styles during the generation process, the fourth argument is used to describe the changes, and the parameter format is the same as the format of the `createElement` method above. - -`destroy()` - -+ Destroy the current document. Once the document is destroyed, it will no longer work. - -### Read-only member variables -`id: string` - -+ Each `Document` instance has a unique id. This is also the only id that each Weex page has. - -`URL: string?` - -+ If the current Weex page has a JS bundle URL, the URL will be returned here. - -`body: Element` - -+ The main body of the document, the concept similar to the HTML DOM document.body. - -`documentElement: Element` - -+ Document node, the concept similar to the HTML DOM document.documentElement. -+ The relationship between body and documentElement is: documentElement is the parent of the body. - -`getRef(id): Node` - -+ Get the node based on the node id. - -## `Node` Class -### Constructor -`new Node()` - -### Member method -`destroy()` - -### Read-only member variables or methods -`ref: string` - -+ Each `Node` instance has its own unique ref value in the entire `Document instance. - -`nextSibling: Node?` - -`previousSibling: Node?` - -`parentNode: Node?` - -+ The three interfaces are consistent with the definition of HTML DOM. - -`children: Node[]` - -+ The node has an array of all child nodes. - -`pureChildren: Node[]` - -The node has an array of all the child elements. The difference between it and `children` is that `pureChildren` contains only the `Element` instance and not the `Comment` instance. - - -## `Element` class, inherited from `Node` -### Constructor -`new Element(type: string, props: Object?)` - -+ Creates an element node of a particular type `type`, and the `props` parameter can contain an `attr` object or a `style` object. - -### DOM tree operation -`appendChild(node: Node)` -`insertBefore(node: Node, before: Node?)` - -+ The two interfaces are similar to HTML DOM. - -`insertAfter(node: Node, after: Node?)` - -+ Insert a new node before a child node. - -`removeChild(node: Node, preserved: boolean?)` - -+ Delete the child node node. Parameters `preserved` whether it is immediately removed from memory or temporarily retained. - -`clear()` - -+ Clear all child nodes. - -### The DOM property itself operates - -`setAttr(key: string, value: string, silent: boolean?)` - -`setStyle(key: string, value: string, silent: boolean?)` - -+ In the above two interfaces, when `silent` is true, the node only updates itself, does not pass the command to the client render layer. This parameter is used to handle user events that have changed the node-related properties at the time of occurrence, and will not send commands repeatedly to the client after the Native DOM has changed. - -`addEvent(type: string, handler: Function)` - -`removeEvent(type: string)` - -`fireEvent(type: string, e: any)` - -+ Bind events, unbind events, trigger events. - -#### Component method for a specific component type - -Special: Different component types can have their own unique methods, such as `<web>` components support `refresh` method. You can see the description of each component. In this case, we will generate a specific component type of class, such as `WebElement`, which inherited from `Element`. - -Such as: - ->`WebElement` inherited from `Element` ->Indicates that a webview is embedded in the Wex page - ->`Refresh ()`: Refreshes the current webview - - -### Read-only member variables or methods - -`ref`, `nextSibling`, `previousSibling`, `parentNode` - -+ Inherited from `Node`. - -`nodeType: number` - -+ The number is always 1. - - -`type: string` - -+ Consistent with the `type` in the constructor. - -`attr: Object` - -+ The key pair of all the characteristics of the current node. It is recommended to use the `setAttr ()` method to modify, rather than directly modify the object here. - -`style: Object` - -+ The value of all the keys of the current node. It is recommended to modify the `setStyle ()` method, rather than directly modify the object here. - -`event: Object` - -+ All events of the current node are bound. Each event type corresponds to an event handler method. It is recommended to use the `addEvent () / removeEvent ()` method to modify, rather than directly modify the object here. - -`toJSON(): Object` - -+ Returns a JSON object that describes the element's node, such as: `{ref: string, type: string, attr: Object, style: Object, event: Array (string), children: Array}`. - - -## `Comment` class, inherited from `Node` - -### Constructor -`new Comment(value: string)` - -### Read-only member variables or methods - -`ref`, `nextSibling`, `previousSibling`, `parentNode` - -+ Inherited from `Node`. - -`nodeType: number` - -+ The number is always 8. - -`type: string` - -+ The type is always `'comment'` - -`value: string` - -+ Consistent with the value in the constructor. - -`toJSON(): Object` - -+ Returns a JSON object describing the annotation node. For example: `<! - value ->`. http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/references/path.md ---------------------------------------------------------------------- diff --git a/doc/source/references/path.md b/doc/source/references/path.md deleted file mode 100644 index 20f7322..0000000 --- a/doc/source/references/path.md +++ /dev/null @@ -1,37 +0,0 @@ ---- -title: Path -type: references -order: 1.9 -version: 2.1 -has_chapter_content: true ---- - -# Path - -<span class="weex-version">0.9</span> - -This article will cover uri (url) usage in Weex. Including using image/typeface resources, deal with relative uri and how to access local and packaged asset files. - -## Schemes - -* Local -Weex SDK provide `local` scheme to access resources packaged with application, and of cource, it's not working in the HTML5 runtime. -Currently, developers can use this scheme with `image` and text's font file location. - * In iOS, it's always locate file in 'bundle resources'. For example, a `image` component with `local:///app_icon` will load image file named 'app_icon' in bundle resouce, and font file work in the same way. - * In Android, image component will load from 'drawable' resource folder like 'res/drawable-xxx'. But load font file is different, android framework can not load font file from 'res', so SDK will load it from `asserts` folder. - -* HTTP/HTTPS -It's working in the same way as in web, Weex support these at very beginning. - -* File -Use `file` scheme to access local disk file. This scheme has its limitations: You would not hard coded a file url in source page. Because not matter it's running in different platform(iOS, Android) or not, the content will be totally different in another device, which is depend to the specific device. -So one possible case is getting the file url in runtime dynamically, which you can use it to diaplay a local disk image, or maybe upload it later. - -## Relative URI - -[Like we do in HTML](https://www.w3.org/TR/html4/types.html#type-uri), weex process 'relative URI' in the same way. The relative URI, which start with `/`,`.`,`..`,`//`, will resolve by the bunle url. -Means URL start with `/` will resolve to the root folder as bundle js file, `.` and `..` will resolve to current and parent folder, and `//` will resolve to same scheme bundle js have. - -## URI Adapter - -All the above is the default implementation, developers can extend or override these their own by providing a 'URI Adapter'. Same as the other adapters, Custom adapter should be set before Weex SDK is initializing. \ No newline at end of file http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/references/platform-difference.md ---------------------------------------------------------------------- diff --git a/doc/source/references/platform-difference.md b/doc/source/references/platform-difference.md deleted file mode 100644 index 0aadfae..0000000 --- a/doc/source/references/platform-difference.md +++ /dev/null @@ -1,11 +0,0 @@ ---- -title: Platform Differences Between Weex and Web -type: references -order: 12 -version: 2.1 -has_chapter_content: true ---- - -# Platform Differences Between Weex and Web - -Work in progresss. http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/references/text-style.md ---------------------------------------------------------------------- diff --git a/doc/source/references/text-style.md b/doc/source/references/text-style.md deleted file mode 100644 index c8e140f..0000000 --- a/doc/source/references/text-style.md +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: Text Style -type: references -order: 1.6 -version: 2.1 ---- - -# Text Style - -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`<span class="api-version">v0.9+</span>: - * values: `normal`, `bold`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900` - * normal is equal to 400, bold equel to 700 - * default value: `normal` - * apply to: `<text>`, `<input>` - * ios support showing 9 kind of font-weight. - * android support showing 2 kind of font-weight:400,700, other value will map to 400 or 700 - * Some standard values like `lighter`, `bolder`, number unit are not supported. - * The effect not apply to all elements, just `<text>` and `<input>`. In another way, it's not inherited. -- `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/references/unit.md ---------------------------------------------------------------------- diff --git a/doc/source/references/unit.md b/doc/source/references/unit.md deleted file mode 100644 index 6140557..0000000 --- a/doc/source/references/unit.md +++ /dev/null @@ -1,11 +0,0 @@ ---- -title: CSS unit -type: references -order: 4 -version: 2.1 -has_chapter_content: true ---- - -# CSS unit - -Work in progresss. \ No newline at end of file http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/references/vue/difference-of-vuex.md ---------------------------------------------------------------------- diff --git a/doc/source/references/vue/difference-of-vuex.md b/doc/source/references/vue/difference-of-vuex.md deleted file mode 100644 index 5929769..0000000 --- a/doc/source/references/vue/difference-of-vuex.md +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: Using Vuex and vue-router -type: references -order: 10.2 -version: 2.1 ---- - -# Using Vuex and vue-router - -Vue.js also has many peripheral technology products such as [Vuex](https://github.com/vuejs/vuex) and [vue-router](https://github.com/vuejs/vue-router), etc. Those libraries can also works well in Weex. - -> We developed a complete project based on Weex and Vue.js which named [weex-hackernews](https://github.com/weepteam/web-ehackernews). We used Vuex and vue-loader in it, and it works well on both iOS, Android and web. - -## Using Vuex - -> [Official Vuex documents](https://vuex.vuejs.org/en/) - - - -Vuex is a state management pattern + library for Vue.js applications. it's also a library implementation tailored specifically for Vue.js to take advantage of its granular reactivity system for efficient updates. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion. - -As a kind of state management library, Vuex is platform-independent, It also can be used in Weex. Read its [official documents](https://vuex.vuejs.org/en/) for more details. - -It also integrates with Vue's official [devtools extension](https://github.com/vuejs/vue-devtools) to provide advanced features on web platform, such as zero-config time-travel debugging and state snapshot export / import. (web platform only) - -## Using vue-router - -> [Official vue-router documents](https://router.vuejs.org/en/) - -Creating a Single-page Application with Vue.js + vue-router is dead simple. With Vue.js, you are already composing our application with components. When adding vue-router to the mix, all you need to do is map your components to the routes and let vue-router know where to render them. - -However, there are many difference between web and Android or iOS, some features of vue-router are limited in Weex. - -### Router mode - -vue-router provides three routing modes: - -+ `hash`: uses the URL hash for routing. Works in all Vue-supported browsers, including those that do not support HTML5 History API. (**default**) -+ `history`: requires HTML5 History API and server config. See [HTML5 History Mode](https://router.vuejs.org/en/essentials/history-mode.html). -+ `abstract`: works in all JavaScript environments, e.g. server-side with Node.js. - -You can pass the `mode` parameter when creating a router: - -```js -new Router({ - mode: 'abstract', - // ... -}) -``` - -Obviously "hash" mode and "history" mode are only available on the web, and have no effect in Weex. That is, you have to use "abstract" mode in Android and iOS. However, **vue-router will automatically be forced into "abstract" mode if no browser API is present.** so, just don't set the `mode` option, or set it to "abstract". - -### Programmatic navigation - -vue-router use `<router-link>` to create a navigation link, but in which some of the features based on the DOM events, it doesn't work well in the native environment. In Weex, you must use the [Programmatic Navigation](https://router.vuejs.org/en/essentials/navigation.html) to manage the router. - -Here is an basic example using `<router-link>`: - -```html -<!-- Can only be used on the web, it takes no effects on Android or iOS! --> -<template> - <div> - <router-link to="profile"> - <text>Profile</text> - </router-link> - </div> -</template> -``` - -For native platforms, you have to use the `router.push`: - -```html -<template> - <div> - <text @click="jump">Profile</text> - </div> -</template> - -<script> - import router from './path/to/router' - export default { - methods: { - jump () { - router.push('profile') - } - } - } -</script> -``` http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/references/vue/difference-with-web.md ---------------------------------------------------------------------- diff --git a/doc/source/references/vue/difference-with-web.md b/doc/source/references/vue/difference-with-web.md deleted file mode 100644 index b750591..0000000 --- a/doc/source/references/vue/difference-with-web.md +++ /dev/null @@ -1,149 +0,0 @@ ---- -title: Difference with Web -type: references -order: 10.1 -version: 2.1 ---- - -# Differences between using Vue in Web and Weex - -## Platform Differences - -Vue.js was designed for the Web platform at the begining. Although it can be based on Weex to develop native applications, there are still many differences between web and native. See [Platform Differences Between Weex and Web](../platform-difference.html) for more details. - -Due to those differences, Weex doesn't support those features in Vue.js (mostly are DOM-related): - -+ Event bubbling and capturing are not supported. Event modifiers, such as `.prevent`,` .capture`, `.stop`,` .self` are meaningless in the native environment. -+ The keyboard event modifiers, like `.{KeyCode | keyAlias}` is also meaningless. (see [docs in Vue.js](https://vuejs.org/v2/guide/events.html#Key-Modifiers)) -+ No need to call `vm.$mount` manually, the entry component will mount to the root view of the native container by default. -+ `v-html` and` v-text` directives are not supported. - -## Functional differences - -### Vue 2.0 Runtime-only build - -Vue 2.0 provides two available builds, the standalone build and the runtime-only build. see the [official document](https://vuejs.org/v2/guide/installation.html#Standalone-vs-Runtime-only-Build) for more information. - -Weex only required the runtime-only build of Vue 2.0 for better performance and less code size. - -The specific differences are: - -+ The `template` attribute is not supported when defining a component. -+ Does not support using `x-templates`. -+ Does not support using `Vue.compile`. - -### Isolate the context of multiple pages - -Weex use the "multiple-pages" concept in native, different js bundle will be run in different native views, there context is isolated. Even the `Vue` variable is not the same instance between js bundles. (However, all the js bundle will share the same Weex runtime.) - -Based on this feature, the global configurations in `Vue` will only take effect on the current page: - -+ `Vue.config` -+ `Vue.component` -+ `Vue.directive` -+ `Vue.filter` -+ `Vue.mixin` -+ `Vue.use` - -> Note: Those methods are still work, but its effect will be limited to the current page. - -## Restrictions in style - -CSS is very flexible, has a lot of properties, support a variety of layout modes. This is the advantage of CSS, but also a bottleneck in browser performance optimization. - -The style in Weex is parsed by the native renderer, and for the sake of performance and complexity, Weex makes some trade-offs about CSS features to make it better suited to *"best practices"*. - -### Single class selector - -Weex only supports to use single class name in `<style>`, does not support *type selectors*, *ID selectors*, *attribute selectors*, *adjacent sibling selectors* and the *combinators*. - -```CSS -/* Support single class name selector */ -.one-class { -  font-size: 36px; -} - -/* Does not support to use combinators between selector */ -.parent > .child { -  padding-top: 10px; -} -.foo + .bar { - margin-left: 20px; -} - -/* Does not support attribute selectors. The `v-cloak` directive is not supported */ -[V-cloak] { -  color: #FF6600; -} -``` - -The restriction is only for the style definition, does not affect the use of class names. You can still use multiple class names on a single tag, such as: - -```Html -<template> -  <div class="one two three"><div> -</template> -``` - -### Scoped by default - -In Weex, For single file components, the styles written in the `<style>` can only be used in the current component. - -In order to maintain consistency with Native, it is recommended that you write the style in the `.vue` file with the` scoped` attribute, that is, `<style scoped>`. - -### Supported CSS attributes - -Weex supports a subset of CSS, and will continue to expand. - -Weex supports *box-model* and *flexbox*, as well as other common styles. See [Weex Common Style](../ common-style.html) and [Supported Web Standards](http://weex.apache.org/references/web-standards.html) for more information. - -In addition, you should also pay attention to the following points: - -+ No need to write style prefix. -+ Weex doesn't support `display: none;` and therefore doesn't support the `v-show` directive. -+ In order to optimize the efficiency of CSS parser, Weex doesn't support shorthand attributes, involving the following attributes: - + `flex` -  + `border`, `border-(top|bottom|left|right)` -  + `margin` -  + `padding` -  + `font` -  + `background` - -## Differences in development - -Because of the platform difference, you have to compile your source file in two different ways: - -+ For the web, you can compile source files in any official way, such as Webpack + vue-loader or Browserify + vueify. and require the [weex-vue-render](https://www.npmjs.com/package/weex-vue-render), which is a group of Weex build-in components. -+ For Android and iOS, we've provided [weex-loader](https://github.com/weexteam/weex-loader) to compile the `.vue` files. That is, use Webpack + weex-loader to generate the js bundle that is available for the native. - -### Use weex-loader - -[weex-loader](https://github.com/weexteam/weex-loader) is a loader for Webpack, see the [official document](http://webpack.github.io/docs/using-loaders.html) to learn how to use it. - -One more thing should be reminded is that if the *entry file* of your webpack config is a `.vue` file, you also need to pass an additional ` entry` parameter, usually set to `true`. - -```Js -module.exports = { -  // Add the entry parameter for the .vue file -  entry: './path/to/App.vue?entry=true', - -  // other configurations ... - -  module: { -    loaders: [{ - -      // matches the .vue file path that contains the entry parameter -      test: /\.vue(\?^^]+)?$/, -      loaders: ['weex-loader'] -    }] -  }, -} -``` - -**You don't need to write those additional parameters if you are using `.js` file as entry file.** We recommend using javascript files as the entry file of webpack config. - -### Setup native development environments - -Since your are using Weex to develop native apps, setup native development environments, both Android and iOS, would be very useful. - -See [Integrating Weex to the existing application](../../guide/integrate-to-your-app.html) for more information. http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/references/vue/index.md ---------------------------------------------------------------------- diff --git a/doc/source/references/vue/index.md b/doc/source/references/vue/index.md deleted file mode 100644 index 9caf556..0000000 --- a/doc/source/references/vue/index.md +++ /dev/null @@ -1,11 +0,0 @@ ---- -title: Vue -type: references -order: 10 -version: 2.1 ---- - -# Vue - -- [Difference with Web](./difference-with-web.html) -- [Using Vuex & vue-router](./difference-of-vuex.html) \ No newline at end of file http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/references/web-standards.md ---------------------------------------------------------------------- diff --git a/doc/source/references/web-standards.md b/doc/source/references/web-standards.md deleted file mode 100644 index 906ff76..0000000 --- a/doc/source/references/web-standards.md +++ /dev/null @@ -1,584 +0,0 @@ ---- -title: Web standards -type: references -order: 8 -version: 2.1 -has_chapter_content: true ---- - -# Web standards - -## HTML - -refs: https://www.advancedwebranking.com/html/ 2016-12-11 - -### Overview - -| percentage | name | supported | -| ---- | ---- | ---- | -| 98.1% | `<head>` | - | -| 97.9% | `<body>` | - | -| 97.9% | `<html>` | - | -| 97% | `<title>` | - | -| 93.9% | `<meta>` | - | -| 89.9% | `<div>` | â | -| 89.6% | `<a>` | â | -| 88.5% | `<script>` | â | -| 86.5% | `<link>` | - | -| 86.3% | `<img>` | â | -| 81.5% | `<p>` | - (can be customized) | -| 75.6% | `<span>` | - (can be customized) | -| 73.8% | `<li>` | - (can be customized) | -| 73.7% | `<ul>` | - (can be customized) | -| 70.3% | `<br>` | â | -| 60.4% | `<style>` | â | -| 55.8% | `<h1>` | - (can be customized) | -| 52.7% | `<h2>` | - (can be customized) | -| 48.4% | `<input>` | â | -| 46.9% | `<form>` | â | -| 44.3% | `<strong>` | - (can be customized) | -| 43.1% | `<h3>` | - (can be customized) | -| 30.9% | `<table>` | â | -| 30.3% | `<tr>` | â | -| 30.2% | `<td>` | â | - -### Forms - -| percentage | name | supported | -| ---- | ---- | ---- | -| 49.5% | `<option>` | â | -| 30.2% | `<input>` | â | -| 16.6% | > `[type="hidden"]` | - | -| 8% | > `[type="text"]` | â | -| 4.2% | > `[type="submit"]` | - | -| 2% | > `[type="checkbox"]` | - (`<switch>`) | -| 1.2% | > `[type="email"]` | â | -| 1.1% | > `[type="radio"]` | â | -| 0.9% | > `[type="image"]` | - | -| 0.8% | > `[type="button"]` | - | -| 0.6% | > `[type="search"]` | â | -| 0.6% | > `[type="password"]` | â | -| 0.1% | > `[type="tel"]` | â | -| 0.1% | > `[type="number"]` | â | -| 0% | > `[type="reset"]` | - | -| 0% | > `[type="file"]` | â | -| 0% | > `[type="date"]` | â | -| 0% | > `[type="url"]` | â | -| 0% | > `[type="range"]` | â | -| 0% | > `[type="color"]` | â | -| 0% | > `[type="time"]` | â | -| 0% | > `[type="datetime-local"]` | â | -| 7.2% | `<label>` | - | -| 6.1% | `<form>` | - | -| 3.7% | `<button>` | - (can be customized) | -| 2.6% | > `[type="button"]` | - | -| 1.3% | > `[type="submit"]` | - | -| 0% | > `[type="reset"]` | - | -| 1.9% | `<select>` | â | -| 0.7% | `<textarea>` | â | -| 0.5% | `<fieldset>` | - | -| 0.1% | `<optgroup>` | â | -| 0.1% | `<legend>` | - | -| 0% | `<progress>` | â | -| 0% | `<datalist>` | - | -| 0% | `<output>` | - | -| 0% | `<meter>` | - | - -## CSS Properties - -refs: https://www.chromestatus.com/metrics/feature/popularity 2016-12-11 - -| percentage | name | supported | -| ---- | ---- | ---- | -| 90.5115% | display | â `flex` only | -| 89.8243% | margin | â (not support combo) | -| 88.7012% | width | â | -| 88.6468% | overflow | â iOS only, `hidden` only for Android | -| 88.6432% | background-color | â | -| 88.0803% | height | â | -| 87.7648% | font-size | â | -| 87.3837% | padding | â | -| 87.2721% | color | â | -| 86.9788% | text-align | â | -| 86.6841% | position | â `relative` by default, `static` not supported | -| 86.6039% | font-family | â | -| 86.5943% | font-weight | â | -| 85.0072% | opacity | â | -| 80.6911% | max-width | â | -| 79.4476% | box-sizing | â `border-box` only | -| 75.7623% | max-height | â | -| 74.9939% | webkit-user-select | â | -| 57.0292% | align-items | â | -| 56.8182% | justify-content | â `space-around` not supported well in browser | -| 50.5941% | flex-direction | â | -| 48.5052% | border | â | -| 47.5161% | top | â | -| 46.9136% | background | â | -| 46.1552% | cursor | â | -| 46.1443% | margin-left | â | -| 46.0956% | left | â | -| 46.0848% | text-decoration | â | -| 45.9575% | float | â | -| 45.8391% | border-bottom | â | -| 45.7639% | padding-left | â | -| 45.7128% | margin-top | â | -| 45.7013% | line-height | â | -| 45.5836% | background-image | â | -| 45.0837% | z-index | â | -| 45.0649% | right | â | -| 45.0516% | margin-bottom | â | -| 45.0459% | white-space | â | -| 44.8710% | margin-right | â | -| 44.8476% | vertical-align | â | -| 44.6306% | padding-top | â | -| 44.1466% | border-radius | â | -| 44.0136% | border-top | â | -| 43.9815% | padding-bottom | â | -| 43.9392% | padding-right | â | -| 43.8539% | visibility | â | -| 43.4306% | background-position | â | -| 43.4098% | background-repeat | â | -| 43.0391% | clear | â | -| 42.9100% | bottom | â | -| 42.2092% | content | â | -| 42.0690% | box-shadow | â | -| 41.9004% | border-color | â | -| 41.7341% | outline | â | -| 41.4297% | border-right | â | -| 41.2605% | border-left | â | -| 41.1127% | min-height | â | -| 41.0736% | font-style | â | -| 41.0523% | min-width | â | -| 40.4298% | list-style | â | -| 39.7341% | font | â | -| 38.8999% | background-size | â | -| 38.7811% | border-width | â | -| 38.7718% | border-collapse | â | -| 37.8110% | border-style | â | -| 37.4962% | text-overflow | â must work with `lines` | -| 37.3471% | text-transform | â | -| 37.2154% | transition | â | -| 36.5155% | overflow-y | â | -| 36.3025% | transform | â | -| 36.2488% | text-indent | â | -| 35.5075% | text-shadow | â | -| 34.7607% | webkit-appearance | â | -| 34.1925% | list-style-type | â | -| 34.0238% | border-spacing | â | -| 33.6664% | word-wrap | â | -| 31.9961% | overflow-x | â | -| 31.9922% | zoom | â | -| 31.2495% | border-bottom-left-radius | â | -| 31.1306% | pointer-events | â | -| 31.1229% | border-top-left-radius | â | -| 30.2131% | border-bottom-color | â | -| 29.9608% | border-top-color | â | -| 29.4297% | border-bottom-right-radius | â | -| 29.2668% | border-top-right-radius | â | -| 28.6489% | letter-spacing | â | -| 27.8327% | animation | â | -| 26.6738% | border-right-width | â | -| 26.0169% | src | â | -| 25.2661% | clip | â | -| 25.2512% | webkit-font-smoothing | â | -| 25.1971% | border-bottom-width | â | -| 25.0246% | border-right-color | â | -| 24.7790% | direction | â | -| 24.4094% | webkit-tap-highlight-color | â | -| 23.9751% | border-left-color | â | -| 23.9321% | border-top-width | â | -| 23.7902% | fill | â | -| 23.2617% | border-left-width | â | -| 22.7278% | table-layout | â | -| 21.5766% | word-break | â | -| 20.4319% | background-clip | â | -| 19.3198% | transform-origin | â | -| 18.9233% | filter | â | -| 17.7879% | resize | â | -| 16.2501% | flex | â | -| 15.1656% | font-variant | â | -| 14.9181% | text-rendering | â | -| 14.7125% | webkit-filter | â | -| 14.5263% | transition-duration | â | -| 14.3966% | transition-property | â | -| 14.2124% | webkit-box-orient | â | -| 13.5432% | outline-offset | â | -| 12.9300% | transition-timing-function | â | -| 12.2788% | unicode-range | â | -| 12.0880% | word-spacing | â | -| 11.9124% | quotes | â | -| 11.6800% | border-bottom-style | â | -| 11.4263% | webkit-background-clip | â | -| 11.0070% | flex-grow | â | -| 10.5925% | backface-visibility | â | -| 10.4417% | animation-name | â | -| 10.4302% | stroke | â | -| 10.4144% | animation-duration | â | -| 10.2804% | touch-action | â | -| 9.9663% | list-style-position | â | -| 9.8662% | order | â | -| 9.7770% | outline-width | â | -| 9.7504% | transition-delay | â | -| 9.4689% | border-top-style | â | -| 9.3474% | webkit-box-pack | â | -| 9.3078% | webkit-box-align | â | -| 9.2375% | page-break-inside | â | -| 9.1898% | webkit-line-clamp | â | -| 8.9350% | list-style-image | â | -| 8.8339% | page-break-after | â | -| 8.5735% | speak | â | -| 8.4754% | unicode-bidi | â | -| 8.4307% | animation-timing-function | â | -| 8.1464% | webkit-box-flex | â | -| 8.0048% | orphans | â | -| 7.9947% | widows | â | -| 7.6671% | flex-wrap | â not supported well in browser | -| 7.5756% | animation-fill-mode | â | -| 7.4163% | animation-delay | â | -| 7.3284% | border-left-style | â | -| 7.1586% | outline-color | â | -| 6.9102% | flex-shrink | â | -| 6.7754% | perspective | â | -| 6.7748% | border-right-style | â | -| 6.4619% | outline-style | â | -| 6.0382% | animation-iteration-count | â | -| 5.9838% | background-origin | â | -| 5.9714% | fill-opacity | â | -| 5.9357% | will-change | â | -| 5.3740% | stroke-width | â | -| 5.3172% | transform-style | â | -| 5.2608% | overflow-wrap | â | -| 5.1730% | background-attachment | â | -| 4.9039% | counter-increment | â | -| 4.5950% | counter-reset | â | -| 4.5031% | align-self | â | -| 4.4109% | webkit-box-ordinal-group | â | -| 4.4046% | webkit-animation-direction | â | -| 3.7598% | background-position-x | â | -| 3.6867% | border-image | â | -| 3.6601% | background-position-y | â | -| 3.5749% | webkit-user-drag | â | -| 3.3376% | flex-basis | â | -| 3.1840% | align-content | â | -| 3.1832% | flex-flow | â | -| 3.1774% | image-rendering | â | -| 3.0879% | webkit-margin-start | â | -| 2.9551% | font-stretch | â | -| 2.8934% | empty-cells | â | -| 2.7619% | webkit-margin-after | â | -| 2.7220% | perspective-origin | â | -| 2.6125% | webkit-margin-end | â | -| 2.6089% | column-count | â | -| 2.5880% | webkit-text-fill-color | â | -| 2.5466% | webkit-box-direction | â | -| 2.4618% | font-feature-settings | â | -| 2.3959% | webkit-mask-image | â | -| 2.3431% | webkit-padding-end | â | -| 2.2555% | stroke-dasharray | â | -| 2.1788% | user-select | â | -| 2.1679% | object-fit | â | -| 2.0643% | column-gap | â | -| 2.0459% | text-size-adjust | â | -| 2.0253% | caption-side | â | -| 1.9695% | stroke-dashoffset | â | -| 1.7923% | stroke-linecap | â | -| 1.7861% | animation-direction | â | -| 1.7559% | webkit-font-feature-settings | â | -| 1.7404% | stroke-opacity | â | -| 1.5926% | stroke-miterlimit | â | -| 1.5786% | fill-rule | â | -| 1.4859% | webkit-user-modify | â | -| 1.3439% | webkit-border-image | â | -| 1.3091% | animation-play-state | â | -| 1.2676% | contain | â | -| 1.2029% | webkit-padding-start | â | -| 1.1840% | webkit-margin-before | â | -| 1.1269% | page-break-before | â | -| 1.1222% | webkit-margin-top-collapse | â | -| 1.0418% | columns | â | -| 1.0354% | webkit-mask-size | â | -| 0.9650% | border-image-slice | â | -| 0.9425% | stop-color | â | -| 0.9408% | webkit-mask-repeat | â | -| 0.9125% | webkit-box-lines | â | -| 0.8804% | webkit-column-break-inside | â | -| 0.8752% | size | â | -| 0.8334% | font-kerning | â | -| 0.8034% | stroke-linejoin | â | -| 0.7869% | tab-size | â | -| 0.7689% | break-inside | â | -| 0.7589% | webkit-text-stroke-width | â | -| 0.7353% | column-width | â | -| 0.6924% | webkit-mask-position | â | -| 0.6869% | border-image-width | â | -| 0.6323% | border-image-repeat | â | -| 0.5994% | border-image-outset | â | -| 0.5885% | all | â | -| 0.5859% | webkit-text-stroke-color | â | -| 0.5435% | webkit-print-color-adjust | â | -| 0.5420% | webkit-text-stroke | â | -| 0.5195% | writing-mode | â | -| 0.4741% | clip-rule | â | -| 0.4685% | webkit-clip-path | â | -| 0.4578% | text-anchor | â | -| 0.4535% | shape-rendering | â | -| 0.4526% | webkit-column-break-before | â | -| 0.4494% | clip-path | â | -| 0.4452% | webkit-mask | â | -| 0.4393% | mix-blend-mode | â | -| 0.4166% | text-align-last | â | -| 0.4033% | column-rule | â | -| 0.3990% | webkit-mask-box-image | â | -| 0.3989% | font-variant-ligatures | â | -| 0.3881% | column-fill | â | -| 0.3865% | webkit-line-break | â | -| 0.3857% | border-image-source | â | -| 0.3528% | stop-opacity | â | -| 0.3075% | webkit-perspective-origin-y | â | -| 0.3054% | webkit-perspective-origin-x | â | -| 0.2994% | webkit-writing-mode | â | -| 0.2717% | dominant-baseline | â | -| 0.2634% | column-rule-color | â | -| 0.2586% | webkit-box-decoration-break | â | -| 0.2467% | webkit-text-security | â | -| 0.2374% | webkit-background-origin | â | -| 0.2146% | font-variant-caps | â | -| 0.2005% | column-rule-style | â | -| 0.1976% | shape-outside | â | -| 0.1971% | webkit-padding-before | â | -| 0.1896% | break-after | â | -| 0.1782% | webkit-padding-after | â | -| 0.1774% | text-orientation | â | -| 0.1747% | webkit-text-orientation | â | -| 0.1655% | mask | â | -| 0.1626% | alignment-baseline | â | -| 0.1572% | page | â | -| 0.1530% | webkit-column-break-after | â | -| 0.1521% | webkit-box-reflect | â | -| 0.1504% | webkit-text-emphasis-color | â | -| 0.1499% | object-position | â | -| 0.1470% | break-before | â | -| 0.1455% | webkit-margin-collapse | â | -| 0.1452% | baseline-shift | â | -| 0.1451% | hyphens | â | -| 0.1309% | rx | â | -| 0.1304% | ry | â | -| 0.1256% | background-blend-mode | â | -| 0.1136% | font-variant-numeric | â | -| 0.1135% | background-repeat-x | â | -| 0.1123% | background-repeat-y | â | -| 0.1086% | webkit-text-emphasis | â | -| 0.1058% | webkit-rtl-ordering | â | -| 0.1040% | column-rule-width | â | -| 0.1036% | isolation | â | -| 0.1002% | webkit-highlight | â | -| 0.0843% | webkit-transform-origin-y | â | -| 0.0786% | webkit-transform-origin-x | â | -| 0.0770% | webkit-app-region | â | -| 0.0685% | column-span | â | -| 0.0653% | r | â | -| 0.0611% | y | â | -| 0.0602% | x | â | -| 0.0555% | webkit-border-vertical-spacing | â | -| 0.0545% | webkit-border-horizontal-spacing | â | -| 0.0542% | webkit-border-start-width | â | -| 0.0450% | webkit-border-start-color | â | -| 0.0424% | webkit-border-after-width | â | -| 0.0424% | webkit-border-before-width | â | -| 0.0423% | webkit-border-end-width | â | -| 0.0351% | marker | â | -| 0.0349% | webkit-border-end-color | â | -| 0.0347% | webkit-border-after-color | â | -| 0.0347% | webkit-border-before-color | â | -| 0.0342% | mask-type | â | -| 0.0328% | color-interpolation-filters | â | -| 0.0325% | webkit-border-end | â | -| 0.0319% | vector-effect | â | -| 0.0307% | color-rendering | â | - -## CSS Units and Values - -refs: https://drafts.csswg.org/css-values/ 2016-12-11 - -### Textual - -* pre-defined keywords - * CSS-wide keywords - * `initial` - * `inherit` - * `unset` -* `<custom-ident>`: author-defined identifiers â -* `<string>`: quoted strings (`"xxx"`) -* `<url>`: resourec locators (`url()`) - -### Numeric - -* `<integer>` â -* `<number>` â -* `<percentage>` - -### Length `<length>` - -* relative - * font-relative - * `em` - * `ex` - * `ch` - * `ic` - * `rem` âð§ - * viewport-percentage - * `vw` âð§ - * `vh` âð§ - * `vi` - * `vb` - * `vmin` âð§ - * `vmax` âð§ -* absolute - * `cm` âð§ - * `mm` âð§ - * `Q` âð§ - * `in` âð§ - * `pc` âð§ - * `pt` âð§ - * `px` autofixed to number - -### Quantities - -* `<angle>` - * `deg` - * `grad` - * `rad` - * `turn` -* `<time>` - * `s` - * `ms` -* `<frequency>` - * `Hz` - * `kHz` -* `<resolution>` - * `dpi` - * `dpcm` - * `dppx` - -### Elsewhere - -* `<color>` â -* `<image>` -* `<position>` - -### Functional - -* `calc()` -* `toggle()` -* `attr()` - -## JS APIs - -refs: https://www.w3.org/standards/techs/js 2016-12-11 - -### Completed Work - -#### Standards - -| last update | spec | supported | -| ---- | ---- | ---- | -| 2016-11-17 | Media Source Extensions⢠| - (media related) | -| 2016-11-08 | Geolocation API Specification 2nd Edition | â developing | -| 2016-10-27 | Pointer Lock | - | -| 2016-10-18 | Vibration API (Second Edition) | â | -| 2016-04-19 | Web Storage (Second Edition) | â async `storage` module | -| 2015-10-22 | Web Notifications | â | -| 2015-05-19 | HTML5 Web Messaging | â `BroadcastChannel` developing | -| 2015-02-24 | Pointer Events | - | -| 2015-02-10 | Vibration API | â | -| 2015-02-03 | Server-Sent Events | â | -| 2015-01-08 | Indexed Database API | â | -| 2014-03-13 | Metadata API for Media Resources 1.0 | - (media related) | -| 2014-02-11 | Progress Events | â | -| 2014-01-16 | JSON-LD 1.0 Processing Algorithms and API | - | -| 2013-12-12 | Performance Timeline | - (perf related) | -| 2013-12-12 | User Timing | - (perf related) | -| 2013-10-31 | Widget Interface | - | -| 2013-10-29 | Page Visibility (Second Edition) | â `onviewappear`/`onviewdisappear` | -| 2013-10-10 | Touch Events | â | -| 2013-02-21 | Selectors API Level 1 | - | -| 2012-12-17 | Navigation Timing | - (perf related) | -| 2012-12-17 | High Resolution Time | - (perf related) | -| 2008-12-22 | Element Traversal Specification | - | - -### Drafts - -#### Proposed Recommendations - -| last update | spec | supported | -| ---- | ---- | ---- | -| 2016-09-15 | WebIDL Level 1 | - | - -#### Candidate Recommendations - -| last update | spec | supported | -| ---- | ---- | ---- | -| 2016-12-08 | Performance Timeline Level 2 | - (perf related) | -| 2016-11-22 | Page Visibility Level 2 | â `onviewappear`/`onviewdisappear` | -| 2016-11-01 | High Resolution Time Level 2 | - (perf related) | -| 2016-08-18 | DeviceOrientation Event Specification | â | -| 2016-07-21 | Resource Timing Level 1 | - (perf related) | -| 2016-07-14 | Presentation API | - | -| 2016-07-07 | Battery Status API | â | -| 2016-07-05 | Encrypted Media Extensions | - | -| 2016-05-19 | Media Capture and Streams | - (media related) | -| 2014-12-11 | Web Cryptography API | - | -| 2014-09-09 | HTML Media Capture | - (media related) | -| 2012-09-20 | The WebSocket API | â | - -#### Last Call Drafts - -| last update | spec | supported | -| ---- | ---- | ---- | -| 2011-12-01 | Geolocation API Specification Level 2 | â | - -#### Other Working Drafts - -| last update | spec | supported | -| ---- | ---- | ---- | -| 2016-12-09 | MediaStream Image Capture | - (media related) | -| 2016-12-06 | MediaStream Recording | - (media related) | -| 2016-12-06 | Selection API | â | -| 2016-12-05 | Input Events | â | -| 2016-12-02 | Gamepad | - | -| 2016-11-29 | WebDriver | - | -| 2016-11-24 | WebRTC 1.0: Real-time Communication Between Browsers | â | -| 2016-11-22 | Pointer Lock 2.0 | - | -| 2016-11-07 | Remote Playback API | - (media related) | -| 2016-11-03 | Resource Timing Level 2 | - (perf related) | -| 2016-11-02 | Audio Output Devices API | - (media related) | -| 2016-11-01 | Indexed Database API 2.0 | â | -| 2016-11-01 | User Timing Level 2 | - (perf related) | -| 2016-10-31 | The Screen Orientation API | â | -| 2016-10-31 | High Resolution Time Level 3 | - (perf related) | -| 2016-10-24 | UI Events KeyboardEvent code Values | - | -| 2016-10-24 | UI Events KeyboardEvent key Values | - | -| 2016-10-11 | Service Workers 1 | â | -| 2016-09-21 | Identifiers for WebRTC's Statistics API | - | -| 2016-09-13 | Accelerometer Sensor | â | -| 2016-09-13 | Gyroscope Sensor | â | -| 2016-09-13 | Magnetometer Sensor | â | -| 2016-08-30 | Ambient Light Sensor | â | -| 2016-08-30 | Media Capture from DOM Elements | - (media related) | -| 2016-08-30 | Generic Sensor API | â | -| 2016-08-03 | Wake Lock API | â | -| 2016-07-19 | Proximity Sensor | â | -| 2016-07-19 | Pointer Events - Level 2 | - | -| 2016-07-14 | Screen Capture | â | -| 2016-07-12 | Media Capture Depth Stream Extensions | - (media related) | -| 2016-05-17 | Cooperative Scheduling of Background Tasks | â | -| 2016-04-22 | Navigation Timing Level 2 | - (perf related) | -| 2016-04-03 | Clipboard API and events | â `clipboard` module | -| 2015-12-15 | Push API | â | -| 2015-12-08 | Web Audio API | - (media related) | -| 2015-10-15 | FindText API | - | -| 2015-09-24 | Web Workers | â | -| 2015-04-21 | File API | â | -| 2014-02-20 | Network Service Discovery | â | -| 2012-03-06 | MediaStream Capture Scenarios | - (media related) | -| 2011-12-15 | Audio Processing API | - (media related) | \ No newline at end of file http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/8162f8c2/doc/source/references/weex-variable.md ---------------------------------------------------------------------- diff --git a/doc/source/references/weex-variable.md b/doc/source/references/weex-variable.md deleted file mode 100644 index a873540..0000000 --- a/doc/source/references/weex-variable.md +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: Weex Variable -type: references -order: 7 -version: 2.1 ---- - -# Weex instance variable - -Each Weex page has a separate weex variable, which exists in the JS context. They hold a single instance or method of the current Weex page. - -## `weex.config` - -This variable contains all the environment information for the current Weex page, including not only: - -+ `BundleUrl`: string: The URL of the JS bundle, the same as URL of the page. -+ `Env: Object`: environment object. -+ `WeexVersion: string`: Weex sdk version. -+ `AppName: string`: application name. -+ `AppVersion: string`: app version. -+ `Platform: string`: platform information, that is iOS, Android or Web. -+ `osName: string`: OS name information, that is iOS, Android. -+ `OsVersion: string`: system version. -+ `DeviceModel: string`: device model (native application only). -+ `DeviceWidth: number`: device width -+ `DeviceHeight: number`: device height. In Weex, the default width of viewport is 750px, thus you can obtain the height of screen by `height = 750/deviceWidth*deviceHeight` if the width of viewport remains its default value. - -`weex.requireModule(module: string): Object` - -Get all the methods of a native module, such as: - -```html -<template> - <div><text>Hello World</text></div> -</template> -<script> - var modal = weex.requireModule('modal') - modal.toast({ - message: 'I am a toast.', - duration: 3 - }) -</script> -``` - - -## `weex.document: Document` - -Returns the document object of the current Weex page. - -## `weex.supports` - -<span class="weex-version">v0.15+</span> - -`weex.supports` is a method used to detect whether a feature is supported in the current environment. - -> Only supported in Weex DSL 2.0 (.vue). - -### API - -```js -weex.supports(condition : String) : Boolean | Null -``` - -#### Parameter - -+ a formatted string: `@{type}/{name}`. - -The `type` must be "component" or "module", the `name` can be tag name, module name or the method name in specific module. - -#### Return Value - -+ if supported, returns `true`. -+ if unsupported, returns `false`. -+ if unclear, returns `null`. - -### Example - -```js -// Detects whether the specific component is supported -weex.supports('@component/slider') // true -weex.supports('@component/my-tab') // false - -// Detects whether the specific module is supported -weex.supports('@module/stream') // true -weex.supports('@module/abcdef') // false - -// Detects whether the method in specific module is supported -weex.supports('@module/dom.getComponentRect') // true -weex.supports('@module/navigator.jumpToPage') // false - -// invalid input -weex.supports('div') // null -weex.supports('module/*') // null -weex.supports('@stream/fetch') // null -weex.supports('getComponentRect') // null -```
