You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@weex.apache.org by zs...@apache.org on 2017/08/01 02:29:54 UTC
[45/50] [abbrv] incubator-weex git commit: * [doc] update input
components document & bubble document
* [doc] update input components document & bubble document
Project: http://git-wip-us.apache.org/repos/asf/incubator-weex/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-weex/commit/b16f36fc
Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex/tree/b16f36fc
Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex/diff/b16f36fc
Branch: refs/heads/master
Commit: b16f36fca70ce60d94b9a5f276873455024cb6af
Parents: 9db8054
Author: tancy <ro...@gmail.com>
Authored: Wed Jul 19 15:12:22 2017 +0800
Committer: misakuo <mi...@apache.org>
Committed: Fri Jul 21 15:33:06 2017 +0800
----------------------------------------------------------------------
doc/source/_posts/coreml.md | 79 +++++++++++++++++++++++
doc/source/_posts/hello_world.md | 3 +-
doc/source/_posts/test.md | 14 ++++
doc/source/cn/references/bubble.md | 4 +-
doc/source/cn/references/components/input.md | 34 +++++-----
doc/source/cn/v-0.10/references/bubble.md | 6 +-
doc/source/references/bubble.md | 4 +-
doc/source/references/components/input.md | 34 +++++-----
doc/source/v-0.10/references/bubble.md | 8 +--
9 files changed, 142 insertions(+), 44 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/b16f36fc/doc/source/_posts/coreml.md
----------------------------------------------------------------------
diff --git a/doc/source/_posts/coreml.md b/doc/source/_posts/coreml.md
new file mode 100644
index 0000000..c628fb3
--- /dev/null
+++ b/doc/source/_posts/coreml.md
@@ -0,0 +1,79 @@
+title: Weex ❤️ iOS 11 系列之一：Core ML 初探
+type: blog
+date: 2017-06-21 15:46:44
+
+---
+
+## 背景
+
+WWDC 2017 有一个非常明确的信号：**端上机器学习将会是未来苹果的一个重要发力点，同时开发者的使用门槛在不断降低**。
+
+Core ML 是今年 WWDC 上苹果发布的机器学习框架。它允许开发者在自己开发的 app 上使用机器学习，同时不需要收集用户数据。 有了 Core ML，你可以将自己训练得到的模型，借助苹果提供的转换工具，转化成 Core ML 类型的模型文件，你可以非常轻松地直接实现模型和 app 数据的互通。
+
+WWDC 上展示了一张简单的架构图：
+
+
+
+最底层的 Accelerate 和 MPS，其实是苹果去年推出的接口，前者可以直接调用 CPU，后者则直接调用 GPU。 Core ML 会自行决定到底使用 CPU 还是 GPU 来进行运算，可以最大程度地利用硬件资源来处理模型数据。
+
+而 Core ML 往上一层则是应用层。Vision 主要负责图像相关的人工智能处理，如人脸识别、面部追踪、文字识别等等；NLP 则提供语义分析相关 API。这部分内容在以前版本的 SDK 中也存在，这次被集成到了新框架当中。好处在于，开发者拥有了更大的自由度。在以前，开发者的 app 调用这些高级接口，对底层的实现细节的掌控力度非常小。现在，你可以通过自定义底层所使用的机器学习模型，从而实现更个性化的需求。
+
+## Weex-ML
+
+Weex 交互视觉能力小结中提到，**Weex 最大的特别之处在于其 native 的能力， 我们要最大化利用 native 的特性， 而不是去模仿它**。
+
+作为本次 iOS 11 的一个重要 native 能力，我也第一时间尝试将 Core ML 透传到了 Weex 上。所有代码和 Demo 都已开源到 [Github](https://github.com/cxfeng1/Weex-ML)，后续也会将机器学习相关的Weex 模块统一放到 Weex Market 上。
+
+得益于 Core ML API 的简洁，在 Weex 上使用 Core ML 相关能力变得非常简单:
+
+```javascript
+let imageRecognition = weex.requireModule('imageRecognition')
+imageRecognition.predictWithImage(this.$refs.image.ref, (results)=>{
+ this.results = results.slice(0,5);
+})
+```
+
+通过调用透传的 module `imageRecognition` , 并传入 image 组件的 ref 作为参数，就可以实现图片识别的功能，最后提取出识别结果中 confidence 最高的 5 个结果。
+
+## Demo
+
+### imageRecognition
+
+
+
+使用 [Inceptionv3](https://github.com/fchollet/keras/blob/0bb4e0fad5b4bb3743c8a7d03c260b62a35e7045/keras/applications/inception_v3.py) 作为模型，能够高效识别， 该模型已经在 [keras](https://github.com/fchollet/keras) 中被训练好并通过苹果提供的工具转换成 **mlmodel** 文件， 只需拖拽的方式就可以集成到 iOS 开发环境中， 上述 demo 输出了对一张图片分类最大可能的5个预测结果， 对于 Weex 来说，几行代码就能搞定。
+
+
+
+### digitDetect
+
+
+
+上述 demo 首先使用 [weex-gcanvas](http://market.dotwe.org/ext/list.htm#6) 插件做了一个简单的绘制板，然后使用 MNIST model 完成了对手写数字的识别。
+
+### faceDetect
+
+
+
+这个 demo 没有加载任何 model，使用了 iOS 11 内置的 Vision Framework，顾名思义，Vision 可以让开发者运行计算机视觉相关的任务，它相当于 Core ML 的 High-Level Solution， 它可以做很多事情:
+
+- 脸部识别，会返回一个矩形数组来表示每一个脸部
+- 脸部更精细识别，比如眼睛和鼻子的具体位置、头部的形状等，上述 demo 就是拿到这些信息以后使用 gcanvas 绘制出了面部精细轮廓
+- 图片中的矩形探测
+- 图片中的文字探测
+- 二维码/条形码探测
+- 视频中跟踪移动的物体
+
+## 总结
+
+这次 Core ML 的推出，同时得益于苹果对软硬件的全面掌控，使得从系统级到第三方开发者，都具备了在端上就可以进行机器学习模型处理的能力。所有代码和 Demo 都已上传到 [Github](https://github.com/cxfeng1/Weex-ML)，欢迎贡献和交流。
+
+当然在实际研究过程中，也发现了 Core ML 的一些限制：
+
+- 无法在端上进行模型的训练，所有模型必须提前训练好再转换成 Core ML 的格式
+- 无法动态下载和更新模型，对于需要经常重新训练的模型不太友好
+- 目前看只支持监督学习的模型，不支持非监督学习。
+
+Weex 未来在提供更多功能透传的同时，也会继续探索更深层次的结合。
+
+最后，本文是 Weex 和 iOS 11 结合系列的第一篇文章，后续将会有更多有意思的iOS 11 feature (如 ARKit、 drag & drop 等) 和大家一起探讨。
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/b16f36fc/doc/source/_posts/hello_world.md
----------------------------------------------------------------------
diff --git a/doc/source/_posts/hello_world.md b/doc/source/_posts/hello_world.md
index 07f4223..803ef70 100644
--- a/doc/source/_posts/hello_world.md
+++ b/doc/source/_posts/hello_world.md
@@ -1,6 +1,7 @@
title: Hello World
type: blog
-order: 1
+
---
# Hello world
+
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/b16f36fc/doc/source/_posts/test.md
----------------------------------------------------------------------
diff --git a/doc/source/_posts/test.md b/doc/source/_posts/test.md
new file mode 100644
index 0000000..afaa8ec
--- /dev/null
+++ b/doc/source/_posts/test.md
@@ -0,0 +1,14 @@
+title: test
+type: blog
+
+---
+
+
+# test
+
+asdfadfasdfasdfadfadsf
+asdfasdfadsf
+adsfadsfadsf
+
+## sdfasdfasdf
+sdfsdfsdf
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/b16f36fc/doc/source/cn/references/bubble.md
----------------------------------------------------------------------
diff --git a/doc/source/cn/references/bubble.md b/doc/source/cn/references/bubble.md
index 4b63cad..6f8f0ed 100644
--- a/doc/source/cn/references/bubble.md
+++ b/doc/source/cn/references/bubble.md
@@ -11,7 +11,7 @@ Weex 2.0 实现了 W3C 标准的事件冒泡机制。
### 使用
-```javascript
+```html
<template>
<div class="root" @click="rootClick" bubble="true">
<text style="font-size: 40px;">{{rootText}}</text>
@@ -81,7 +81,7 @@ Weex 2.0 实现了 W3C 标准的事件冒泡机制。
在事件处理函数中，可以使用 `e.stopPropagation()` 方法，来阻止本次事件向上的传递过程。注意，`e.stopPropagation()` 与 `bubble="true"` 不同，前者只会影响当前元素以及父元素的传播，不会影响子元素的传播；后者是为了版本兼容而增加的开关机制，会全局关闭或者开启冒泡机制，两者可以共同存在使用，如下：
-```javascript
+```html
<template>
<div class="root" @click="rootClick" bubble="true">
<text style="font-size: 40px;">{{rootText}}</text>
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/b16f36fc/doc/source/cn/references/components/input.md
----------------------------------------------------------------------
diff --git a/doc/source/cn/references/components/input.md b/doc/source/cn/references/components/input.md
index a0aecf8..3cf83fd 100644
--- a/doc/source/cn/references/components/input.md
+++ b/doc/source/cn/references/components/input.md
@@ -135,13 +135,15 @@ Weex 内置的 `<input>` 组件用来创建接收用户输入字符的输入组
<text style="font-size: 40px">oninput: {{txtInput}}</text>
<text style="font-size: 40px">onchange: {{txtChange}}</text>
<text style="font-size: 40px">onreturntype: {{txtReturnType}}</text>
+ <text style="font-size: 40px">selection: {{txtSelection}}</text>
+
</div>
<scroller>
<div>
<div style="background-color: #286090">
<text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input type = text</text>
</div>
- <input type="text" placeholder="Input Text" class="input" :autofocus=true value="" @change="onchange" @input="oninput" @focus="onfocus" @blur="onblur"/>
+ <input type="text" placeholder="Input Text" class="input" :autofocus=true value="" @change="onchange" @input="oninput"/>
</div>
<div>
@@ -181,6 +183,13 @@ Weex 内置的 `<input>` 组件用来创建接收用户输入字符的输入组
<div>
<div style="background-color: #286090">
+ <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input type = number</text>
+ </div>
+ <input type="number" placeholder="Input number" class="input" @change="onchange" @input="oninput"/>
+ </div>
+
+ <div>
+ <div style="background-color: #286090">
<text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input type = date</text>
</div>
<input type="date" placeholder="Input Date" class="input" @change="onchange" @input="oninput" max="2017-12-12" min="2015-01-01"/>
@@ -248,6 +257,7 @@ Weex 内置的 `<input>` 组件用来创建接收用户输入字符的输入组
</div>
<div style="flex-direction: row;margin-bottom: 16px;justify-content: space-between">
<text class="button" value="setRange" type="primary" @click="setRange"></text>
+ <text class="button" value="getSelectionRange" type="primary" @click="getSelectionRange"></text>
</div>
<input type="text" ref="inputselection" placeholder="please input" value="123456789" class="input" @change="onchange" @return = "onreturn" @input="oninput"/>
</div>
@@ -280,7 +290,6 @@ Weex 内置的 `<input>` 组件用来创建接收用户输入字符的输入组
</style>
<script>
- const modal = weex.requireModule('modal')
module.exports = {
data: function () {
return {
@@ -320,23 +329,16 @@ Weex 内置的 `<input>` 组件用来创建接收用户输入字符的输入组
console.log(this.$refs["inputselection"]);
this.$refs["inputselection"].setSelectionRange(2, 6);
},
- onfocus () {
- console.log('onfocus:');
- modal.toast({
- message: 'onfocus',
- duration: 0.8
- })
- },
- onblur () {
- console.log('onblur:');
- modal.toast({
- message: 'input blur',
- duration: 0.8
- })
+ getSelectionRange: function() {
+ console.log(this.$refs["inputselection"]);
+ var self = this;
+ this.$refs["inputselection"].getSelectionRange(function(e) {
+ self.txtSelection = e.selectionStart +'-' + e.selectionEnd;
+ });
}
}
};
</script>
```
-[体验一下](http://dotwe.org/vue/dd83d941d2364f2849e45dc3c5d91ab4)
+[体验一下](http://dotwe.org/vue/3470e4d0194f3879a72d38e2ab02cc9f)
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/b16f36fc/doc/source/cn/v-0.10/references/bubble.md
----------------------------------------------------------------------
diff --git a/doc/source/cn/v-0.10/references/bubble.md b/doc/source/cn/v-0.10/references/bubble.md
index cb25e05..74b7e98 100644
--- a/doc/source/cn/v-0.10/references/bubble.md
+++ b/doc/source/cn/v-0.10/references/bubble.md
@@ -2,7 +2,7 @@
title: 事件冒泡
type: references
order: 1.3
-version: 2.1
+version: 0.10
---
# 事件冒泡 <span class="api-version">v0.13+</span>
@@ -11,7 +11,7 @@ Weex 1.0 实现了 W3C 标准的事件冒泡机制。
### 使用
-```javascript
+```html
<template>
<div class="root" onclick="rootClick" bubble="true">
<div>
@@ -83,7 +83,7 @@ Weex 1.0 实现了 W3C 标准的事件冒泡机制。
在事件处理函数中，可以使用 `e.stopPropagation()` 方法，来阻止本次事件向上的传递过程。注意，`e.stopPropagation()` 与 `bubble="true"` 不同，前者只会影响当前元素以及父元素的传播，不会影响子元素的传播；后者是为了版本兼容而增加的开关机制，会全局关闭或者开启冒泡机制，两者可以共同存在使用，如下：
-```javascript
+```html
<template>
<div class="root" onclick="rootClick" bubble="true">
<div>
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/b16f36fc/doc/source/references/bubble.md
----------------------------------------------------------------------
diff --git a/doc/source/references/bubble.md b/doc/source/references/bubble.md
index c66d9b9..8d2470c 100644
--- a/doc/source/references/bubble.md
+++ b/doc/source/references/bubble.md
@@ -11,7 +11,7 @@ Weex 2.0 implements the W3C standard event bubbling mechanism.
### Usage
-```javascript
+```html
<template>
<div class="root" @click="rootClick" bubble="true">
<text style="font-size: 40px;">{{rootText}}</text>
@@ -81,7 +81,7 @@ One thing should be noticed: **For compatibility with previous versions, Weex do
In the event handler function, you can use the `e.stopPropagation()` method to prevent the event from escalating. Note that `e.stopPropagation()` differs from `bubble = "true"`, which affects only the current elements and the propagation of parent elements, without affecting the propagation of child elements; the latter is a switching mechanism that is added for compatibility, Will be a global shutdown or open the bubble mechanism, the two can co-exist, as follows:
-```javascript
+```html
<template>
<div class="root" @click="rootClick" bubble="true">
<text style="font-size: 40px;">{{rootText}}</text>
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/b16f36fc/doc/source/references/components/input.md
----------------------------------------------------------------------
diff --git a/doc/source/references/components/input.md b/doc/source/references/components/input.md
index 8eea2ad..fdd4d0a 100644
--- a/doc/source/references/components/input.md
+++ b/doc/source/references/components/input.md
@@ -113,13 +113,15 @@ does not support the common-event 'click'. Please listen to the 'input' or '
<text style="font-size: 40px">oninput: {{txtInput}}</text>
<text style="font-size: 40px">onchange: {{txtChange}}</text>
<text style="font-size: 40px">onreturntype: {{txtReturnType}}</text>
+ <text style="font-size: 40px">selection: {{txtSelection}}</text>
+
</div>
<scroller>
<div>
<div style="background-color: #286090">
<text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input type = text</text>
</div>
- <input type="text" placeholder="Input Text" class="input" :autofocus=true value="" @change="onchange" @input="oninput" @focus="onfocus" @blur="onblur"/>
+ <input type="text" placeholder="Input Text" class="input" :autofocus=true value="" @change="onchange" @input="oninput"/>
</div>
<div>
@@ -159,6 +161,13 @@ does not support the common-event 'click'. Please listen to the 'input' or '
<div>
<div style="background-color: #286090">
+ <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input type = number</text>
+ </div>
+ <input type="number" placeholder="Input number" class="input" @change="onchange" @input="oninput"/>
+ </div>
+
+ <div>
+ <div style="background-color: #286090">
<text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input type = date</text>
</div>
<input type="date" placeholder="Input Date" class="input" @change="onchange" @input="oninput" max="2017-12-12" min="2015-01-01"/>
@@ -226,6 +235,7 @@ does not support the common-event 'click'. Please listen to the 'input' or '
</div>
<div style="flex-direction: row;margin-bottom: 16px;justify-content: space-between">
<text class="button" value="setRange" type="primary" @click="setRange"></text>
+ <text class="button" value="getSelectionRange" type="primary" @click="getSelectionRange"></text>
</div>
<input type="text" ref="inputselection" placeholder="please input" value="123456789" class="input" @change="onchange" @return = "onreturn" @input="oninput"/>
</div>
@@ -258,7 +268,6 @@ does not support the common-event 'click'. Please listen to the 'input' or '
</style>
<script>
- const modal = weex.requireModule('modal')
module.exports = {
data: function () {
return {
@@ -298,23 +307,16 @@ does not support the common-event 'click'. Please listen to the 'input' or '
console.log(this.$refs["inputselection"]);
this.$refs["inputselection"].setSelectionRange(2, 6);
},
- onfocus () {
- console.log('onfocus:');
- modal.toast({
- message: 'onfocus',
- duration: 0.8
- })
- },
- onblur () {
- console.log('onblur:');
- modal.toast({
- message: 'input blur',
- duration: 0.8
- })
+ getSelectionRange: function() {
+ console.log(this.$refs["inputselection"]);
+ var self = this;
+ this.$refs["inputselection"].getSelectionRange(function(e) {
+ self.txtSelection = e.selectionStart +'-' + e.selectionEnd;
+ });
}
}
};
</script>
```
-[try it](http://dotwe.org/vue/dd83d941d2364f2849e45dc3c5d91ab4)
+[try it](http://dotwe.org/vue/3470e4d0194f3879a72d38e2ab02cc9f)
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/b16f36fc/doc/source/v-0.10/references/bubble.md
----------------------------------------------------------------------
diff --git a/doc/source/v-0.10/references/bubble.md b/doc/source/v-0.10/references/bubble.md
index 849ab36..ba59a90 100644
--- a/doc/source/v-0.10/references/bubble.md
+++ b/doc/source/v-0.10/references/bubble.md
@@ -2,16 +2,16 @@
title: Event Bubble
type: references
order: 1.3
-version: 2.1
+version: 0.10
---
# Event Bubble <span class="api-version">v0.13+</span>
-Weex 2.0 implements the W3C standard event bubbling mechanism.
+Weex 1.0 implements the W3C standard event bubbling mechanism.
### Usage
-```javascript
+```html
<template>
<div class="root" onclick="rootClick" bubble="true">
<div>
@@ -83,7 +83,7 @@ One thing should be noticed: **For compatibility with previous versions, Weex do
In the event handler function, you can use the `e.stopPropagation()` method to prevent the event from escalating. Note that `e.stopPropagation()` differs from `bubble = "true"`, which affects only the current elements and the propagation of parent elements, without affecting the propagation of child elements; the latter is a switching mechanism that is added for compatibility, Will be a global shutdown or open the bubble mechanism, the two can co-exist, as follows:
-```javascript
+```html
<template>
<div class="root" onclick="rootClick" bubble="true">
<div>