You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@weex.apache.org by so...@apache.org on 2017/06/02 06:03:45 UTC
[05/46] incubator-weex git commit: + [doc] feature: update websocket
doc
+ [doc] feature: update websocket doc
Project: http://git-wip-us.apache.org/repos/asf/incubator-weex/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-weex/commit/feb6cca1
Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex/tree/feb6cca1
Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex/diff/feb6cca1
Branch: refs/heads/master
Commit: feb6cca1bc0ef42f79ab0d6f3b766b90c512f700
Parents: 7a8eac8
Author: 齐山 <su...@163.com>
Authored: Fri Apr 28 13:59:14 2017 +0800
Committer: 齐山 <su...@163.com>
Committed: Fri Apr 28 13:59:14 2017 +0800
----------------------------------------------------------------------
doc/source/cn/references/modules/websocket.md | 128 +++++++++++----------
doc/source/references/modules/websocket.md | 128 +++++++++++----------
2 files changed, 132 insertions(+), 124 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/feb6cca1/doc/source/cn/references/modules/websocket.md
----------------------------------------------------------------------
diff --git a/doc/source/cn/references/modules/websocket.md b/doc/source/cn/references/modules/websocket.md
index de99ad3..e83c15f 100644
--- a/doc/source/cn/references/modules/websocket.md
+++ b/doc/source/cn/references/modules/websocket.md
@@ -90,87 +90,91 @@ WebSockets 是一种先进的技术, 这使得在用户的 H5/iOS/Android 和一
<scroller>
<div>
<div style="background-color: #286090">
- <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">websocket</text>
+ <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=""
- onchange="onchange"
- oninput="oninput"
- id = "input"
- />
+ <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" onclick="{{connect}}">connect</text>
- <text class="button" onclick="{{send}}">send</text>
- <text class="button" onclick="{{close}}">close</text>
+ <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: #D3D3D3;margin-top: 20">
- <text class="title" style="height: 80 ;padding: 20;color: #000000">method = send</text>
+
+ <div style="background-color: lightgray">
+ <text class="title" style="height: 80px ;padding: 20px;color: black">method = send</text>
</div>
- <text style="color: #000000;height: 80">{{sendinfo}}</text>
- <div style="background-color: #D3D3D3">
- <text class="title" style="height: 80 ;padding: 20;color: #000000">method = onopen</text>
+ <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: #000000;height: 80">{{onopeninfo}}</text>
- <div style="background-color: #D3D3D3">
- <text class="title" style="height: 80 ;padding: 20;color: #000000">method = onmessage</text>
+ <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: #000000;height: 100">{{onmessage}}</text>
- <div style="background-color: #D3D3D3">
- <text class="title" style="height: 80 ;padding: 20;color: #000000">method = onclose</text>
+ <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: #000000;height: 80">{{oncloseinfo}}</text>
- <div style="background-color: #D3D3D3">
- <text class="title" style="height: 80 ;padding: 20;color: #000000">method = onerror</text>
+ <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: #000000;height: 80">{{onerrorinfo}}</text>
- <div style="background-color: #D3D3D3">
- <text class="title" style="height: 80 ;padding: 20;color: #000000">method = close</text>
+ <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: #000000;height: 80">{{closeinfo}}</text>
- </div>
+ <text style="color: black;height: 80px">{{closeinfo}}</text>
+
</div>
+
</scroller>
</template>
-<style>
+
+<style scoped>
.input {
- font-size: 40;
- height: 80;
- width: 600;
+ font-size: 40px;
+ height: 80px;
+ width: 600px;
}
.button {
- font-size: 36;
- width: 150;
+ font-size: 36px;
+ width: 150px;
color: #41B883;
text-align: center;
- padding-top: 10;
- padding-bottom: 10;
- border-width: 2;
+ padding-top: 25px;
+ padding-bottom: 25px;
+ border-width: 2px;
border-style: solid;
- margin-right: 20;
+ margin-right: 20px;
border-color: rgb(162, 217, 192);
background-color: rgba(162, 217, 192, 0.2);
}
</style>
+
+
<script>
- var websocket = require('@weex-module/webSocket');
- module.exports = {
- data: {
- connectinfo: '',
- sendinfo: '',
- onopeninfo: '',
- onmessage: '',
- oncloseinfo: '',
- onerrorinfo: '',
- closeinfo: '',
- txtInput:'',
- navBarHeight: 88,
- title: 'Navigator',
- dir: 'examples',
- baseURL: '',
+ 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() {
@@ -196,7 +200,7 @@ WebSockets 是一种先进的技术, 这使得在用户的 H5/iOS/Android 和一
}
},
send:function(e) {
- var input = this.$el('input');
+ var input = this.$refs.input;
input.blur();
websocket.send(this.txtInput);
this.sendinfo = this.txtInput;
@@ -207,9 +211,9 @@ WebSockets 是一种先进的技术, 这使得在用户的 H5/iOS/Android 和一
close:function(e) {
websocket.close();
},
- }
- };
+ },
+ }
</script>
```
-[Have a try](http://dotwe.org/weex/0256bbfc448f0fdbe8b10ba311c947b4)
\ No newline at end of file
+[Have a try](http://dotwe.org/vue/6d8bdfe66f24fda1a2dc6158b0182573)
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/feb6cca1/doc/source/references/modules/websocket.md
----------------------------------------------------------------------
diff --git a/doc/source/references/modules/websocket.md b/doc/source/references/modules/websocket.md
index e40cdf1..6edc8d8 100644
--- a/doc/source/references/modules/websocket.md
+++ b/doc/source/references/modules/websocket.md
@@ -89,87 +89,91 @@ An event listener to be called when an error occurs.
<scroller>
<div>
<div style="background-color: #286090">
- <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">websocket</text>
+ <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=""
- onchange="onchange"
- oninput="oninput"
- id = "input"
- />
+ <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" onclick="{{connect}}">connect</text>
- <text class="button" onclick="{{send}}">send</text>
- <text class="button" onclick="{{close}}">close</text>
+ <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: #D3D3D3;margin-top: 20">
- <text class="title" style="height: 80 ;padding: 20;color: #000000">method = send</text>
+
+ <div style="background-color: lightgray">
+ <text class="title" style="height: 80px ;padding: 20px;color: black">method = send</text>
</div>
- <text style="color: #000000;height: 80">{{sendinfo}}</text>
- <div style="background-color: #D3D3D3">
- <text class="title" style="height: 80 ;padding: 20;color: #000000">method = onopen</text>
+ <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: #000000;height: 80">{{onopeninfo}}</text>
- <div style="background-color: #D3D3D3">
- <text class="title" style="height: 80 ;padding: 20;color: #000000">method = onmessage</text>
+ <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: #000000;height: 100">{{onmessage}}</text>
- <div style="background-color: #D3D3D3">
- <text class="title" style="height: 80 ;padding: 20;color: #000000">method = onclose</text>
+ <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: #000000;height: 80">{{oncloseinfo}}</text>
- <div style="background-color: #D3D3D3">
- <text class="title" style="height: 80 ;padding: 20;color: #000000">method = onerror</text>
+ <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: #000000;height: 80">{{onerrorinfo}}</text>
- <div style="background-color: #D3D3D3">
- <text class="title" style="height: 80 ;padding: 20;color: #000000">method = close</text>
+ <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: #000000;height: 80">{{closeinfo}}</text>
- </div>
+ <text style="color: black;height: 80px">{{closeinfo}}</text>
+
</div>
+
</scroller>
</template>
-<style>
+
+<style scoped>
.input {
- font-size: 40;
- height: 80;
- width: 600;
+ font-size: 40px;
+ height: 80px;
+ width: 600px;
}
.button {
- font-size: 36;
- width: 150;
+ font-size: 36px;
+ width: 150px;
color: #41B883;
text-align: center;
- padding-top: 10;
- padding-bottom: 10;
- border-width: 2;
+ padding-top: 25px;
+ padding-bottom: 25px;
+ border-width: 2px;
border-style: solid;
- margin-right: 20;
+ margin-right: 20px;
border-color: rgb(162, 217, 192);
background-color: rgba(162, 217, 192, 0.2);
}
</style>
+
+
<script>
- var websocket = require('@weex-module/webSocket');
- module.exports = {
- data: {
- connectinfo: '',
- sendinfo: '',
- onopeninfo: '',
- onmessage: '',
- oncloseinfo: '',
- onerrorinfo: '',
- closeinfo: '',
- txtInput:'',
- navBarHeight: 88,
- title: 'Navigator',
- dir: 'examples',
- baseURL: '',
+ 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() {
@@ -195,7 +199,7 @@ An event listener to be called when an error occurs.
}
},
send:function(e) {
- var input = this.$el('input');
+ var input = this.$refs.input;
input.blur();
websocket.send(this.txtInput);
this.sendinfo = this.txtInput;
@@ -206,9 +210,9 @@ An event listener to be called when an error occurs.
close:function(e) {
websocket.close();
},
- }
- };
+ },
+ }
</script>
```
-[Have a try](http://dotwe.org/weex/0256bbfc448f0fdbe8b10ba311c947b4)
+[Have a try](http://dotwe.org/vue/6d8bdfe66f24fda1a2dc6158b0182573)