weex的简单使用

    这是weex刚开始内测那几天写的,写完之后放在一边就忘记了,今天突然看到就把它放到了网上,希望对大家有点儿用处。

    自从宣布阿里移动端跨平台开发框架Weex开始内测,并将于6月份开源,整个业界的热烈程度是可以看到的,想必这也是未来的一个趋势,动态性问题在今天的移动端显得尤其重要,也正符合我们公司的需求,因为我们公司每谈一个项目或者合作方搞一次活动,都是很急切的,我们技术这边的几方人马就要一起出动,不断的试错,不断的更新版本,而今天的weex恰恰很好的解决了这一问题,就不需要我们为这些动态性在多个端投入重复的精力,更不需要因此而频繁的触发新版本。

    我很荣幸可以有时间先来简单研究一下weex,今天分享给大家的也可以算作一个简单的教程吧,一些英语如果不是那么好并且没有很多时间看weex官网的朋友可以看一下我写的这个可能会有纰漏的东西,现在就开始我们的weex之旅吧!

    在拿到代码之前,你需要先在阿里的http://alibaba.github.io/weex/申请内侧,要填上你的gitHub账号,如下图

weex的简单使用_第1张图片

    提交后,等待审核,一般是第二天早晨就会给你回邮件,但是真正申请下来得几天。这时候你是不是着急看到weex项目呀,别着急,先让我们把目前给的安卓项目在手机上运行起来看看效果吧,点击最开始我给出网址首页右上角Download按钮,如图:

weex的简单使用_第2张图片

    点进去之后,通过给出的两种方法安装到手机上(目前只开放了安卓),如图:

weex的简单使用_第3张图片

    这样就可以在手机上看weex的一些简单demo所演示出来的样式了。如图:

weex的简单使用_第4张图片

    除此之外我相信大多数搞技术的都会通过集成它的sdk来运行这个weex项目,这就需要我们来配置weex的工作环境,下面由我亲自实践的来给大家介绍一下配置weex的工作环境以及在这个环境上运行weex(如果执行命令时有因权限问题而报错的,可以在命令前加上sudo):

1.安装Node.js,可以通过这个链接https://nodejs.org/en/下载安装包pkg,现在的最新版本是6.1.0,下载完安装包直接双击安装即可,完成后可以在终端通过$node--version命令查看版本,如果版本过低,想更新到最新版本,可以在终端先用$npminstall-g n命令,完成后再用$nstable命令,这样你的Node.js就变成了最新版本。

2.进入到weex-dev的根目录,用$npm install命令开始安装项目,这个过程可能时间会很长,安装完成之后执行$./start,这时会自动打开一个终端,之后显示一些执行过程,如果说/start报错,八成是node没有安装好。之后就是配置安卓环境,在这我就不详细介绍了,安装Android

Studio就行了,如果没有安装的可以通过http://developer.android.com/sdk/index.html这个链接下载安装。

3,下面就是Android

Studio发挥的时间了,启动Android Studio,然后打开weex-dev中的文件夹android中的playground,开始build,有些人可能bulid不成功,可以下一些代理配置一下,打开preference,搜索到HTTP Poroxy,在这里可以手动设置代理。如果在控制台有报错的地方可以根据它的提示安装一些要求安装的东西,比如说可能会让你安装android-tools等。编译成功后,还需要做的一步就是在app/java/com.alibaba.weex/WXMainActivity里把里面的CURRENT_IP改为自己当地的IP,可以如图所示:

weex的简单使用_第5张图片

接下来就是点击绿色三角运行按钮开始运行,找个安卓的手机就可以开始畅玩weex的了,别忘了要把手机的开发者模式打开,还要关闭手机的一些偏好设置,比如说仅限于官方应用商店程序。

等内测申请通过后,就可以登录你GitHub账号拿到weex这个framework了,如图:

weex的简单使用_第6张图片

在这个里面直接获取到weex项目 源码,然后根据下面的README.md开始weex之旅吧。

使用weex,先得简单对weex了解,如图:

weex的简单使用_第7张图片

    这里面通过简单实际的例子教给我们怎样使用weex,下面我们就来简单的看一下吧!

    相信来研究weex的人都会对html有一些了解,可以看懂文档中给出的例子,但是weex得语法也有待研究一下。可以先把给出的代码粘贴到weex-dev目录中的一个.we文件中,比如说复制到tech_list.we文件中,前面已经说过安装Node的过程,现在就不再赘述,直接在终端执行$npm install -g weex-toolkit来安装Weex CLI程序,如果想检测是否正确安装,可以在终端执行$weex来查看,会看到如下:

Usage: weexfoo/bar/your_next_best_weex_script_file.we[options]

Options:

--qrdisplay QR code for native runtime[boolean]

-otransform weex JS bundle only, specifybundle file name using the

option[default: "noJSBundle output"]

-sstart a http file server, weex .we file will be transformed onthe

server, specify localroot path using the option[default:false]

--helpShow help[boolean]

    如果正确安装,就可以cd到放你刚才代码的文件所在的文件夹目录下,然后执行weex tech_list.we,由于weex h5还没开放,现在执行这个命令后在终端会出现一个二维码,二维码里其实是一段Js代码,有着把代码转换成组件的作用,这时候打开手机上运行的安卓项目里扫描处,就可以通过扫描看到列表在手机上呈现,这时候你再修改代码,保存之后就可以看到代码效果在手机上实时更新了,这样就真正实现了动态改变页面而不用频繁更新版本,客户端也不用总下载和更新新的版本,这必定是未来移动端开发的一个趋势!

    Weex的简单流程就是:你写好了.wew文件之后,只需要./start, 然后week会执行week- transformer模块进行转译,然后将转译好的文件存放在examles文件夹下的build文件夹里 ,你的activit去请求examles/build/*.js 就可以了,剩下了就是App里weex的Sdk的活了。

    由于还在内测阶段,好多东西我们也没办法下结论,但是本人对weex有很高的期待。现在能做的也就是这些,我觉得最重要的是多研究weex文档以及代码的实现,让我们敬请期待weex真正开源后所带给我们的一切吧!

你可能感兴趣的:(weex的简单使用)