前端构建Weex 流程

weex初识

weex 具有很多优势。

• 一种代码 多端运行
• 减少包的大小
• 无痕改bug
• vue语法

weex弱势

• 官方文档坑
• 限制比较大

做为前端构建weex需要储备什么

• 安卓环境搭建
• XCode安装 了解CocoaPods。

weex环境搭建

web相关

node环境 npm包管理 weex-toolkit weex脚手架 安装成功后直接weex 会看到help

• node
• npm
• cnpm install -g weex-toolkit
• cnpm install webpack -g

安卓相关

只有一个注意点 耐心。 会下载超多依赖

• 下载java sdk
• 配置sdk
• 下载AndroidStudio ,不推荐官方下载
• 配置AndroidStudio
• 第一次打开AndroidStudio巨慢解决方法，见附件

weex项目搭建

node 相关搭建

weex create 搭建一个含有三端的应用。 weex init 搭建一个 vue项目。build生成js 直接导入安卓项目即可。

weex create HelloWeex
cd HelloWeex
cnpm install 
weex platform add android (还可以添加ios)
weex run android

• weex platform add android 运行了这句话后 项目会多一个android 这个文件就是之后安卓项目工程。

• 通过修改vue看不同内容。

• weex run android (可以用真机和模拟机 真机记得开发模式)

AndroidStudio中打开

一直下载依赖，直到没有error.打开慢的话可以看第一次打开AndroidStudio巨慢解决方法，见附件

• 点build->打包构建包

weex init awesome-project
之后我们进入项目所在路径，weex-toolkit 已经为我们生成了标准项目结构。

在 package.json 中，已经配置好了几个常用的 npm script，分别是：
build: 源码打包，生成 JS Bundle
dev: webpack watch 模式，方便开发
serve: 开启静态服务器
debug: 调试模式
我们先通过 npm install 安装项目依赖。之后运行 npm run dev 和 npm run serve 开启watch 模式和静态服务器。

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

端口冲突 直接更改端口即可

• build之后

• 安装包链接（jdk64windowgradle-3.4.1 gradle-2.14.1-all）
• 链接：http://pan.baidu.com/s/1o8LX3OQ 密码：ipfl

后续更新原理调研及搜集向文档。