美文网首页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项目的创建

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