欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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-toolkitweexpack 比较:

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 项目

$ 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