Weex环境搭建和初始化

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

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


Weex环境搭建和初始化_第1张图片
项目创建.png

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


Weex环境搭建和初始化_第2张图片
项目文件预览1.png

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

weexpack platform add ios
weexpack platform add android
Weex环境搭建和初始化_第3张图片
48BEBABC-5C76-4DFC-9060-96851F9FF3F9.png

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


Weex环境搭建和初始化_第4张图片
DF8D7A8E-AC4F-44F2-8EE4-EA72D78095BB.png

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


Weex环境搭建和初始化_第5张图片
B34E7036-DA0A-47CF-994D-F68D0A93BE28.png

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

import

另外我们发现 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 , 编译工程,完美!


Weex环境搭建和初始化_第6张图片
7406B976-3B31-4F16-971A-B2A4E0AFB624.png

可以编译成功,但是真机运行暂时会报错误,楼主还在继续研究中,如果有小伙伴知道原因,烦请告知!
Weex环境搭建和初始化_第7张图片
52A1A296-E096-4601-82FE-07CD3F604167.png

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

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


Weex环境搭建和初始化_第8张图片
70B4C8F4B23D64B80CDA74AE9581C1FA.png

weex 学习研究中未完待续!

你可能感兴趣的:(Weex环境搭建和初始化)