美文网首页
Weex入门(3)创建

Weex入门(3)创建

作者: 大写的空气 | 来源:发表于2018-10-22 10:58 被阅读0次

    创建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页面后,每次修改了代码,只要点击保存或快捷键,界面会自动更新,我们可以马上看到更新后结果

    代码如下所示:

    相关文章

      网友评论

          本文标题:Weex入门(3)创建

          本文链接:https://www.haomeiwen.com/subject/daiwzftx.html