weex调研总结

资源

weex官网：https://weex.apache.org/cn

weex简介

Weex 是一套简单易用的跨平台开发方案，能以 web 的开发体验构建高性能、可扩展的 native 应用，为了做到这些，Weex 与 Vue 合作，使用 Vue 作为上层框架，并遵循 W3C 标准实现了统一的 JSEngine 和 DOM API，这样一来，你甚至可以使用其他框架驱动 Weex，打造三端一致的 native 应用。

环境安装

第一步 安装依赖

安装 Node.js 方式多种多样，最简单的方式是在 Node.js 官网 下载可执行程序直接安装即可。

Weex 官方提供了 weex-toolkit 的脚手架工具来辅助开发和调试。首先，你需要 Node.js 和 Weex CLi。

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

注意: weex-toolkit 在 1.0.1 之后才支持初始化 Vue 项目，使用前请确认版本是否正确。

$ npm install -g weex-toolkit$ weex -vv1.0.3weex-builder : v0.2.4weex-previewer : v1.3.4

我们可以使用淘宝的 npm 镜像 —— cnpm 安装 weex-toolkit

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

初始化

初始化weex项目

 $ weex init awesome-projec  //awesome-projec为你的项目名

执行完命令后，在 awesome-project 目录中就创建了一个使用 Weex 和 Vue 的模板项目。

项目

此时weex-toolkit已经为我们搭建好标准的项目结构
在package.json中，已经配置好常用的npm script

1. build:源码打包，生成JS Bundle2. dev:webpack watch 模式，方便开发3. serve:开启静态服务器4. debug:调试模式

我们先通过 npm install 安装项目依赖。之后运行 npm run dev 和 npm run serve 开启watch 模式和静态服务器。
然后我们打开浏览器，进入 http://localhost:8080/index.html 即可看到 weex h5 页面。
初始化时已经为我们创建了基本的示例.

---

集成weex到现有应用

集成到Android

Android 集成有两种方式
1. 源码依赖：能够快速使用WEEX最新功能，可以根据自己项目的特性进行相关改进。
2. SDK依赖：WEEX 会在jcenter 定期发布稳定版本。jcenter
注:国内可能需要翻墙，这里我们可以使用阿里的maven厂库

注意 目前我们使用第二种方式，使用sdk稳定性较高

接入sdk
1. 创建Android工程，正常创建即可，从此我们也可看到weex对原有项目的侵入性很小，非常适合那些已有项目接入。
2. 在接入中只要在build.gradle中加入相关依赖即可

compile 'com.android.support:recyclerview-v7:23.1.1'compile 'com.android.support:support-v4:23.1.1'compile 'com.android.support:appcompat-v7:23.1.1'compile 'com.alibaba:fastjson:1.1.46.android'compile 'com.taobao.android:weex_sdk:0.5.1@aar'

注意 这里的依赖版本一定要和你项目对应的buildToolVersion对应

集成到IOS

这里我直接给个地址：https://weex.apache.org/cn/guide/integrate-to-your-app.html

---

Weex原理

这里简单的介绍一个weex工作原理

整体架构

Weex 表面上是一个客户端技术，但实际上它串联起了从本地开发环境到云端部署和分发的整个链路。开发者首先可以在本地像撰写 web 页面一样撰写一个 app 的页面，然后编译成一段 JavaScript 代码，形成 Weex 的一个 JS bundle；在云端，开发者可以把生成的 JS bundle 部署上去，然后通过网络请求或预下发的方式传递到用户的移动应用客户端；在移动应用客户端里，WeexSDK 会准备好一个 JavaScript 引擎，并且在用户打开一个 Weex 页面时执行相应的 JS bundle，并在执行过程中产生各种命令发送到 native 端进行的界面渲染或数据存储、网络通信、调用设备功能、用户交互响应等移动应用的场景实践；同时，如果用户没有安装移动应用，他仍然可以在浏览器里打开一个相同的 web 页面，这个页面是使用相同的页面源代码，通过浏览器里的 JavaScript 引擎运行起来的。————摘录自weex文档

weex页面结构

一个 Weex 页面就是一个相对独立解耦的移动应用界面，它不仅包括了界面展示、更包含了逻辑处理、设备能力使用、生命周期管理等部分。

DOM 模型

Weex 页面通过类似 HTML DOM 的方式管理界面，首先页面会被分解为一个 DOM 树，，每个 DOM 结点都代表了一个相对独立的 native 视图的单元。然后不同的视图单元之间通过树形结构组合在了一起，构成一个完整的页面。

组件

Weex 支持文字、图片、视频等内容型组件，也支持 div、list、scroller 等容器型组件，还包括 slider、input、textarea、switch 等多种特殊的组件。Weex 的界面就是由这些组件以 DOM 树的方式构建出来的。

布局系统

Weex 页面中的组件会按照一定的布局规范来进行排布，我们这里提供了 CSS 中的盒模型、flexbox 和 绝对/相对/固定/吸附布局这三大块布局模型。

功能

Weex 提供了非常丰富的系统功能 API，包括弹出存储、网络、导航、弹对话框和 toast 等，开发者可以在 Weex 页面通过获取一个 native module 的方式引入并调用这些客户端功能 API。

生命周期

每个 Weex 页面都有其自身的生命周期，页面从开始被创建到最后被销毁，会经历到整个过程。这是通过对 Weex 页面的创建和销毁，在路由中通过 SDK 自行定义并实现的。

