WEEX系列 我的第一个WEEX DEMO

和一步一起聊聊WEEX

我刚学 WEEX 的时候，环境就搭建了好久，大家若也遇到了一些坑可以去 weex-toolkit 的 github上提 issue。这个也是我遇到困难的解决方案。那么就让我们来实现第一个 weex 程序吧。

创建项目

weex create first-demo
npm install

我们先了解 src 是我们业务代码存放的地方，webpack.config.js 是 webpack 的配置文件将 vue 文件打包成 weex 可以执行的 JS Bundle。web可以简单理解为是 h5个性化的代码工作区。platforms 是原生 android 代码或者 ios 代码的存放位置。

写两行代码试试

<template>
  <div>
    <text>Hello World</text>
  </div>
</template>
<style>
</style>
<script>
  export default {
  }
</script>

上述代码是 weex文件的模板。我们在 template中书写标签，在 style 中完成布局和样式，在 script 中实现我们的业务逻辑。
在项目的根目录下执行npm start，执行该命令我们可以预览 h5的效果，并且是热更新的。

使用 weex-toolkit 进行调试预览

虽然说 weex 号称自己三端兼容，但是在效果呈现上还是有一定的差异的，有时在浏览器上有效果，但在端上是无效的，反之亦然。因此我们也需要使用 playground校验原生应用的效果。 weex、weex debug weex run android目前我接触最多的就是上述三个命令。

weex调试单个文件（无法热更新）

weex '文件.vue|we' 使用 weex 进行预览时文件的后缀只能是 vue 或者 we。这种形式和dotwe的效果是一样的。

weex debug 进行调试

调试单个文件, 文件后缀不限。
weex debug filename

执行成功后，会自动打开 chrome 浏览器，屏幕上生成两个二维码，先用 playground 扫一扫左边，在扫一下右面的。注意： 手机和电脑必须连接的是同一网络进入调试状态实现的是热更新的效果。每次编写代码后只要刷新下浏览器或者手机即可。

调试整个项目(操作同上)
weex debug your/we/path -e index.we

使用真机进行调试

weex platform add android
weex run android
手机有问题无法向大家演示。

总结

前三篇文章带着大家搭建weex开发环境，介绍常见命令的使用。后期的文章主要围绕 weex 框架及 与vue、vuex、router的结合使用。最后会结合根据所学的基础知识，一起开发一个应用。

欢迎大家指正批评、或留言。