weex开发总结

WEEX开发

概述

本文的主要介绍怎么完成一个weex页面的开发。对开发工具进行简单说明。Weex开发需要哪些基本知识，它与h5开发哪些不同。

weex开发工具的选择

1.Weex在线工具。简单的页面开发可以使用weex提供的在线工具，随时可以在线预览效果。结合Weex playGroud并可以随时预览在手机上的效果。Weex在线开发地址。
**2.其他h5专业开发工具。**Weex基于vue.js开发，所以weex的开发和h5开发很类似。开发weex实际上就是编写vue，跟基于vue框架的h5开发没有区别。可以使用WebStorm专业开发工具进行weex的开发。
WebStorm特点：WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。很适合java程序员的使用。

在线开发工具dotWe

Weex 开发前需要的基本知识

如果你会h5的开发，并了解vue.js，恭喜你已经掌握了weex的开发。如果你对html标签了解，懂得css，javascript基础，也可以进行weex的开发。
所以，在你开发weex之前，需要掌握

• HTML，掌握
• CSS，熟悉
• JS，熟悉
• VUE.JS， 熟悉

如果你对以上，都不了解在学习weex前，请先补足以上知识。

Weex与h5的不同

Weex与基于vue.js的H5开发不完全相同。 Weex针对移动设备对html标签、事件做了优化。下面我会尽量全面介绍他们的不同。
1.标签的不同。
Weex支持的标签有限，没有h5丰富。我们在引入一个标签要确认下，此标签是否是weex支持的标签。另外也有一些是weex扩充的标签，例如slide类似于广告banner。Weex支持的标签，请参考WEEX内置组件列表。
2.标签的一些细节不同。针对所支持的标签，weex定义的属性不完全一样。例如，有些是h5存在weex不支持的属性。例如image(h5叫img)的alt属性。有些是weex新增的属性。例如image中的placeholder。
3.事件不一样。
Weex支持几种特定事件：click, longpress, appear, disappear具体见weex通用事件。
4.其他区别。参考WEEX与Web平台的差异。

Weex的Native相关函数

Native相关的功能，在weex中称为模块，通过weex.requireModule(‘xxx’) 来引入。例如，常用的toast功能，在内置模块modal中，使用我们可以这样做：

var modal = weex.requireModule('modal')
modal.toast({
    message: 'This is a toast',
    duration: 0.3
})

Weex支持的内置模块有：

• dom（对weex页面组件的操作）
• modal（窗口 toast，alert，confirm， promt）
• animation(动画)
• navigator（导航堆栈，push/pop）
• meta（页面的配置信息）
• stream（网络请求）
• clipboard（粘贴板）
• storage（存储）
• picker（数据选择，日期选择，时间选择）
• webview（ 组件操作接口，例如 goBack、goForward、和 reload。与 组件一起使用）

Weex支持的内置模块列表。
以上模块不支持，欢迎使用扩展。Weex支持扩展模块。

Weex开发注意

注意的问题，在开发前，读一下Weex介绍和WEEX内置组件列表，可减少我们入坑的次数。结合本人开发中遇到的问题。这里做个总结。
1. 容器默认布局是flexbox布局。这种布局好处在多个分辨率屏幕上可以很好的显示。当然也支持盒子模型。
2. Div标签更像一个容器，不要在div中嵌套太多层。
A标签下不要直接写文本，加一层text标签。否则，达不到预期效果。