Weex集成开发环境搭建

Weex参考资源

1、Weex项目地址

Weex在GitHub中

https://github.com/apache/incubator-weex.git

支持的环境：

Support Android 4.1 (API 16), iOS 8.0+ and WebKit 534.30+.

 

2、Weex使用方法参考官方文档

http://weex.apache.org/cn/guide/

 

Weex 表面上是一个客户端技术，但实际上它串联起了从本地开发、云端部署到分发的整个链路。开发者首先可在本地像编写 web 页面一样编写一个 app 的界面，然后通过命令行工具将之编译成一段 JavaScript 代码，生成一个 Weex 的 JS bundle；

2 Weex环境搭建

2.1. 安装Node.Js

1）访问node.js官网，下载最新的稳定的安装包。

https://nodejs.org/en/download/

根据自己的系统平台选择合适的包。最好选择编译好的压缩包。

当然也可以下载源码进行编译，不过要花费点时间。

2）下载安装包

$ wget https://nodejs.org/dist/v10.13.0/node-v10.13.0-linux-x64.tar.xz

下载完成以后进行解压

$ tar -xvf node-v10.13.0-linux-x64.tar.xz

3）安装node

将安装文件拷贝到安装目录

$ cp node-v10.13.0-linux-x64 /usr/local/node/10.13.0

配置NODE环境变量 （～/.bashrc或者/etc/profile文件）

export NODE_HOME=/usr/local/node/10.13.0
PATH=$NODE_HOME/bin:$PATH

生效环境变量

$ source [配置文件]

测试是否node可用

$ node -v

v10.13.0
这样node安装成功了。

4）安装npm工具

$ apt install npm

注意：如果安装报错，提示权限不足。请切换root账户安装。

npm 是一个 JavaScript 包管理工具，它可以让开发者轻松共享和重用代码。Weex 很多依赖来自社区，

同样，Weex 也将很多工具发布到社区方便开发者使用。

2.2 安装weex-toolkit

weex-toolkit是Weex开发辅助工具，用来辅助开发和调试。提供了项目创建，安装和启动等功能。

$ npm install -g weex-toolkit

weex-toolkit也支持直接升级子依赖，如：

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

weex-toolkit安装成功以后，支持weex命令了。

2.3 创建项目

1）通过weex创建和初始化项目

$ weex create [awesome-project]   -->项目名

dell@dell-pc:~/DEV/developer/awesome-app$ weex create hello_weex
? Project name hello_weex
? Project description A weex project
? Author zhouronghua@cdeledu.com <zhouronghua@cdeledu.com>
? Select weex web render (Use arrow keys)
❯ 1.0.17 Current: latest features 
  0.12.17 LTS: recommended for most users 

选择默认或者推荐参数即可，进行项目创建。

项目创建和初始化需要花一点时间。

2）安装项目

进入项目目录

$ cd awesome-project

$ npm install

安装项目的依赖库项

3）运行项目

$ npm start

启动项目。

4）Weex构建Android和iOS平台APP

可以通过weex --help查看Weex的使用方法。

• 添加APP平台

$ weex platform add android

• 构建和运行APP平台

$ weex run android

对应的platforms目录下会生成android文件夹。此文件夹下就是对应的Android端APP项目源代码。

5）导入项目

通过Android Studio导入项目。

项目结构说明：

package.json： 包说明，

node_mudules: 依赖库

已经配置好了几个常用的 npm script，分别是：

• build: 源码打包，生成 JS Bundle
• dev: webpack watch 模式，方便开发
• serve: 开启HotReload服务器，代码改动的将会实时同步到网页中

我们打开浏览器，进入 http://localhost:8080/index.html 即可看到 weex h5 页面。

对应的文件为

src/index.vue

 

| —— configs
  | —— config.js                  global config of webpack
  | —— helper.js                  helper functions
  | —— logo.png                   
  | —— plugin.js                  script for compile plugins
  | —— utils.js                   tool functions
  | —— vue-loader.conf.js         loader config of weex
  | —— webpack.common.conf.js     webpack configuration for common environment
  | —— webpack.dev.conf.js        webpack configuration for develop environment
  | —— webpack.prod.conf.js       webpack configuration for production environment
  | —— webpack.test.conf.js       webpack configuration for test environment
| —— platforms
  | —— platforms.json             platform meta data
| —— plugins
  | —— plugins.json               plugin data
| —— src
  | —— entry.js                   the entry file of whole bundle
  | —— index.vue                  vue file source
| —— test
  | —— unit
    | —— specs                    test scripts
    | —— index.js                 source code and config test environment
    | —— karma.conf.js            configuration for karma
| —— web                          static source
| —— .babelrc                     configuration for babel-loader
| —— android.config.json          configuration for packing android project
| —— ios.config.json              configuration for packing ios project
| —— npm-shrinkwrap.json          npm dependence lock file
| —— package.json                 
| —— README.md                    
| —— webpack.config.js            entry file of the webpack command

 

2.4 Weex在线平台Weex playground 

http://dotwe.org/vue/

简单例子：

<template>
  <div style="justify-content:center">
    <text class="freestyle">Yo</text>
  </div>
</template>

<style scoped>
  .freestyle {
    color: #41B883;
    font-size: 233px;
    text-align: center;
  }
</style>