美文网首页Weex
Weex项目的创建

Weex项目的创建

作者: 夜3033 | 来源:发表于2018-05-09 14:59 被阅读36次

Weex环境创建

可以根据Weex官方文档的教程进行操作
官网教程

具体的创建步骤如下:

1. 先检查是否安装node 与npm
2. 替换镜像源
3. 安装 weex-toolkit

如下图:

  • 01.png

    之后进行项目的创建

4. weex create myweex-project
02.png

如上图,在第二个红色框中,可以先不进行npm install的安装 自行进行 cnpm install的安装 提高速度,以免卡死到这个地方(😁)。

5. 创建项目完成之后进入到目录下 cnpm install
03.png
6. npm run serve

这个时候并不会打开自动打开浏览器 看到相关的界面 ,我们可以看到项目的整体架构如下


04.png
7.然后在 设置 autoOpenBrowser: true
05.png

autoOpenBrowser: true表示着,可以自动打开浏览器中的本地服务的界面, 到此我们可以简单的看到Weex项目了


打开本地

创建Weex平台下的iOS项目

下面开始基于weex创建iOS的项目(为啥不给我大iOS单列一个目录介绍安装iOS😋)

8. npm install -g weexpack

安装iOS项目

9.weexpack platform add ios

在项目的platforms文件夹下可以看到iOS的文件夹 这个就是我们需要的iOS项目,在命令行中cd到这个目录下 pod install 重新安装下cocopods(确保你电脑配置了cocopods环境)

06.png

现在我们就可以看到新的iOS项目了


07.png

在WXImgLoaderDefaultImpl.m中已经初步设置了图片的加载处理方式我们可以根据自己的需要进一步的对它进行扩展和优化。
整体项目与一般iOS一样 在appdelegate中设置项目的入口 然后启动weex 进行WeexSDKManager的加载,并在WeexSDKManager中进行组件的注册等操作。
在新创建的项目中,默认加载的是resource/bundlejs/index.js中的数据

后记

这样我们就创建了一个基于Weex框架的iOS项目,具体的加载流程和组件的扩展可以暂时先看
Weex在iOS端的加载流程与一些问题
后续争取更新更多的Weex相关的文章😁

相关文章

  • Weex项目的创建

    可以根据Weex官方文档的教程进行操作:官网教程 先安装node.js: 在 Node.js 官网 下载可执行程序...

  • Weex项目的创建

    Weex环境创建 可以根据Weex官方文档的教程进行操作官网教程 具体的创建步骤如下: 1. 先检查是否安装nod...

  • weex命令

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

  • Swift 中的 weex

    weex ios 集成参阅:Weex学习与实践:iOS原理篇 swift集成weex 首先将weexsdk集成到项...

  • Weex入门(3)创建

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

  • VS Code解除格式警告

    警告来源 在我们创建vue项目的时候,例如weex项目是,会提示我们是否使用严格模式ESLint,一旦我们选择使用...

  • 🐱[Weex] 一、Weex项目的搭建

    【前言】 本节主要介绍如何快速的创建一个名为"helloweex"的Weex工程。 1. 首先选择要创建工程到哪个...

  • weex开发过程遇到的各种坑

    无法 pod update 当我们完成了项目的创建 运行weex run ios想在模拟器上看一下发现报这个错,原...

  • Weex之helloworld

    1.创建weex工程搭建好环境以后,进入命令行创建weex工程 后面会紧跟一系列的要你确认的步骤,比如工程名,作者...

  • vue-weex 仿穷游APP

    代码 GITHUB 目的 体验weex开发效果,与RN,Flutter 做纵向对比。 目前weex已经由阿里捐赠给...

网友评论

    本文标题:Weex项目的创建

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