创建WEEX项目
先cd到目标文件夹下
$ weex create helloweex ,创建过程中,会要求填写一堆信息(如果你创建没出现,不要得意,可能你这个环境安装就有问题,webpack版本过低?)
此时在目标文件夹下生成了一个helloweex文件夹开发WEEX项目
先、我们站在三端的高度看世界,可能会迷茫,到底应该在哪里开发?
我们就很开心的遇到了这样的情况,环境什么都配置好了,硬是不知道需要在哪里开,然后就对着Weex项目混乱地研究了几天。
请看上页项目结构截屏,对于初级菜鸟的我们,只需要关注src文件夹、platforms文件夹可能根本不需要(如果你已经有了对应的SDK代码),dist文件夹不需要我们去特别关注,因为它是通过src而来的,三端中使用的就是dist文件夹下相关js文件。我们是使用sublime来进行weex项目编写
如果需要关注platforms文件夹状态
默认情况下 weex create 命令并不初始化iOS 和Android 项目,你可以通过执行 weex platform add 来添加特定平台的项目。
weex platform add ios //生成ios项目
weex platform add android
由于网络环境的不同,安装过程可能需要一些时间,请耐心等待。如果安装失败,请确保自己的网络环境畅通。
不建议使用
weex run ios
weex run android
weex run web
这几个命令在模拟器上启动,因为体验下来真的很差,你如果是这几端的开发人员,相信有你已经习惯的方式去启动的
现在是不是大概清楚点?对、编写代码的时候,只要在src文件夹下去编写。
在 package.json 中,已经配置好了几个常用的npm script,分别是:
build:源码打包,生成JS Bundle
dev: webpack watch 模式,方便开发
serve:开启HotReload服务器,代码改动的将会实时同步到网页中
我们先通过 npm install 安装项目依赖。之后运行项目根目录下的 npm run dev & npm run serve开启watch 模式和静态服务器。也可以尝试使用npm start启动
当浏览器自动打开weex h5页面后,每次修改了代码,只要点击保存或快捷键,界面会自动更新,我们可以马上看到更新后结果
代码如下所示:
网友评论