Weex入坑笔记

Weex入坑笔记

第一步：安装依赖

1. Weex 官方提供了 weex-toolkit 的脚手架工具来辅助开发和调试。首先，你需要 Node.js 和 Weex CLi。
2. 安装 Node.js 方式多种多样，最简单的方式是在 Node.js 官网 下载可执行程序直接安装即可。
3. 对于 Mac，可以使用Homebrew 进行安装：

brew install node

• 安装完成后，可以使用以下命令检测是否安装成功：

$ node -v
v6.11.3
$ npm -v
3.10.10

安装了 Node.js 环境，npm 包管理工具也随之安装了。因此，直接使用 npm 来安装 weex-toolkit。

• 使用 sudo 关键字进行安装

$ sudo cnpm install -g weex-toolkit

• 安装结束后你可以直接使用 weex 命令验证是否安装成功，它会显示 weex 命令行工具各参数：

weex命令.png

第二步：初始化

• 然后初始化 Weex 项目：

$ weex create awesome-project

• 执行完命令后，在 awesome-project 目录中就创建了一个使用 Weex 和 Vue 的模板项目。

创建项目.png

第三步：开发

• 之后我们进入项目所在路径，weex-toolkit 已经为我们生成了标准项目结构。

• 在 package.json 中，已经配置好了几个常用的 npm script，分别是：

  build: 源码打包，生成 JS Bundle
  dev: webpack watch 模式，方便开发
  serve: 开启HotReload服务器，代码改动的将会实时同步到网页中

• 我们先通过 npm install 安装项目依赖。之后运行根目录下的 npm run dev & npm run serve 开启 watch 模式和静态服务器。

• 然后自动打开浏览器，即可看到 weex h5 页面。

• 初始化时已经为我们创建了基本的示例，我们可以在 src/index.vue 中查看。

开启服务命令.png

• 代码如下所示：

<template>
  <div class="wrapper" @click="update">
    <image :src="logoUrl" class="logo"></image>
    <text class="title">Hello {{target}}</text>
    <text class="desc">Now, let's use vue to build your weex app.</text>
  </div>
</template>

<style>
  .wrapper { align-items: center; margin-top: 120px; }
  .title { padding-top:40px; padding-bottom: 40px; font-size: 48px; }
  .logo { width: 360px; height: 156px; }
  .desc { padding-top: 20px; color:#888; font-size: 24px;}
</style>

<script>
  export default {
    data: {
      logoUrl: 'http://img1.vued.vanthink.cn/vued08aa73a9ab65dcbd360ec54659ada97c.png',
      target: 'World'
    },
    methods: {
      update: function (e) {
        this.target = 'Weex'
        console.log('target:', this.target)
      }
    }
  }
</script>

第四步：编译和运行

1. 默认情况下 weex create 命令并不初始化 iOS 和 Android 项目，你可以通过执行 weex platform add 来添加特定平台的项目。

weex platform add ios
weex platform add android

2. 由于网络环境的不同，安装过程可能需要一些时间，请耐心等待。如果安装失败，请确保自己的网络环境畅通。

3. 为了能在本地机器上打开 Android 和 iOS 项目，你应该配置好客户端的开发环境。对于 iOS，你应该安装并且配置好 Xcode。对于 Android，你应该安装并且配置好 Android Studio。当开发环境准备就绪后，运行下面的命令，可以在模拟器或真实设备上启动应用：

weex run ios
weex run android
weex run web

Snip20180320_13.png Snip20180320_14.png

第五步：调试

• weex-toolkit 还提供了强大的调试功能，只需要执行：

weex debug

• 这条命令会启动一个调试服务，并且在 Chrome （目前只支持基于 V8 引擎的桌面浏览器） 中打开调试页面。详细用法请参考 weex-toolkit 的文档。

Snip20180320_15.png