介绍
Weex 致力于使开发者能基于通用跨平台的 Web 开发语言和开发经验,来构建 Android、iOS 和 Web 应用。简单来说,在集成了 WeexSDK 之后,你可以使用 JavaScript 语言和前端开发经验来开发移动应用。Weex 渲染引擎与 DSL 语法层是分开的,Weex 并不强依赖任何特定的前端框架。
关键词
node.js:一个基于 chrome v8 引擎构建的一个 javascript 的运行时环境(runtime),类似 java 运行在 Windows 上运行时环境。
npm:npm 是 JavaScript 世界的包管理工具,并且是 Node.js 平台的默认包管理工具,类似 Linux 的 apt-get。
webpack: 一个现代 JavaScript 应用程序的静态模块打包器( module bundler ),类似 Android 开发上面的 gradle 。
weex-toolkit:脚手架工具来辅助开发和调试,通过 npm 来安装。
vue: 一个构建数据驱动的 web 界面的渐进式框架,类似 Android 语言开发。
weex:通用跨平台的 Web 开发语言和开发经验,来构建 Android、iOS 和 Web 应用。
Babel:一个 JavaScript 编译器 。
安装weex步骤
1、node.js 安装
安装 Node.js 方式多种多样,最简单的方式是在 Node.js 官网 下载可执行程序直接安装即可。
$ node -v //验证 node.js 安装完成
v11.14.0
2、npm 安装
通常安装了 Node.js 环境,npm 包管理工具也随之安装了。
$ npm -v //验证 npm 安装完成
6.7.0
3、weex-toolkit 安装
通过 npm 安装 weex的脚手架工具。
$ npm install -g weex-toolkit //执行安装weex脚手架
$ weex -v //验证 weex-tookit 安装完成
2.0.0-beta.20 (Core 2.0.0-beta.18)
weex 项目创建
1、项目创建
$ weex create weex-app ·//创建一个weex 项目
2、依赖下载, 启动项目
$ cd weex-app //进入项目目录
$ npm install //通过apm安装项目依赖
$ npm start //启动一个本地的 web 服务,监听 8081 端口
3、项目访问
你可以打开 http://ip:8081 查看页面在 Web 下的渲染效果。
Your application is running here: http://ip:8081.
这样你的第一个weex 项目工程创建完成,且启动了一个web的本地服务
屏幕快照 2019-04-19 下午3.32.07.png
Weex工程结构
weex web结构:
├── android.config.json
├── configs // 工程编译 打包的配置和脚本目录
├── ios.config.json
├── node_modules // 依赖库目录
├── package.json // 依赖库,脚本命令及版本的配置文件
├── package-lock.json
├── platforms // 移动端模板工程目录
├── plugins
├── README.md
├── src // vue 页面的开发目录
├── test
├── web
└── webpack.config.js // webpack js 打包脚本,配置来之 configs配置脚本
移动端模板工程添加:
weex platform android // 生成 weex android 模板工程
weex platform ios // 生成 weex ios 模板工程
网友评论