Weex系列一、构建Weex的工程

Weex比React Native更简单,更容易学习,并且做到真正的跨平台,一套代码可以多个平台运行。所以建议大家都用Weex吧。我们主要讲的是Weex在iOS项目中的应用。

一、安装Node

已经安装Node的,请忽略过去。

检查Node是否安装的命令:

$ node -v

v7.3.0

大家可以看阿里团队的博文,我这里也说下。

1、要先安装Node。在Mac我是用Homebrew来安装的。

安装命令: brew install node

2、接着我们需要安装Weex CLI。

终端中执行: sudo npm install -g weex-toolkit  

3、npm 是 Node 的模块管理器,执行install因为连的是国外的服务器,事件可能会很慢。如果大家运行上面的语句很慢 可以按下面的来做,如果大家已经翻墙,就不用按下面的来了。

3.1、删除代理设置:

#npm config delete proxy

#npm config delete https-proxy

然后 终端执行:

npm --registry https://registry.npm.taobao.org info underscore 

也可以用下面2种方法:

3.2、终端执行:

npm config set registry https://registry.npm.taobao.org npm info underscore 

如果上面配置正确这个命令会有字符串response

3.3:编辑 ~/.npmrc 加入下面内容,将配置写死,下次用的时候配置还在registry = https://registry.npm.taobao.org

4、如果安装中遇到下面的警报,可以忽略,不用管,也可以运行命令来修正。

4.1、安装的时候报警报:npm warn deprecated lodash@2.4.2: lodash@<3.0.0,

可以执行下面2句命令行即可:

npm uninstall lodash

npm install lodash@latestnpm cache clean

4.2、如果报错:npm ERR! tar.unpack untar error ,可以执行下面命令:sudo  npm cache clean


二、引入SDK

1、我们新建一个项目:WeexDemo。

2、从github下载Weex项目后,然后将ios/sdk 文件夹复制到根目录,并新建一个Podfile文件,文件内容为:

source 'https://github.com/CocoaPods/Specs.git'

platform :ios, '7.0'

#inhibit_all_warnings!

def common

pod 'WeexSDK', :path=>'./sdk/'

end

target 'WeexDemo' do

common

end

3、命令行cd到根目录,然后执行pod install --verbose --no-repo-update

如图:


三、写代码

我们用最简单的方式来先把代码写出来。

首先我们先做个简单的Demo。已经放到github上了。大家可以下载看看,我们下面讲的就是这个Demo的代码。

1、新建一个项目,初始化SDK。

在AppDelegate文件里的didFinishLaunchingWithOptions方法里 初始化Weex的SDK。如图:

初始化Weex的SDK

上图中,我们先配置了一些信息,也可以不配置。直接 初始化SDK:

[WXSDKEngine initSDKEnvironment];

其中 打印类型 我们设置的为WXLogLevelAll。 该枚举的全部类型为:

WXLogLevel枚举

初始化SDK后,需要调用registerModule方法 注册我们自己写的WXEventModule。Module可以让JS主动调用原生iOS代码。

registerModule我们后面再讲,我们可以先把registerModule这句 给注释掉。先看VC如何加载js 来实现一个页面的。

2、VC页面设置。

我们在ViewController页面 先写个原生的按钮,然后 用指定的 URL 渲染 weex 的 view,把该view添加到VC的view上。

self.view上加上一个原生的UIButton。用render方法来初始化JS的页面。

我们在viewDidLoad里读取了一个helloWeex.js的文件路径,下面我们会讲 这个js是怎么创建生成的。现在大家就当已经创建好了。

addTestBtn方法是用来创建原生UIButton的。

3、加载JS文件显示页面

我们先初始化WXSDKInstance,WXSDKInstance可以通过renderWithURL方法根据传入的js来创建相关的UIView,它有一些回调方法:

onCreate:根视图rootView创建的时候

onFailed:处理失败后

renderFinish:视图渲染完成

componentForRef:通过视图索引拿到对应的组件视图

我们在onCreate 的block中将WXSDKInstance生成好的UIView add到self.view上。

4、上面代码运行的效果如下:

四、前端页面

Sublime 可以设置weex高亮。大家可以点击去看下。

我们来看下 上面说的js文件 是怎么创建生成的。

我们新建一个helloWeex.we的文件。如图:

helloWeex.we

1、代码分析

上文中的template模板中默认建了一个显示文字为“Hello Weex” 的text。其中class="title",也就是样式为title。onclick="onClickTitle":也就是 点击该文本会调用onClickTitle的js方法。

然后下面设置了title的样式:.title { color: red; }  。所以字体会显示红色。

最下面设置了onClickTitle的js方法。所以当你点击文本的时候 会在控制台打印日志,但是alert方法在iOS中没有执行,这个我们后面再说。 

2、浏览器运行效果

在终端 cd到改文件所在的目录,然后执行: weex helloWeex.we   。

会自动打开浏览器:http://127.0.0.1:8081/weex_tmp/h5_render/?hot-reload_controller&page=helloWeex.js&loader=xhr

点击该文本,会提示相关文字:

3、生成js文件

然后再终端执行: 

weex helloWeex.we -o helloWeex.js

会生成 js文件,我们把这个js文件拖到项目中。目录如下:

WeexDemo项目文件


4、WeexPlayground扫描

如果你想不想引入到自己项目中,而是想直接在手机上看上面helloWeex.we的效果。可以从AppStore下载WeexPlayground,然后 在终端中输入: weex helloWeex.we --qr  。

终端会生成一个二维码(如下图),然后用WeexPlayground 这个APP扫描这个二维码 即可。

github的地址为:https://github.com/bugaoshuni/WeexDemo.git

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,711评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,932评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,770评论 0 330
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,799评论 1 271
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,697评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,069评论 1 276
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,535评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,200评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,353评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,290评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,331评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,020评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,610评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,694评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,927评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,330评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,904评论 2 341

推荐阅读更多精彩内容

  • 这是weex刚开始内测那几天写的,写完之后放在一边就忘记了,今天突然看到就把它放到了网上,希望对大家有点儿用处...
    蓝心儿的蓝色之旅阅读 31,504评论 14 16
  • 引子 这篇文章是笔者近期关于Weex在iOS端的一些研究和实践心得,和大家一起分享分享,也算是对学习成果的总结。文...
    一缕殇流化隐半边冰霜阅读 12,022评论 53 165
  • 前言 随着移动端发展进入白热化阶段,很多中小型公司越来越注重于APP的更新迭代速度。加上去年微信小程序的问世,前端...
    LeonLei阅读 1,038评论 0 15
  • 前言 之前的几个月里,已经狠狠地体验了一把React-Native,享受着React-Native带来的快捷,也承...
    Daniel_颜世玉阅读 938评论 5 8
  • 2007年11月29日。北京。初雪。 辞掉工作以后,我就完全没有了时间概念。每一天可以概括为,上午,下午,傍晚,晚...
    亦舟yj阅读 436评论 0 0