前端构建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
后续更新原理调研及搜集向文档。

你可能感兴趣的