美文网首页
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)创建

    创建WEEX项目 先cd到目标文件夹下 $ weex create helloweex,创建过程中,会要求填写一堆...

  • 笔记

    【入门】WEEX快速创建工程 Hello World - willspace - SegmentFault ht...

  • (26)打鸡儿教你Vue.js

    weex框架的使用 1、weex开发入门2、weex开发环境搭建3、掌握部分weex组件模块4、了解一些vue基本...

  • 将week集成到ios中

    Weex的入门swift 中的weex 1、新建项目 1、命令行cd到项目根目录 执行 pod init,会创建一...

  • weex页面跳转方案

    针对初入门weex的小白,详细的介绍如何创建项目,如何实现页面跳转。还有附赠源码,喜欢的点个赞吧。 先参考weex...

  • weex命令

    1,创建weex项目脚手架 weex create— 创建 weex 工程项目 2,增加/删除平台 weex pl...

  • Weex入门踩坑记录

    Weex入门踩坑记录

  • [个人记录]Weex入坑

    Weex入门 官方文档 文档iOS集成 开发环境配置 安装node 安装weex开发工具 验证 weex-tool...

  • Weex从入门到放弃

    Weex从入门到放弃 大纲 Hello World Weex基本控件listimageslidexxx Vue2....

  • 【水文】从404看巨头阿里的情怀

    【标题正解】weex-vue-render/index.js(404 Not Found) 许多朋友入门WEEX时...

网友评论

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

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