1、先创建一个文件夹,并进入该文件夹:
mkdir projectName && cd projectName
2、使用如下命令进行生成Weex
工程:
weex init
3、查看工程目录结构:
说明:
注意:在package.json
中定义了一些命令,这些命令我们可以通过如下发放执行:
4、安装依赖:
npm install
5、体验一下工程中自带的例子:
weex src/weex-bootstrap.we
执行了这个命令后,开了Http
服务和WebSocket
服务, 这里的WebSocket
服务主要是起了热刷新作用,修改页面后页面自动刷新。
自动打开了浏览器,显示如下:
其实,这个命令执行后,还生成了一个weex_tmp
的文件夹,其文件结构如下:
weex_tmp/h5_render/weex-bootstrap.js
这个文件被称为js bundle
,h5
、Android
、iOS
等不同端的Weex SDK
就是解析这个文件, 然后将Weex
组件对应到各个端各自的控件下。
我们可以通过添加--qr
参数,同时生成一个二维码,通过手机淘宝扫描,在手机上查看效果,如下:
weex src/weex-bootstrap.we --qr
如果你觉得使用--qr
参数生成的二维码太大,你还可以使用--smallqr
参数生成相对较小的二维码:
weex src/weex-bootstrap.we --smallqr