安装配置 - Weex

發表於 | 分類於 | | 閱讀次數:

Weex介绍

Weex 是一套简单易用的跨平台开发方案,能以web的开发体验构建高性能、可扩展的native应用,出自阿里团队.

Weex安装

安装前置条件: Weex安装前需要安装Node环境,点此下载

检测Node环境

1
2
3
4
[elonsu@localhost Elonsu ]$ node -v
v7.3.0
[elonsu@localhost Elonsu ]$ npm -v
3.10.10

Npm安装weex

npm 是一个 JavaScript 包管理工具,它可以让开发者轻松共享和重用代码。

1
[elonsu@localhost Elonsu ]$ npm install -g week-toolkit

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

1
2
[elonsu@localhost Elonsu ]$ sudo npm install -g cnpm
[elonsu@localhost Elonsu ]$ sudo cnpm install -g weex-toolkit

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

1
[elonsu@localhost Elonsu ]$ weex

Weex开篇HelloWorld

示例程序

在上面安装正常的情况下, 创建我们的示例hello.we文件; 文件内容如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
   <div>
     <text class="text" style="color: #FF0000;">Hello world</text>
   </div>
</template>

<style>
   .text{
     font-size: 50;
   }
</style>

<script></script>

说明: <template>、<style> 、<script> 分别对应于Web中的 HTML,CSS(<style> 标签),JavaScript(<script> 标签)。
注意: Weex遵循HTML特性命名规范,所以特性命名时请不要使用陀峰格式(CamelCase),采用以“-”分割的 long-name 形式。

编译运行

1
2
3
[elonsu@localhost Elonsu ]$ weex hello.we
info Sat Jan 07 2017 17:27:24 GMT+0800 (CST)WebSocket  is listening on port 8082
info Sat Jan 07 2017 17:27:24 GMT+0800 (CST)http  is listening on port 8081

执行结果: 我们会在浏览器页面中看到执行成功后页面,显示红色的”Hello world”效果.

终端预览

手机端预览效果需要安装Playground App(https://weex-project.io/download.html)
我们在编译运行的命令后面增加--qr参数,表示生成二维码。

1
[elonsu@localhost Elonsu ]$ weex hello.we --qr

执行上述命令,会在控制台生成一个二维码, 手机端使用Playground App扫描二维码即可看到效果.

开发调试

1
[elonsu@localhost Elonsu ]$ weex debug hello.we

创建工程

1
2
3
4
5
6
7
8
9
10
[elonsu@localhost Elonsu ]$ mkdir wuyu-platform-weex
[elonsu@localhost Elonsu ]$ cd wuyu-platform-weex
[elonsu@localhost wuyu-platform-weex ]$ weex init
prompt: Project Name:  (wuyu-platform-weex)
file: .gitignore created.
file: README.md created.
file: index.html created.
file: package.json created.
file: src/weex-bootstrap.we created.
file: webpack.config.js created.

上面操作我们创建了一个工程,工程名叫wuyu-platform-weex.
接下来执行工程依赖包安装,以及编译并运行.

1
2
3
[elonsu@localhost wuyu-platform-weex ]$ npm install
[elonsu@localhost wuyu-platform-weex ]$ npm run dev
[elonsu@localhost wuyu-platform-weex ]$ npm run serve

Weex开发套件Weexpack

Weexpack 是 Weex 新一代的工程开发套件,它允许开发者通过简单的命令,创建 weex 工程项目,将项目运行在不同的开发平台上。

Weexpack安装

Weexpack安装使用命令npm install weexpack -g或者cnpm install weexpack -g, 这里我们使用淘宝镜像。

1
[elonsu@localhost Elonsu ]$ sudo cnpm install weexpack -g

Weexpack初始化工程

我们创建一个工程wuyu-weex,使用weexpack init 工程名 会自动创建一个以工程名命名的文件夹,并进行工程初始化.

1
2
[elonsu@localhost Elonsu ]$ weexpack init wuyu-weex
=> Initialize a new Weex app (wuyu-weex)

进入工程安装依赖

1
2
[elonsu@localhost Elonsu ]$ cd wuyu-weex
[elonsu@localhost wuyu-weex ]$ npm install

Weexpack初始化工程说明

Tree形结构展示目录结构, 笔者在Mac环境下.使用如下命令展示tree形目录结构

1
[elonsu@localhost wuyu-weex ]$ find . -print | sed -e 's;[^/]*/;|____;g;s;____|; |;g'

Weexpack初始化的后面结构大致如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
-> /wuyu-weex
.
|—— .gitignore
|—— README.md
|—— package.json
|-- android.config.json
|-- ios.config.json
|—— webpack.config.js
|—— /src
|     |—— index.we
|—— /html5
|     |—— index.html
|—— /ios
|     |—— /playground
|     |—— /sdk
|     |—— /WXDevtool
|—— /android
|     |—— /playground
|     |—— /appframework

目录结构说明:

  • webpack.config.js 是 webpack 配置文件,用于生成 .we 文件的 JSBunlde
  • ios.config.json 是 iOS 项目配置文件
  • android.config.json 是 Android 项目配置文件
  • /src 目录放置 Weex 页面
  • /html5 是 H5 端入口文件
  • /ios 放置 iOS 项目
  • /android 放置 Android 项目

工程运行与打包

如果一切运行正常, 便可以使用weexpack打包或模拟器运行了.

Android平台

Android下打包和构建是一体的

1
[elonsu@localhost wuyu-weex ]$ weexpack run android
Ios平台

Ios下运行

1
[elonsu@localhost wuyu-weex ]$ weexpack run ios

Ios下打包

1
[elonsu@localhost wuyu-weex ]$ weexpack build ios