Weex系列一、构建Weex工程

Weex比React Native更简单,更容易学习,并且做到真正的跨平台,一套代码可以多个平台运行。所以建议大家都用Weex吧。

一、安装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因为连的是国外的服务器,事件可能会很慢。如果大家运行上面的语句很慢 可以按下面的来做,如果大家已经FQ,就不用按下面的来了。

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 [email protected]: [email protected]<3.0.0,

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

npm uninstall lodash

npm install [email protected] 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扫描这个二维码 即可。

时间: 2024-08-02 07:44:57

Weex系列一、构建Weex工程的相关文章

eclipse+maven+tomcat构建web工程

我们要利用Maven构建一个web应用,开发环境为eclipse+tomcat.构建过程如下: 1.工具准备 eclipse:版本为eclipse 4.2(Juno Service),maven插件的安装与配置参见"m2eclipse安装与配置" tomcat:版本为apache-tomcat-6.0.37(即tomcat6.x系列,本文安装在D:\work\tomcat6\apache-tomcat-6.0.37-maven) 2.建立web应用 我们使用eclipse建立maven

使用BLADE构建c++工程管理

使用BLADE构建c++工程管理 字数764 阅读2753 评论2 喜欢4 一. c++工程依赖管理 之前在百度一直使用comake2构建c++项目,十分方便.免去了手写Makefile的痛苦,很多项目都不需要从零开始,其中的一个配置类似如下: WORKROOT('../../../')CopyUsingHardLink(True)CPPFLAGS('-D_GNU_SOURCE -D__STDC_LIMIT_MACROS -DVERSION=\\"1.9.8.7\\"')CFLAGS(

Open-E DSS V7 应用系列之五 构建软件NAS

续Open-E DSS V7 应用系列之四 构建软件RAID Open-E DSS V7是一套免费的NAS服务器软件,它能将一台普通PC变成网络存储服务器服务器.用户可通过Windows.Macs.FTP.SSH 及网络文件系统 (NFS) 来访问存储服务器.它是组建简单网络存储服务器的很好选择. 一.环境准备 1.在DSS01主机上新增了一块物理硬盘(为了保持操作思想清晰,笔者将首次安装并进行了基本设置的主机状态生产了初始快照,每次在熟悉新的操作之前,先将DSS主机恢复到初始快照状态) 2.新

通过rebar构建erlang工程

1.创建一个项目文件夹: mkdir myapp cd myapp 2.下载rebar的二进制文件到这个项目的文件夹. git clone https://github.com/basho/rebar.git; 3.使用rebar模板系统构建我们工程的“骨架”. rebar creat-app appid=myapp 这条命令执行后会在项目文件中产生一个子文件夹“src”,其包含三个文件: myapp.app.src:otp应用程序的资源文件 myapp_app.erl:一个OTP应用程序的Ap

使用Gradle构建Android工程

Gradle是以Groovy语言为基础,基于DSL语法的构建工具,它通过插件的方式定制工程构建过程.Google开发了Android Gradle插件,使用Gradle构建Android工程. Gradle构建Android工程,我们可以在Android studio中使用,也可以在命令行中使用,也可以集成到持久化集成工具中. Gradle构建Android工程的配置文件名是build.gradle,存放在工程的根目录下. 一个Android工程(Project)是由一个或多个组件(Module

Open-E DSS V7 应用系列之六 构建软件iSCSI

续Open-E DSS V7 应用系列之五 构建软件NAS 一.iSCSI简介 iSCSI(internet SCSI)技术由IBM公司研究开发,是一个供硬件设备使用的.可以在IP协议的上层运行的SCSI指令集,这种指令集合可以实现在IP网络上运行SCSI协议,使其能够在诸如高速千兆以太网上进行路由选择.iSCSI技术是一种新储存技术,该技术是将现有SCSI接口与以太网络(Ethernet)技术结合,使服务器可与使用IP网络的储存装置互相交换资料. iSCSI是一种基于TCP/IP 的协议,用来

[预告]SI 系列入门 之 手把手构建 Spring-MyBatis 工程

本周末 2014-11-30 再利用业务时间继续研究  MyBatis 及  Spring-MyBatis 最简化的 MySql 数据库操作,以及使用 MyBatis Generator 从数据库中自动生成 Java Model.Mapper 等代码,尚不知 Service 是否能自动生成,生成的接口是否以 I 开头. 敬请期待!

Weex系列-入门2

原文地址:https://www.cnblogs.com/hacjy/p/8136307.html

Maven构建Hadoop Maven构建Hadoop工程

一.安装maven linux eclipse3.6.1 maven安装 二:官网依赖库 我们可以直接去官网查找我们需要的依赖包的配置pom,然后加到项目中. 官网地址:http://mvnrepository.com/ 三:Hadoop依赖 我们需要哪些Hadoop的jar包? 做一个简单的工程,可能需要以下几个 hadoop-common hadoop-hdfs hadoop-mapreduce-client-core hadoop-mapreduce-client-jobclient ha