这次WeUI 1.0由于命名规范发生了巨大改变，因此在这里列出一些代码的改动点，希望对大家有所帮助：
### 关于命名
由之前单一的下划线改成`weui-aaa__bbb-bbb_ccc-ccc`这种形式，横杠为连词符，双下划线区分Block和Element（BEM），单下划线连接Modify。下面列出几个例子：
|Old|New|
|---|---|
|`weui_cells`|`weui-cells`|
|`weui_cell_bd`|`weui-cell__bd`|
|`weui_btn_primary`|`weui-btn_primary`|
|`weui_btn_plain_primary`|`weui-btn_plain-primary`|
### button
除了命名以外，其它改变不大。
### cell
#### 之前必须显示定义weui_cell_primary来规定撑满的是hd,bd还是ft。现在默认是bd来撑满，weui-cell_primary变成实现顶部对齐的扩展类。
Old
```html
<div class="weui_cell">
<div class="weui_cell_hd"></div>
<div class="weui_cell_bd weui_cell_primary">...</div>
<div class="weui_cell_ft"></div>
</div>
```
New
```html
<div class="weui-cell">
<div class="weui-cell__hd"></div>
<div class="weui-cell__bd">...</div>
<div class="weui-cell__ft"></div>
</div>
```
#### 带验证码的输入框，img必须定义weui-vcode-img的类名
Old
```html
<div class="weui_cell weui_vcode">
<div class="weui_cell_ft">
<img src="./images/vcode.jpg">
</div>
</div>
```
New
```html
<div class="weui-cell weui-cell_vcode">
<div class="weui-cell__ft">
<img class="weui-vcode-img" src="./images/vcode.jpg">
</div>
</div>
```
#### 带箭头的列表，由之前的weui_cells_access改为单独控制的weui-cell_access
Old
```html
<div class="weui_cells weui_cells_access">
<a class="weui_cell">...</a>
</div>
```
New
```html
<div class="weui-cells">
<a class="weui-cell weui-cell_access">...</a>
</div>
```
### uploader
#### 头部以前是嵌套cell来实现左右布局。新版是用了新类名来实现：
Old
```html
<div class="weui_uploader">
<div class="weui_uploader_hd weui_cell">
<div class="weui_cell_bd weui_cell_primary">图片上传</div>
<div class="weui_cell_ft">0/2</div>
</div>
</div>
```
New
```html
<div class="weui-uploader">
<div class="weui-uploader__hd">
<p class="weui-uploader__title">图片上传</p>
<div class="weui-uploader__info">0/2</div>
</div>
</div>
```
Old|New
---|---
`weui_uploader_status`|`weui-uploader__file_status`
`weui_uploader_status_content`|`weui-uploader__file-content`
`weui_uploader_input_wrp`|`weui-uploader__input-box`
### loading
Old
```html
<div class="weui_loading">
<div class="weui_loading_leaf weui_loading_leaf_0"></div>
<div class="weui_loading_leaf weui_loading_leaf_1"></div>
<div class="weui_loading_leaf weui_loading_leaf_2"></div>
<div class="weui_loading_leaf weui_loading_leaf_3"></div>
<div class="weui_loading_leaf weui_loading_leaf_4"></div>
<div class="weui_loading_leaf weui_loading_leaf_5"></div>
<div class="weui_loading_leaf weui_loading_leaf_6"></div>
<div class="weui_loading_leaf weui_loading_leaf_7"></div>
<div class="weui_loading_leaf weui_loading_leaf_8"></div>
<div class="weui_loading_leaf weui_loading_leaf_9"></div>
<div class="weui_loading_leaf weui_loading_leaf_10"></div>
<div class="weui_loading_leaf weui_loading_leaf_11"></div>
</div>
```
New
```html
<i class="weui-loading weui-icon_toast"></i>
```
### panel：
* 所有的weui_media都改成了weui-media-box
* 去掉了weui_panel_access
### searchbar
Old|New
---|---
`weui_search_outer`|`weui-search-bar__form`
`weui_search_inner`|`weui-search-bar__box`
`weui_search_text`|`weui-search-bar__label`
`weui_search_cancel`|`weui-search-bar__cancel-btn`
### tab
* 去掉了weui_tab_bd_item_active，以前这个类只是实现display:block而已，新版本就去掉了。
### dialog
Old
```html
<div class="weui-dialog__ft">
<a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default">辅助操作</a>
<a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">主操作</a>
</div>
```
New
```html
<div class="weui-dialog__ft">
<a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default">辅助操作</a>
<a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">主操作</a>
</div>
```
### toptips
Old
```html
<div class="weui_toptips weui_warn"></div>
```
New
```html
<div class="weui-toptips weui-toptips_warn"></div>
```
另外，若想看老版本的代码和DEMO：https://github.com/Tencent/weui/releases/tag/v0.4.3
老版本的DEMO在dist/example/index.html。
