一步步教你学Weex实现登录功能（一）

一步步教你学Weex实现登录功能（一）

0 前言

废话不多说，先上效果。

我们可以看到，在手机登录界面点击提交按钮，就弹出了用户名的提示。辣么，这是怎么实现的呢？这里我们用到了哪些知识呢？ 

首先是weex语法（前端CSS Layout，JS，以及Weex本身所提供的Model和Component）来实现WeeX界面。

其次，我们要结合Android客户端来实现具体的登录流程以及页面跳转功能。

第三是NodeJS服务器功能以及WebPack打包工具，我们之所以会讲到这个，就是想从We转换成JS Bundle并提供给客户端这个角度在原理上来更深刻地展示Weex的原理架构。

下一步，我们将结合服务器端来实现一个用Weex来实现完整登录的功能。

下面，我将从一个原生开发者（前端零基础）的角度来去如何实现Weex登录界面。

1 界面实现

作为前端零基础的初学者，我在前端布局能力上几乎是0。辣么，怎么来实现这么伟大的跨越呢？

首先，我们自己首先要确定我们登录界面的样子，并依据这个模型来判断出登录界面所需要的元素：
1. Title居中显示
2. 用户名提示及输入框独行显示
3. 密码提示及输入框独行显示
4. 提交按钮
通过以上分析得来的4种元素，我们可以在Weex中可以找到div，text，**inpu**t三种标签就可以实现。
下面是元素集合代码：

值得注意点：
1. {{textClass}}：动态class及多class指定（目前版本Chrome浏览器正常支持，Android4。4模拟器不太支持）
2. input标签：id方便查找元素，class方便style附加（目前貌似不支持依据id附加style）,type为类型（text文本，password密码），autoFocus是否自动获得焦点，placeholder默认值，value值，maxlength最大长度。
3. 具体这些参考Weex文档：Style联合复用，input标签

其次，我们将通过style来实现精确布局。
在具体实现布局之前，我们要先理解CSS的盒子模型和浮动布局。参考文档在这里：Common Style
1. 盒子模型(Box Model)

width: 当我们不了解里面的属性值和意思时，可以在w3c网站上查到。比如，我们在百度中搜索w3c width就可以找到W3C官网上的CSS width 属性，我们可以看到下图的解释：

height:
padding(padding-left…):
margin(margin-left):
border(border-style、border-width、border-color、border-radius):

2. 填充模式（Flex container）
（1）. flex-direction：row | column（水平布局还是垂直布局）
（2）. justify-content: flex-start | flex-end | center | space-between(内容展示方式，也就是水平居中，居左，居右的问题。这些都是父容器的属性，也就是说如果我们想要子容器水平居中就要我们的父容器添加上这个style)

（3）. align-items：stretch | flex-start | center | flex-end（也就是内容垂直居中，居下，居上的问题）

3. 定位布局（Position）
position：relative | absolute | fixed | sticky（相对定位还是绝对定位方式，可以配合top、left、bottom等形成偏移量）
4. Flex item
5. Flexbox

常用Style添加步骤：
1. overall style: divide the whole page to different parts
2. flex alignment: align boxes in every part of page
3. position box: place box, set offset
4. element specific style: set styles for certain element if needed

现在我们来看一下我们登录界面具体的CSS样式：
1、设定总容器宽度，高度自适应

.parent {
   width: 800;
   height: auto;
}

2、Title水平居中

3、Title文字内容水平居中

4、用户名提示及输入框独占一行并从左往右浮动布局

5、输入框文字样式设定：

6、提交按钮样式设定

最后，如何通过点击提交按钮来实现弹出用户名呢。
1. 寻找到Input标签的value值：

/** 获取元素的value值，但是是初始设置值 */
var userName = this.$el('uInput').attr.value;

1. 弹出toast:

var modal = require('@weex-module/modal');
/*modal.toast({'message': e.target, 'duration': 1}); */
modal.toast({'message': userName, 'duration': 1});

值得注意点：
1、获取元素的Value值：
我们通过Find an Element和Common Events 就可以发现通过 this.$el(id)和e.target就可以得到元素的具体JSON值。然后我们观察到value的值在attr属性下面，故由此就能得到元素的Value值。当然，我们也可以通过生成的JS Bundle文件来观察到这种关系。

2、弹出toast和alet等的参考文档：modal

参考文档：

CSS 尺寸 (Dimension)

CSS width 属性

CSS background 属性

HTML 5 placeholder 属性

CSS position 属性

CSS 水平对齐

Weex复合组件

代码稍后奉献上！