weex 构建项目
程序员文章站
2024-03-15 23:30:12
...
前言
Weex 是一套简单易用的跨平台开发方案,能以 web 的开发体验构建高性能、可扩展的 native 应用,为了做到这些,Weex 与 Vue 合作,使用 Vue 作为上层框架,并遵循 W3C 标准实现了统一的 JSEngine 和 DOM API,这样一来,你甚至可以使用其他框架驱动 Weex,打造三端一致的 native 应用。
使用 weex-toolkit
weex-toolkit 是官方提供的一个脚手架命令行工具,你可以使用它进行 Weex 项目的创建,调试以及打包等功能。
weex-toolkit
和 weexpack
比较:
weex-toolkit 初始化的项目是针对开发单个 Weex 页面而设计的,也就是说这样的项目只包括单个页面开发需要的东西,比如前端页面源文件、webpack 配置、npm 脚本等。项目产生的输出就是一个 JS Bundle 文件,可以*的进行部署。
weex-pack 是初始化一个完整的 App 工程,包括 Android 和 iOS 的整个 App 起步,前端页面只是其中的一部分。这样的项目最终产出是一个 Android App 和一个 iOS App。
目前了解官网使用weex-toolkit,我也就使用weex-toolkit,目前weex-toolkit集成对weexpack的命令调用支持,所以,我们使用weex-toolkit命令来实现weexpack具备的功能。
安装
使用 npm 安装:
$ npm install -g weex-toolkit
安装成功后,你输入 weex 应该可以看到下面的提示效果:
初始化 weex 项目
$ weex init awesome-project
执行完命令后,在 awesome-project 目录中就创建了一个使用 Weex 和 Vue 的模板项目。
然后我们进入项目所在路径,weex-toolkit 已经为我们生成了标准项目结构。
安装项目依赖
npm install
实时预览
weex-toolkit 支持预览你当前开发的weex页面(.we或者.vue),你只需要指定预览的文件路径即可:
$ weex src/App.vue
浏览器会自动弹出页面,这个时候你可以看到你所编辑的 Weex页面的具体效果和页面布局。
下载官网提供的Playground, 扫描右边的二维码,就能够看到 Weex 在 Android/IOS 设备上的效果了。
如果你需要预览整个项目目录,你可以输入这样的命令:
$ weex src --entry src/App.vue
编译前端代码
$ npm run dev
打包Android端
使用weex-toolkit
$ weex platform add android
打包IOS端
使用weex-toolkit
$ weex platform add ios