---

weex工具

DevTools

weex devtools 是专门为 Weex 定制的一款实现了 Chrome Debugging Protocol 的 inspect/debug 工具，能够帮助你快速查看 app 运行状态和调试 weex 中的 Javascript 代码，当前支持 iOS 和 Android 两个平台。

安装

  $ npm install  -g  weex-toolkit

开始调试

$ weex debug

具体文档：https://weex.apache.org/cn/guide/tools/devtools.html

WeexPack

weexpack 是 weex 新一代的工程开发套件，是基于 weex 快速搭建应用原型的利器。它能够帮助开发者通过命令行创建 Weex 工程，添加相应平台的 Weex app 模版，并基于模版从本地、GitHub 或者 Weex 应用市场安装插件，快速打包 Weex 应用并安装到手机运行，对于具有分享精神的开发者而言还能够创建 Weex 插件模版并发布插件到 Weex 应用市场。

注意 但是目前weexpack不支持Vue2.0版本的Weex，由于考虑到现在公司内部对vue语法较熟，上手较快，所以我们这里没有采用weexpack。

weexpack 所提供的命令大致可分为三组，分别是:

打包命令：

weexpack create — 创建 Weex 工程项目。
weexpack platform add/remove — 安装／移除 Weex 应用模版，默认模版支持 Weex bundle 调试和插件机制。
weexpack platform list — 查看已安装的平台模版及版本。
weexpack platform run - 打包应用并安装到设备运行。

插件使用者命令

weexpack plugin add/remove — 安装／移除 Weex 插件，支持从本地、GitHub 或者 Weex 应用市场安装插件。
weexpack plugin list — 查看已安装的插件及版本。

插件开发者命令

weexpack plugin create - 生成 Weex 插件模版，主要是配置文件和必需的目录。
weexpack plugin publish - 发布插件到 Weex 插件市场。

安装

环境要求：

目前支持 Mac、windows、linux 平台 ( windows 下仅能打包 android )。
配置 Node.js 环境，并且安装 npm 包管理器 (需要 node6.0+)

安装命令：

首先，全局安装weex-pack命令

$ npm install -g weexpack

打包及插件使用

打包主要过程如下图所示，其中插件操作是打包过程的可选项，不是必须的。

1. 创建weexpack工程

$ weexpack create appName

生成工程的目录如下：

WeexProject├── README.md├── android.config.json├── config.xml├── hooks│   └── README.md├── ios.config.json├── package.json├── platforms     // 平台模版目录├── plugins       // 插件下载目录│   └── README.md├── src           // 业务代码（we文件）目录│   └── index.we├── start├── start.bat├── tools│   └── webpack.config.plugin.js├── web│   ├── index.html│   ├── index.js│   └── js│       └── init.js└── webpack.config.js

通过 create 命令创建的工程默认不包含 iOS 和 Android 工程模版，创建完成之后就可以切换到 appName 目录下并安装依赖

$ cd appName && npm install

2. 安装 Weex 应用模版

添加应用模版，官方提供的模版默认支持 Weex bundle 调试和插件机制，注意模版名称均为小写，模版被安装到 platforms 目录下。

android 模板

$ weexpack platform add android

ios模板

$ weexpack platform add ios

Android平台 platform目录

platforms└── android    ├── LICENSE    ├── NOTICE    ├── README.md    ├── app    │   ├── build    │   ├── build.gradle    │   ├── proguard-rules.pro    │   └── src    ├── appframework    │   ├── build    │   ├── build.gradle    │   ├── proguard-rules.pro    │   └── src    ├── build    │   └── generated    ├── build.gradle    ├── codeStyleSettings.xml    ├── gradle    │   └── wrapper    ├── gradle.properties    ├── gradlew    ├── gradlew.bat    ├── settings.gradle    └── weexplugin        ├── build.gradle        ├── proguard-rules.pro        └── src

ios平台 platform

platforms   └── ios       ├── LICENSE       ├── Podfile       ├── README.md       ├── WeexDemo       │   ├── AppDelegate.h       │   ├── AppDelegate.m       │   ├── Assets.xcassets       │   ├── DemoDefine.h       │   ├── Images.xcassets       │   ├── WeexConfig       │   ├── WeexDemo-Info.plist       │   ├── WeexScanner       │   ├── config.xml       │   ├── main.m       │   └── weex-icon.png       ├── WeexDemo.xcodeproj       │   ├── project.pbxproj       │   ├── project.xcworkspace       │   ├── xcshareddata       │   └── xcuserdata       ├── WeexDemo.xcworkspace       │   ├── contents.xcworkspacedata       │   ├── xcshareddata       │   └── xcuserdata       ├── WeexDemoTests       │   ├── Info.plist       │   └── WeexDemoTests.m       ├── WeexUITestDemo-Info.plist       ├── WeexUITestDemoUITests       │   ├── Info.plist       │   └── WeexUITestDemoUITests.m       ├── Weexplugin       │   ├── Podfile       │   ├── Weexplugin       │   ├── Weexplugin.podspec       │   ├── Weexplugin.xcodeproj       │   └── WeexpluginTests       ├── bundlejs

安装weex插件

本地添加

$ weexpack plugin add path/to/plugin

插件市场添加

$ weexpack plugin add weex-chart

查看已添加插件

$ weexpack plugin list

删除插件

weexpack plugin remove weex-chart

打包并运行

$ weexpack run android

---

插件开发

//todo