weex-toolkit 初始化的项目是针对开发单个 Weex 页面而设计的,
也就是说这样的项目只包括单个页面开发需要的东西,
比如前端页面源文件、webpack 配置、npm 脚本等。
项目产生的输出就是一个 JS Bundle 文件,可以自由的进行部署。
weex-pack 是初始化一个完整的 App 工程,
包括 Android 和 iOS 的整个 App 起步,前端页面只是其中的一部分。
这样的项目最终产出是一个 Android App 和一个 iOS App。
weex-pack 的进度稍慢
两者其实是有区别的。
weex-toolkit 创建一个项目
1 |
|
weex 官网说 :
weex-toolkit 对 weexpack 的水平扩展
weexpack 是基于 Weex 快速搭建应用原型的利器。它能够帮助开发者通过命令行创建 Weex 工程,添加相应平台的 Weex app 模版,并基于模版从本地,GitHub 或者 Weex 应用市场安装插件,快速打包 Weex 应用并安装到手机运行,对于具有分享精神的开发者而言还能够创建 Weex 插件模版并发布插件到 Weex 应用市场。
现在使用 weex-toolkit 同样支持对 weexpack 的命令调用,如果你当前的项目与 weexpack 生成的项目目录一致,那么你可以直接实现对于 platform 的操作,从而构建具体的 Android/IOS app
$ weex platform add ios
然而实际上测试 发现这两个工具是无法平行使用的,使用weex-toolkit 创建的项目无法使用weexpack 的命令来添加 android 或者ios 平台,而且我的两个包都已经升级到了最新版本
很多朋友就卡在了这一步上,不得前进,其实这一步只是刚刚开始可以运行一个demo,实际上我们并没有必要去添加删除一个 平台代码,首先我们知道
$ weex platform add ios
这个命令它做了哪些工作,我们手动做一下就完成了
实际上
weex init awesome-project 这个命令完成以后 ,我们就创建了一个基于node 的一个weex 的前端的项目,这个项目的目的是把那些 vue 文件编译成js,可以参考前面文章,将里面的代码编译一下之后(npm run dev) 发现在 dist 文件里面就生成了两个对应的js,一个 index.web.js 一个index.weex.js 这两个js 一个是给网页端使用的,一个是给app使用的
那么到这里,也可以使用 playground 来扫码获取那个js看到效果了,具体参考weex的第二篇博客,那么很多朋友说希望能看到真正的项目里面来展示这个 js,而不是在playground 里面
那么此处你需要分别搭建一下你的开发环境,开发环境搭建好之后配置weex 包,其实做过原生开发的朋友来说,很简单,但是没有做过的朋友会很迷茫,但是这个是都需要花一些时间去了解学习的
这两个集成好之后,我们去使用这个 js,放到我们的项目中去运行,就ok了,这时候就能看到了效果