补充前面知识一点，打包出来的app怎么更换图片，改变下图的图片路径就好https://juejin.im/post/5939148f5c497d006b630d65
我们现在开始，讲讲weex的组件和模块，只讲weex关于前端的部分，因为时间问题，我会结合官网的一些可用的demo和指出一些坑，假如讲得不好，多多担待。
我们在html中，有非常多的标签，weex就是把这些标签编译成android或者ios平台上的组件
在weex里面，我们每一个组件的布局不能跟html里面那样随性，局限了一部分功能，例如布局上，在安卓布局这块，有四种布局 引用简书的一个地址:线性布局（推荐）=> 类似前端的flex布局相对布局 => 类似前端的定位。帧布局 => 用于动画或者播放器之类的表格布局 => 类似前端的表单
注意事项
我们先从盒模型开始讲起，其实也没什么好讲的，官放上说border不支持复合写法（经本人测试，浏览器端可以使用，但是手机端是无效的，要注意使用分离的写法）
Flex 容器
以往，我们写移动端是不是，是不是经常用到100%这种百分比的流式布局法，很可惜安卓的布局不支持百分数。并且，weex不支持float浮动属性，默认就是flex所以，我们用flex布局的方式来写布局。
接下来我们直接进入/src/foo.vue{ {text}}
禁止引入html自带的一些标签，并且不要用html5自带的标签(header,footer等)weex不识别
因为不支持html5的标签，类似header，footer，一律用用div代替
个人推荐写法，每一个组件都包裹一个顶层的div，并且顶层div不写样式，这样就避免了一些bug(还记得上一讲，为什么在web居中了，但是在虚拟机中没有居中吗？原因就是没有加一个顶层不带class的div)
text标签
text标签在html里面是没有的，在weex里有什么用呢？凡是文字的你都要用text标签包裹，这是规定。
例如：Hello
另外text有个很特殊的样式
lines {number}: 指定文本行数。默认值是 0 代表不限制行数。 这个样式性很有用，使用场景有点像text-overflow，就是多行情况下我限制显示几行
但是官方demo又有一个错误，lines不能写在标签作为属性的。个人测试时无效的，必须写在样式表里面。 错误写法谨记以下五点
- weex不支持border复合写法。所以，我们要分开写
- 盒模型是border-box，而不是常规浏览器下的content-box
- 不支持float:left/right 用 flex代替
- 安卓的dpi是一倍，苹果设备目前都是两倍的
- weex不支持rem em ,不支持百分比，但是放心使用，其实内部已经适配好了，不同手机看到的大小肯定不是固定的
上面是一些规范或者说是通用特性，下面我们来讲讲一些所见即所得的组件，更多通用特性见官网，因为坑我都列出来了，你看官网绝对一马平川。
input组件
input不支持click事件,为什么不支持click，因为input点击事件，安卓系统就会调用输入法，可能会造成冲突
input标签最后一定要写斜杠或者闭合标签，否则只能在网页加载出来，在虚拟机中是加载不出来的。 官方写法类似html的写法
madal 模块
我们接触的第一个内建模块，就是weex操作原生的一个模块，我们vue的写法只是写ui
按常理来解释，有点像前端我们所说的toast，或者alert prompt之类的，但是他是原生的，这懂了吧？ require madal 有两个参数，第二个是点击之后做的事情。const modal = weex.requireModule('modal') export default { methods: { oninput (event) { console.log('oninput:', event.value) modal.toast({ message: `oninput: ${event.value}`, duration: 0.8 }) }, onchange (event) { console.log('onchange:', event.value) modal.toast({ message: `onchange: ${event.value}`, duration: 0.8 }) }, onfocus (event) { console.log('onfocus:', event.value) modal.toast({ message: `onfocus: ${event.value}`, duration: 0.8 }) }, onblur (event) { console.log('onblur:', event.value) modal.toast({ message: `input blur: ${event.value}`, duration: 0.8 }) } } } 当触发不同的事件，就会弹出不同的框，可以输入啊等等。
image组件
前面我们说过文字都要用text ,在weex里，关于图像的都要用image标签。
div标签也不能直接设置背景图片，只能设置背景色，所以image标签也是很有用的 image 组件用于渲染图片，并且它不能包含任何子组件。 需要注意的是，需要明确指定 width 和 height，否则图片无法显示。 如果需要实现 background-image 的效果，可以使用 image 组件和 position 定 位来现实，如下面代码。
你好，image
切记的一点:闭合标签
这时候，有个非常重要的点，就是weex屏幕的适配：我们不管屏幕的分辨率是多少，其实weex自己内部有一个换算比，宽是750px,g高是1250px上下，不管你跑在任何手机上，安卓大部分手机都是百分之百的显示，可以去android studio里面下载多几部不同的分辨率手机分别测试，然后进行一点点的微调(主要是高度，但是手机一般高度都忽略)
video组件
默认是调用原生安卓播放器进行播放。
在小型的app用video还是很不错的,state: { {state}}
这里要提一点，假如你在网页上没有任何效果，就在虚拟机中试试，weex的web环境还是模拟不了真实的安卓环境。
stream 模块
提供了一个ajax的方式来加载外部的资源，官方例子很完整，大家复制下来，看看具体api，一般会用jq的ajax请求，就会用了。
methods: { getStarCount (repo, callback) { return stream.fetch({ method: 'GET', type: 'json', url: 'https://api.github.com/repos/' + repo }, callback) } }, a组件和web组件
在网页上a标签在html上是页面和页面之间的跳转，那weex里面呢？
a标签也是进行页面跳转的，但是href链接的地址，是一个js文件，这个js文件是我们weex能解读的js文件
我们可以把编译后app.weex.js的文件放到根目录下取名hello.js，然后用a标签链接到这个js文件，就可以点击跳转到这个hello.js的页面，可以这么理解每一个编译后的app.weex.js就是一个页面Jump
web组件
有点像iframe，一般引入第三方的资源，web组件要有width属性,否则加载不了
使用 组件在 Weex 页面中嵌入一张网页内容。src 属性用来指定资源地址。url一定要带协议例如访问百度url:https://www.baidu.com/
总结:
weex上手还是有一定难度的，多看官网，多踩坑，建议大家拓展一下屏幕适配，安卓和ios之间的差异，假如你还会vue语法的话，你会发现weex真的还挺好的。（因为本人也不是大神，时间也有限，而且都是基础，就不整理源码了，大家多敲一敲代码，更加能成长起来）