weex的简单使用

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

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

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

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

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

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

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

    除此之外我相信大多数搞技术的都会通过集成它的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的了,别忘了要把手机的开发者模式打开,还要关闭手机的一些偏好设置,比如说仅限于官方应用商店程序。

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

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

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

    这里面通过简单实际的例子教给我们怎样使用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真正开源后所带给我们的一切吧!

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

推荐阅读更多精彩内容