初涉weex
weex能用把简单的js和h5代码转换成原生的ios和android,想想都可怕
首先你应该已经安装了node,并且最好换了源。
安装weex工具
sudo cnpm install -g weex-toolkit
这样你就能用weex的命令了
写一个test.we的文件,类似下面这样
<template>
<div class="container">
<div class="cell">
<image class="thumb" src="http://t.cn/RGE3AJt"></image>
<text class="title">JavaScript</text>
</div>
<div class="cell">
<image class="thumb" src="http://t.cn/RGE3uo9"></image>
<text class="title">Java</text>
</div>
<div class="cell">
<image class="thumb" src="http://t.cn/RGE31hq"></image>
<text class="title">Objective C</text>
</div>
</div>
</template>
<style>
.cell{ margin-top:10 ; margin-left:10 ; flex-direction: row; }
.thumb { width: 200; height: 200; }
.title { text-align: center ; flex: 1; color: grey; font-size: 50; }
</style>
然后运行下面命令,会生成一个二维码
weex test.we --qr
这个二维码是干啥的呢?你要下载一个weex playground app,下载地址用app上的扫一扫扫这个二维码,就能在手机上运行你的这个文件了,并且有热重载的功能。但是跟往常一下,每个新东西难免有一些坑。下面讲一下我遇到的坑,希望能帮到你。
坑
1.手机电脑需同一网络
Paste_Image.png
提示说的很清楚,你要确保你的电脑和手机的wifi是同一个网络,所以,加入你用的是虚拟机,你必须得改为桥接模式了。
2.默认网卡不对应
Paste_Image.png
这句话看出,这个二维码的链接其实就是上面这个链接,我用的是vagrant+ubuntu16.04+lnmp,ifconfig一下
会看到 eth0 eth1两个网卡,eth0是系统生成的,eth1是桥接出来的,
生成的二维码默认是用的eth0网卡,并不是桥接出来的网卡,所以要把eth0关掉
sudo ifconfig eth0 down
需要注意,关掉之后网络已经断开了,所以你会看到的就是当前的终端像卡死一样没有反应,再开一个终端,通过桥接出来的那个ip连接一下。再ifconfig发现只剩下一个eth1网卡,就是桥接的这个。(我试图修改weex默认的网卡设置,但是并没有找到)
3.不能热重载
如果你用的是vagrant 管理的项目,webpack是不能检测到项目变化的,所以热重载会失效,怎么办呢,你需要通过remote host连接项目,这样就不通过vagrant这一层来编辑项目了。但是这样管理项目保存很不方便,怎么办呢,phpstom的设置开面有个keymap,找到upload current remote file,重新设置适合你的快捷键。
Paste_Image.png
4.we文件编辑器高亮
这个问题想必你也知道,但也再啰嗦几句吧,编辑器的设置中都应该有一个file Types,选择html,在里面添加一个*.we,就能使.we文件按照html方式进行高亮。
参考地址