美文网首页
Weex环境搭建和初始化

Weex环境搭建和初始化

作者: 进阶的蚊子 | 来源:发表于2018-09-05 11:00 被阅读14次

    weex 是阿里推出的一个开发框架,我的理解就是为了达到写一份代码可以同时在移动端(Android端、iOS端),Web端 同时运行的目的而开发的一系列系统或者提出了解决方案。这个系统方案包含各种native sdk、weex项目、构建工具、调试工具、文档等等。
    学习之前首先要有 Html、Css和Js的简单基础。这个基础可以仅知道各自概念、基本语法、基础页面绘制怎么写就够了。
    首先我们搭建mac下的Weex 环境.

    一.安装nodejs
    1先安装brew

    /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
    
    

    查看brew信息
    安装完成后可以查看版本信息

    brew --version
    
    brew版本.png
     brew install node
    

    安装node后查看node 和npm版本信息

     node -v
                       v10.4.1
     npm -v
                       6.1.0
    
    

    二.安装weex

    npm install -g weex-toolkit
    

    成功后查看

    
    weex --version
    
    
       v1.0.4
     - weex-builder : v0.2.12
     - weex-previewer : v1.5.1
     - weexpack : v1.2.5
    
    

    这样我们的环境就搭建好了,下面开始初始化项目.

    三.项目搭建

    创建的方式主要有2种 weexpack 和weex-toolkit
    1 weexpack    方式  
     weex create  projectName
     npm install
    
    weex-toolkit 方式  
     weex init projectName    
    npm install
    

    使用weexpack 创建,可以创建三个端的,也可以用来打包
    先cd 到木文件夹,我自己单独建立了个文件夹叫weex,这个看官自己自定义哈.
    我创建的项目名叫TestDemo

     weex create Testdemo
    

    这个运行时间有点长,中间有多次选择,自己看着选


    项目创建.png

    完成后weex文件下下回多出来很多文件


    项目文件预览1.png

    project 创建成功后我们发现 platforms 是空的
    先cd到project的目录通过如下命令添加iOS 和android

    weexpack platform add ios
    weexpack platform add android
    
    48BEBABC-5C76-4DFC-9060-96851F9FF3F9.png

    文件夹下多了android 和ios的两个工程项目


    DF8D7A8E-AC4F-44F2-8EE4-EA72D78095BB.png

    打开ios目录的下的workplace 结果如下


    B34E7036-DA0A-47CF-994D-F68D0A93BE28.png

    运行 并不成果,why?注意到红色箭头没 Pods是红色的!
    WeexSDKManager.m中会报这个错误,找不到文件

    import <WeexSDK/WeexSDK.h>

    另外我们发现 ios下的Podfile 是黑色的,不能直接打开
    肿么办?
    猜测问题在Podfile ,先cd 到 Podfile,用vim 打开Podfile

    vim Podfile
    

    结果如下

    platform :ios, '8.0'
    #inhibit_all_warnings!
    
    def common
            pod 'WeexSDK'
        pod 'WeexPluginLoader'
        pod 'SDWebImage', '3.7.5'
        pod 'SocketRocket', '0.4.2'
    end
    
    target 'WeexDemo' do
        common
    end
    
    target 'WeexUITestDemo' do
        common
    end
    
    

    podfile 内容没问题 ,应该是需要我们自己重新cocoasPods安一次,不会cocoasPods请去百度,这里不介绍!
    输入pod install
    结果如下

    [hongxin:ios hongxin$ pod install
    Analyzing dependencies
    Downloading dependencies
    Installing SDWebImage (3.7.5)
    Installing SocketRocket (0.4.2)
    Installing WeexPluginLoader (0.0.1.9.1)
    Installing WeexSDK (0.18.0)
    Generating Pods project
    Integrating client project
    Sending stats
    Pod installation complete! There are 4 dependencies from the Podfile and 4 total pods installed.
    hongxin:ios hongxin$ 
    

    完成后回到文件夹,发现Podfile.lock , 编译工程,完美!


    7406B976-3B31-4F16-971A-B2A4E0AFB624.png 可以编译成功,但是真机运行暂时会报错误,楼主还在继续研究中,如果有小伙伴知道原因,烦请告知! 52A1A296-E096-4601-82FE-07CD3F604167.png

    -------------------------华丽的分割线--------------------

    紧接上次,could not write to the device这个错误很多情况是因为bundle id的问题 试着修改了bundle id为其它的 ,运行 完美!


    70B4C8F4B23D64B80CDA74AE9581C1FA.png

    weex 学习研究中未完待续!

    相关文章

      网友评论

          本文标题:Weex环境搭建和初始化

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