weex 项目结构解析

来源:互联网 发布:营改增晨曦预算软件 编辑:程序博客网 时间:2024/05/16 17:44

weex 是一个比较新的东西,虽然离宣布开源也已经有一年多的时间了
那么我们看看它的工具吧,因为看到社区很多初看这个框架的有很多疑问,所以写出来
官网上介绍的有 weex-toolkit
weex-toolkit 创建一个项目

 $ weex init awesome-project

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 包,其实做过原生开发的朋友来说,很简单,但是没有做过的朋友会很迷茫,但是这个是都需要花一些时间去了解学习的

集成devtools
Android
请参考文档 Weex devtools (Android), https://weex.apache.org/cn/references/advanced/integrate-devtool-to-android.html 其中有详细说明。
IOS
请参考文档 Weex devtools (iOS), https://weex.apache.org/cn/references/advanced/integrate-devtool-to-ios.html其中有详细说明。

这两个集成好之后,我们去使用这个 js,放到我们的项目中去运行,就ok了,这时候就能看到了效果

ps,虽然有时候weexpack 可以直接生成一个项目,但是哪怕可以一键打包出来,包名应用名称,然后可能还会用到一些自定义的组件Module等等的很多东西,都会有可能需要修改,不需要很精通,但是最好要能略懂。所以一定不要偷懒,原生的一定要看看,否则你永远都用不了weex

原创粉丝点击