Weex入门与进阶指南

最新推荐文章于 2025-09-30 01:10:42 发布

原创

最新推荐文章于 2025-09-30 01:10:42 发布 · 8.2w 阅读

41 ·

CC 4.0 BY-SA版权

文章标签：

#Weex #iOS #Native

本文是Weex的入门与进阶指南，从创建Hello Weex开始，介绍如何集成Weex到iOS工程，包括在iOS应用上运行Weex程序的详细步骤。深入探讨了Weex的高级特性，如自定义UI组件和模块，以及如何为Weex项目做贡献。

原文地址：https://yq.aliyun.com/articles/57554

前言

相比较于React Native的“Learn once, write anywhere”，Weex的口号是“Write once, run everywhere”。考虑到React Native比较任性的向下兼容性，我们也引入了Weex做一番了解。

本文主要分为以下几个部分：

构建Hello World程序；
集成到现有的iOS工程中；
使用Weex的高级特性；
如何为Weex做贡献；

一、Weex入门

1.1 Hello Weex

参考官方教程，我们需要先安装Node。在Mac上也可以通过Homebrew直接进行安装：brew install node。

接着我们需要安装Weex CLI：npm install -g weex-toolkit，并确保版本号大于0.1.0：

$ weex --version
info 0.3.4

至此，准备工作已经到位，我们可以开始编写Weex程序了。
创建一个名为helloweex.we的文件，并编写以下代码：

<template>
  <div>
    <text>Hello Weex</text>
  </div>
</template>

通过命令行在helloweex.we文件所在的目录下执行如下命令：

$ weex helloweex.we 
info Fri Jul 08 2016 14:30:31 GMT+0800 (CST)WebSocket  is listening on port 8082 
info Fri Jul 08 2016 14:30:31 GMT+0800 (CST)http  is listening on port 8081

此时，浏览器会打开一个新的标签页展示helloweex.we的执行效果：

_2016_07_08_2_34_04

注意到此时地址栏的内容http://127.0.0.1:8081/weex_tmp/h5_render/?hot-reload_controller&page=helloweex.js&loader=xhr包含着hot reload字样，所以可以自然联想到当我们在源文件做修改并保存后，该页面会自动刷新展示效果。

1.2 基础结构

上面的示例只是一个非常简单的雏形，而一个比较完整的Weex程序包括三个部分：模板（Template）、样式（Style）和脚本（Script）。

比如我们可以利用上文提到的hot reload，修改文本的颜色并实时查看效果：

<template>
  <div>
    <text class="title">Hello Weex</text>
  </div>
</template>

<style>
  .title { color: red; }
</style>

_2016_07_08_2_47_03

接着我们添加上第三组成部分：脚本（Script）：

<template>
  <div>
    <text class="title"

最低0.47元/天解锁文章