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的结合使用。最后会结合根据所学的基础知识，一块儿开发一个应用。

欢迎你们指正批评、或留言。