Weex入门教程

一 概述

Weex是阿里巴巴开源的一套构建高性能、可扩展的原生应用跨平台开发方案，并于 2017-02-24 迁移至 Apache 基金会。

Weex支持Vue.js语法。

Weex官网 https://weex.apache.org

Weex Git地址 https://github.com/apache/incubator-weex

二 搭建开发环境

1 安装依赖

安装依赖可以参照官网教程
https://weex.apache.org/cn/guide/set-up-env.html

-安装Node.js

windows环境请至Node.js官网下载安装，官网地址：https://nodejs.org。

对于 Mac，可以使用 Homebrew 进行安装：

brew install node

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

如果npm版本<5请使用以下命令升级版本：

npm i npm@latest -g

-安装weex-toolkit

使用以下命令安装weex-toolkit

npm install -g weex-toolkit

国内开发者可以考虑使用淘宝的 npm 镜像 —— cnpm 安装 weex-toolkit

npm install -g cnpm --registry=https://registry.npm.taobao.orgcnpm install -g weex-toolkit

如果提示权限错误（permission error），使用 sudo 关键字进行安装

sudo cnpm install -g weex-toolkit

weex-toolkit也支持升级版本，升级命令：

weex update weex-devtool@latest //@后标注版本后，latest表示最新

2 创建或初始化项目

创建或初始化项目请使用以下命令

weex create awesome-project

等待项目创建好后，打开项目根目录，可以看到start.bat启动命令文件，双击即可启动一个web服务。

或者输入以下命令（start.bat命令文件使用的也是该命令）：

npm run serve

此时打开浏览器输入http://127.0.0.1:8080，即可看到Weex欢迎页面。

3 开发

打开项目根目录，可以看到：

源码文件夹：src

打包文件夹：dist

打开src文件夹下面的index.vue文件，修改data里target变量值：

data: {      logoUrl: 'http://img1.vued.vanthink.cn/vued08aa73a9ab65dcbd360ec54659ada97c.png',      target: 'China'    }

不需要做任何操作，即可看到http://127.0.0.1:8080页面Hello后面的值变掉了。

点击页面会调用update方法，update方法会修改target的值并且打印日志。

==注意：需要将页面展示方式切换为移动设备样式，即鼠标图标由箭头变为圆形的时候，点击才生效。==

Chrome浏览器打开开发者工具可以切换页面展示样式。

update: function (e) {        this.target = 'Weex'        console.log('target:', this.target)      }

4 调试

调试使用weex-toolkit工具，详情见官网教程https://weex.apache.org/cn/guide/tools/toolkit.html，这里介绍weex-toolkit的预览功能。

首先，请用手机下载安装WeexPlayground工具，下载地址https://weex.apache.org/cn/playground.html。

然后，使用以下命令生成调试页面：

weex src/index.vue//这里以index.vue页面为例

该命令执行完后，会自动在浏览器打开一个页面，使用WeexPlayground工具扫描该界面的二维码，即可在手机上预览该页面的效果。

三 Android集成

Android集成请参考官方文档，文档地址https://weex.apache.org/cn/guide/integrate-to-your-app.html

样例工程：https://github.com/xkli/WXSample

weex_sdk最新版本0.16.0

compile 'com.taobao.android:weex_sdk:0.16.0'//可以不加@aar

Android中加载weex页面主要使用以下代码：

private val TEST_URL = "http://192.168.73.1:8080/dist/index.js"//对应项目根目录下dist文件夹下的js文件mWXSDKInstance.renderByUrl("WXSample", TEST_URL, options, null, WXRenderStrategy.APPEND_ONCE)

如果页面代码有改动，使用以下命令重新打包：

weex compile src dist

然后在Android App中重新打开该页面即可看到效果。

四 IOS集成

请参考官方文档：https://weex.apache.org/cn/guide/integrate-to-your-app.html