Weex介绍
Weex 是一套简单易用的跨平台开发方案,能以web的开发体验构建高性能、可扩展的native应用,出自阿里团队.
Weex安装
安装前置条件: Weex安装前需要安装Node环境,点此下载
检测Node环境
[yunxi@localhost yunxi ]$ node -v
v7.3.0
[yunxi@localhost yunxi ]$ npm -v
3.10.10
Npm安装weex
npm 是一个 JavaScript 包管理工具,它可以让开发者轻松共享和重用代码。
[yunxi@localhost yunxi ]$ npm install -g week-toolkit
国内开发者可以考虑使用淘宝的npm镜像cnpm安装weex-toolkit
[yunxi@localhost yunxi ]$ sudo npm install -g cnpm
[yunxi@localhost yunxi ]$ sudo cnpm install -g weex-toolkit
安装结束后你可以直接使用weex命令验证是否安装成功,它会显示weex命令行工具各参数：
[yunxi@localhost yunxi ]$ weex
Weex开篇HelloWorld
示例程序
在上面安装正常的情况下, 创建我们的示例hello.we文件; 文件内容如下:
<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 形式。
编译运行
[yunxi@localhost yunxi ]$ 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参数,表示生成二维码。
[yunxi@localhost yunxi ]$ weex hello.we --qr
执行上述命令,会在控制台生成一个二维码, 手机端使用Playground App扫描二维码即可看到效果.
开发调试
[yunxi@localhost yunxi ]$ weex debug hello.we
创建工程
[yunxi@localhost yunxi ]$ mkdir wuyu-platform-weex
[yunxi@localhost yunxi ]$ cd wuyu-platform-weex
[yunxi@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. 接下来执行工程依赖包安装,以及编译并运行.
[yunxi@localhost wuyu-platform-weex ]$ npm install
[yunxi@localhost wuyu-platform-weex ]$ npm run dev
[yunxi@localhost wuyu-platform-weex ]$ npm run serve
Weex开发套件Weexpack
Weexpack 是 Weex 新一代的工程开发套件,它允许开发者通过简单的命令,创建 weex 工程项目,将项目运行在不同的开发平台上。
Weexpack安装
Weexpack安装使用命令npm install weexpack -g或者cnpm install weexpack -g, 这里我们使用淘宝镜像。
[yunxi@localhost yunxi ]$ sudo cnpm install weexpack -g
Weexpack初始化工程
我们创建一个工程wuyu-weex,使用weexpack init 工程名 会自动创建一个以工程名命名的文件夹,并进行工程初始化.
[yunxi@localhost yunxi ]$ weexpack init wuyu-weex
=> Initialize a new Weex app (wuyu-weex)
进入工程安装依赖
[yunxi@localhost yunxi ]$ cd wuyu-weex
[yunxi@localhost wuyu-weex ]$ npm install
Weexpack初始化工程说明
Tree形结构展示目录结构, 笔者在Mac环境下.使用如下命令展示tree形目录结构
[yunxi@localhost wuyu-weex ]$ find . -print | sed -e 's;[^/]*/;|____;g;s;____|; |;g'
Weexpack初始化的后面结构大致如下:
-> /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下打包和构建是一体的
[yunxi@localhost wuyu-weex ]$ weexpack run android
Ios平台
Ios下运行
[yunxi@localhost wuyu-weex ]$ weexpack run ios
Ios下打包
[yunxi@localhost wuyu-weex ]$ weexpack build ios
网友评论