很长时间没有码文章了,感觉笔头都要生锈了,作为2017年的开端,决定还是多写点什么。
正好最近在调研Weex,React Native风头正劲,加上与vue的联姻,和马上入住的apache,虽然Weex目前坑还比较多,但对其未来的发展还是有满心的期待的,也希望Weex能够有越来越好的发展,希望越来越多的同学能够加入学习的行列。
这个系列的文章,计划从入门接触到完成一个完整的实例,中间所遇到问题的会在此做记录,就权当抛砖引玉了,有错误之处,请各位同学不吝赐教。
环境搭建
对于环境搭建和入门,想说的是,官方的教程还是挺靠谱的,只要照着做基本上就行了,这边主要就是补缺补漏,由于笔者使用的是mac环境,下面以及后面的所有文章都以mac环境为准。
1、如果没有node js环境,就先进行安装,对brew不熟悉的同学请自行google脑补
brew install node
2、有了nodejs环境,就可以使用npm来安装相关包了,weex提供了一个weex-toolkit命令行工具,国内的朋友,可以先安装一个cnpm来使用,不然那速度很是酸爽,另外需要注意这边一定要安装beta版本,因为老版本是不支持vue的方式开发,后续weex的开发方式都会逐渐往vue方式转变,所以还是不建议使用老版本了
cnpm install -g weex-toolkit@beta
开发入门
1、接下来就可以开始使用命令行创建一个项目骨架,注意这个会在当前目录下创建一个项目名称命名的目录
MacBook-Air-2:weex xxxx$ weex init helloweex
prompt: Init your Project: (helloweex)
file: /Users/xxxx/Source/weex/helloweex/.babelrc created.
file: /Users/xxxx/Source/weex/helloweex/.eslintrc created.
file: /Users/xxxx/Source/weex/helloweex/.gitignore created.
file: /Users/xxxx/Source/weex/helloweex/README.md created.
file: /Users/xxxx/Source/weex/helloweex/app.js created.
file: /Users/xxxx/Source/weex/helloweex/assets/phantom-limb.js created.
file: /Users/xxxx/Source/weex/helloweex/assets/qrcode.js created.
file: /Users/xxxx/Source/weex/helloweex/assets/qrcode.min.js created.
file: /Users/xxxx/Source/weex/helloweex/assets/style.css created.
file: /Users/xxxx/Source/weex/helloweex/assets/url.js created.
file: /Users/xxxx/Source/weex/helloweex/build/init.js created.
file: /Users/xxxx/Source/weex/helloweex/index.html created.
file: /Users/xxxx/Source/weex/helloweex/package.json created.
file: /Users/xxxx/Source/weex/helloweex/src/foo.vue created.
file: /Users/xxxx/Source/weex/helloweex/webpack.config.js created.
file: /Users/xxxx/Source/weex/helloweex/weex.html created.
中间可以看到一个项目名称的提示框,不用改变直接回车就好,然后就可以看到创建了许多文件。
2、进入目录,安装依赖包
cd helloweex
cnpm install
安装完成后会发现node_modules目录下多了很多相关的依赖包
3、接下来就可以尝试启动观看效果了
#先启动开发模式,开发模式不会启动web服务,只是会自动监控文件的变化,刷新浏览器就可以更新,方便开发
npm run dev
#再新建一个窗口,并且进入到helloweex目录,启动web服务
npm run serve
打开浏览器访问:http://localhost:8080 就能看到效果了
4、src目录下的foo.vue就是这个界面的源码,可以修改后刷新看看效果。
5、weex有提供了一个playground app,安装后可以直接扫描那个二维码在手机上查看效果。