Repository: incubator-weex Updated Branches: refs/heads/dev 437ed268c -> 78363c89d
+ [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/dev Commit: feb6cca1bc0ef42f79ab0d6f3b766b90c512f700 Parents: 7a8eac8 Author: é½å±± <sunjjb...@163.com> Authored: Fri Apr 28 13:59:14 2017 +0800 Committer: é½å±± <sunjjb...@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)
