Weex 入坑指南：快速开始 Weex 之旅

Posted 2021-04-29 HTML5头条

前言：本文默认你知道 Weex 是什么，如果不清楚，可以阅读官网进行了解。

Weex 目前提供了两个脚手架工具来辅助开发和调试：weex-toolkit 和 weexpack。weex-toolkit 功能局限于对 weex 或 vue 页面的开发辅助上，与 weex-playground 紧密结合。weexpack 是一个扩展功能强大的命令行工具，支持编译成 Native 的安装包，但是缺乏一些 debug 手段。

在这里，我们推荐基于 weexpack 整合的 starter kit，结合两者的优势，快速入门。

在文末我们还提供了 cooking + weexpack 的解决方案来替代 weex，方便生成 Weex 项目。

第一步：安装依赖

如果你还没有安装 Node.js，首先需要安装 Node.js，可以通过官网安装。

对于 Mac 用户，我们推荐 Homebrew 进行安装：

brew install node

安装完成之后，可以使用以下命令来安装 weex-toolkit 和 weexpack：

npm install -g weex-toolkit@beta weexpack # weex-toolkit 只有 beta 版可以使用 Vue

之后你可以通过 weexpack 和 weex 命令来检测是否安装成功，它会显示命令行工具的各项参数。

第二步：初始化

通过克隆或者下载 weex-vue-starter-kit 进行项目的初始化：

git clone [e-mail]:elemefe/weex-vue-starter-kit.git

执行完成后，在 weex-vue-starter-kit 目录中就创造了一个使用 Weex 和 Vue 模板的项目文件，提供了 weex 和 weexpack 命令的支持，可以使用 weex 与 weexpack 命令的全部功能。

第三步：开发

项目为我们准备了一个与 weexpack create 初始化项目类似的目录结构，我们只需要关注 src 目录，像写 Vue 那样进行操作即可。

在 package.json 中提供了一些开发时的指令：

• build 源码打包

• dev webpack watch

• debug 开启 debugger，相当于 weex debug

首先，我们通过 npm install（或者 Yarn） 安装依赖，之后执行：

npm run dev

之后打开浏览器，进入 ，即可看到带二维码的 Weex 页面。

初始化时已经准备好了示例，我们可以在 src/index.vue 查看源代码：

<template>
  <div class="container">

<image src="http://ata2-img.cn-hangzhou.img-pub.aliyun-inc.com/7d42775b8f0d0c86589082dc9ee179c2.png" class="bannar-image"/>

<text @click="changeMessage" class="message">{{ message }}</text>

<text class="quotes">{{ quotes }}</text>
  </div></template>

<style>
  .container {

    display: flex;
    flex-direction: column;
    align-items: center

}
  .bannar-image {
    width: 200px;
    height: 200px;

}
  .message {
    padding-top: 20px;
    padding-bottom: 40px;
    color: #0055dd;
    font-size: 28px;

}
  .quotes {
    font-size: 16px;
    color: #666;
  }</style>

<script>
  export default {

    data() {
      return {
        message: 'Welcome to Use Weexpack!',
        quotes: 'A Tool To Build WEEX Faster'

};
    },
    methods: {
      changeMessage() {
        this.message = 'You click it!';
      }
    }
  }</script>

如果你是已经有 Vue 开发经验的开发者，可以很快通过 Vue 语法进行 Weex 应用的创造。

第四步： Playground

Playground 提供了开发阶段的真机测试手段，我们只需要下载 Playground 并安装到你的移动设备即可开始测试和 Debug：

android 在下载安装完毕之后通过扫描二维码，即可在 Playground 中看到你的项目。

ios App Store 中的版本暂不支持最新版本的 Vue，我们将会通过编译 Playground 到移动设备一文协助开发。

Weex 目前有很多浏览器无法表现的效果，我们强烈建议通过移动设备模拟或者真机进行测试。

二维码还可以帮助我们通过 Playground 进行 Debug，使用 npm run debug 命令即可。我们将通过 Debug 一文说明这个问题。

cooking + weex

我们也提供了 cooking + weex 的脚手架，替代 weex-toolkit 工具。直接通过 cooking 初始化项目，确保已经升级到 1.5.0 及其以上版本。

cooking create my-project weex

开始开发

npm run dev

# 查看二维码
npm run qrcode

# 调试
npm run debug

打包

npm i weexpack -g
npm run dist
weexpack platform add ios # or androidweexpack run ios

链接：https://zhuanlan.zhihu.com/p/25177344

来源：知乎